본문으로 바로가기

[기타]티스토리에 코딩소스 넣는법

category 기타 2017. 8. 9. 13:10

안녕하세요~~ 저번시간에는 코드변환 사이트를 이용해 블로그에 코드를 넣는법을 알아봤습니다.


이번에는 SyntaxHighlighting 를이용하여 티스토리 게시물을쓸때 바로 html 을 조작하여 코드를 넣어보는 방법을 알아보겠습니다.


먼저 http://alexgorbatchev.com/SyntaxHighlighter/ 사이트로 이동하여 하이라이터를 다운로드 받아 줍니다!!


(위사이트에서 다운로드가 안되는거 같아서 파일첨부 합니다!)

syntaxhighlighter_3.0.83.zip


압축을 풀면 나오는 파일중 


스크립트와 스타일 폴더에 있는 모든파일을 자신의 블로그 html 에 등록하여 주면됩니다.


그리고 블로그 html 의 <head>부분에 

<link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreRDark.css">

을 추가해 줍니다 (코드 스타일을 지정할수 있습니다 저는 다크로...)


<body> 부분에는


<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>

<script type="text/javascript" src="./images/shBrushAS3.js"></script>

<script type="text/javascript" src="./images/shBrushBash.js"></script>

<script type="text/javascript" src="./images/shBrushColdFusion.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.js"></script>

<script type="text/javascript" src="./images/shBrushCSharp.js"></script>

<script type="text/javascript" src="./images/shBrushCss.js"></script>

<script type="text/javascript" src="./images/shBrushDelphi.js"></script>

<script type="text/javascript" src="./images/shBrushDiff.js"></script>

<script type="text/javascript" src="./images/shBrushErlang.js"></script>

<script type="text/javascript" src="./images/shBrushGroovy.js"></script>

<script type="text/javascript" src="./images/shBrushJava.js"></script>

<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>

<script type="text/javascript" src="./images/shBrushJScript.js"></script>

<script type="text/javascript" src="./images/shBrushPerl.js"></script>

<script type="text/javascript" src="./images/shBrushPhp.js"></script>

<script type="text/javascript" src="./images/shBrushPlain.js"></script>

<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>

<script type="text/javascript" src="./images/shBrushPython.js"></script>

<script type="text/javascript" src="./images/shBrushRuby.js"></script>

<script type="text/javascript" src="./images/shBrushSass.js"></script>

<script type="text/javascript" src="./images/shBrushScala.js"></script>

<script type="text/javascript" src="./images/shBrushSql.js"></script>

<script type="text/javascript" src="./images/shBrushVb.js"></script>

<script type="text/javascript" src="./images/shBrushXml.js"></script>

<script type="text/javascript" src="./images/shLegacy.js"></script>

<script type="text/javascript"> SyntaxHighlighter.all(); </script>


브러쉬를 등록해 줍니다(코드의 스타일을 글쓸때 html에서  지정할수 있습니다.)


여기까지 하시고 저장하면 이제 글쓰기에서 html을 체크하신뒤


<pre class="brush: java">

/*여기에 코드내용*/

</pre>


저렇게 <pre>사이에 코드를 입력하게되면

/*여기에 코드내용*/

이렇게 나오게 됩니다!!


<pre class=> 부분에서 자신의 코드스타일을 지정해주시면 됩니다(java 면 java c면 c 등등)


그리고 한가지 코드를 쓰는데에 있어서 코드안에 <와 > 문자가 들어가면 인식이 안되는 경우가 있습니다.. (xml 같은경우)

이런경우 <는 &lt; 로  >는 &gt; 로 변환해서 써주면 정상적으로 나오게 됩니다.


이상으로 티스토리에서 블로그에 코드를 넣는법을 알아보았습니다~~ 틀린부분이나 이상한부분이 있으면 알려주세요.