티스토리 뷰

TIP

티스토리에서 Syntax Highlighter 사용하기!!

RCE_Mania 2015. 5. 28. 18:15

블로그를 하는 IT인이라면 꼭 필요한 기능인 Syntax Highlighter입니다.
워드프레스에서는 플러그인으로 제공하고있어서 손쉽게 사용했는데 티스토리는 다른 방식으로 적용하더군요!!

 

제가 이번에 적용할 Syntax Highlighter는 Alex Gorbatchev님께서 만드신 거구요. Syntax Highlighter를 쓸 수 있는 솔루션들은 공식홈페이지에서 확인가능합니다.

 

 

설명에는 티스토리에서 적용하는 방법이 안나와 있지만 (미쿡형이 만든거라 짐작..) 아래의 스텝을 따르면 적용할수 있습니다!!

 

  1. Syntax Highlighter의 소스파일을 HTML/CSS편집을 통해 업로드
  2. Skin.html 파일 수정
  3. 포스팅 할때 HTML 태그를 이용해 Syntax Highlighter를 적용

 

Syntax Highlighter의 소스파일을 HTML/CSS편집을 통해 업로드

Syntax Highlighter의 소스파일은 앞서 설명한 공식홈페이지에 다운로드페이지에서 다운로드 가능합니다. 현재 최신버전은 3.0.83이며, 혹시나 페이지에 접속안되는 사람들을 위해 파일 첨부합니다!

 

syntaxhighlighter_3.0.83.zip

 

 

다운로드 받으신 파일을 압축해제 한 후, 'scripts'폴더와 'styles'폴더의 파일을 모두 업로드 시켜주시면 됩니다.

 

 

skin.html 파일 수정

파일 업로드가 완료되면 업로드한 스크립트들을 웹페이지에 불러올수 있도록 skin.html을 수정해야합니다. skin.html의 haed태그 사이에 적당한 위치를 찾아 아래 스크립트를 추가하시면 됩니다. (<head>##요기##</head>) 참고로 저는 </head>태그 바로 위에 추가했습니다.

 

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript"> SyntaxHighlighter.all(); </script>

 

포스팅 할때 HTML 태그를 이용해 Syntax Highlighter를 적용

포스팅을 할때는 에디터 타입을 HTML로 변경하시고 아래와 같은 방법으로 태그를 입력하시면 적용됩니다.

 

 

<pre class="brush: Python">
/* To do */
</pre>
저작자표시 비영리 변경금지

'TIP' 카테고리의 다른 글

구글 애드센스 무작정 따라하기 2탄 - 광고달기  (0) 2015.06.04
구글 애드센스 무작정 따라하기 1탄 - 애드센스 가입  (0) 2015.06.03
티스토리 썸네일 이미지 외부링크 걸기 삽질기  (0) 2015.06.01
티스토리 이미지 짤림  (0) 2015.05.30
바이러스 토탈 이용하기 - Retrieving file scan reports  (0) 2015.05.29
댓글