[블로그] 하이라이트 코딩소스 넣는법 (SyntaxHighlighting )
- 일상/블로그
- 2018. 5. 23.
제 블로그는 코딩블로그입니다. 소스코드를 올릴 일이 굉장히 많죠. 하지만 이 소스코드를 가공하지않고 그냥 올릴경우에는 굉장히 가독성이 떨어집니다. 이번 포스팅에서는 SyntaxHighlighting을 이용하여 Html을 조작하여 코드를 넣는 방법에 대해 알아보겠습니다.
티스토리 블로그에 코딩소스 넣는법
1. 먼저 SyntaxHighlighting을 사용하려면 하이라이터를 다운받아줘야합니다. 먼저 위에 첨부되어 있는 압축파일을 받으시고 압축을 풀어주세요.
2. 그런뒤 블로그-> 꾸미기-> 스킨편집에 들어갑니다.
3. html편집 -> 파일업로드를 누른뒤 압축해제파일에 있는 Script와 Styles에 있는 파일들을 자신의 블로그 파일업로드에 업로드해주세요.
4. 그런 뒤 HTML탭으로 이동하셔서 <head></head>안에 자신이 쓸 테마를 선택해서 넣어줘야하는데
<link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreEclipse.css"> //이클립스테마
<link rel=" stylesheet" =""="" type="text/css" href="./images/shCoreRDark.css"> //다크테마저는 개인적으로 이렇게 두 테마가 예쁘더라구요. 이 둘중에서 마음에 드시는것을 선택해서 넣어주시는것을 추천드립니다.저는 다크테마로 하겠습니다. 이클립스테마와 다크테마뿐만 아니라. 아까 첨부했었던 코드스타일중 아무거나 지정해서 쓸 수 있습니다.
<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>그런뒤 body 태그안에는 이렇게 넣어줍니다. 저는 혹시몰라서 전부 다 넣었는데 쓰시는 언어가 몇개 안되면 쓰시는 언어만 body에 넣는것이 블로그의 속도면에서 더 효율적입니다.
5. 그런뒤 이제 글을 쓸때 html속성에다가 아래와 같이 <pre class="brush: java"> 클래스를 불러주시고 소스코드를 입력 후 사용하면 됩니다.
<pre class="brush: java">
/*코드내용*/
</pre>
이런식으로 SyntaxHighlighting 소스가 잘 입혀져 나오는것을 볼 수 있습니다.
※ 소스코드를 입력할때 < > 이런 꺽쇠문양을 많이 쓰게됩니다. 이때 꺽쇠는 < = < > => 이런식으로 써주셔야 정상적으로 작동됩니다.
'일상 > 블로그' 카테고리의 다른 글
| [블로그] Syntax Highlighting vs Highlight.js (장단점 비교분석) (0) | 2018.06.11 |
|---|---|
| [블로그] 코딩소스에 하이라이트(코드블럭) 넣는법 (Highlight.js) (4) | 2018.06.09 |
| [블로그] FastBoot 상단바에 배너(사진) 넣기 (5) | 2018.06.04 |
| [블로그] 티스토리 블로그 구글 애드센스 신청하기 (0) | 2017.11.07 |