[SyntaxHighlighter]좀 더 멋지게 코드 포스팅하기

코딩한 것을 그냥 올리려니 너무 지저분한 것 같아서 SyntaxHighlighter를 이용해서 올리려한다.


그전에 티스토리에서는 기본적으로 SyntaxHighlighter 플러그인을 제공해주지 않아 사용하기 위해서는 직접 적용할 필요가 있다.


먼저 SyntaxHighlighter 공식사이트에 들어가서 다운로드 받아주자.


참고로 GitHub버전을 받으면 따로 SyntaxHighlighter.js를 빌드해서 업로드하면 되지만 알집형태로 받으면 압축을 풀고 그 안에 있는 script폴더와 style폴더를 전부 업로드 시켜주면 된다.



HTML/CSS변경에 들어가면 다음과 같은 에디터가 뜨는데 여기서 필요한 파일들을 모두 업로드 시켜주면 된다.


그리고 이제 업로드시킨 파일들을 전부 사용가능하게 읽어주면 된다.


head부분에 추가해야하는 코드는 다음과 같다.


<link href=" .="" images="" shcore.css"="" rel="stylesheet" type="text/css"><link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/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>
<script type="text/javascript">
  SyntaxHighlighter.defaults["toolbar"] = false;
  SyntaxHighlighter.defaults["auto-links"] = false;
  SyntaxHighlighter.defaults["tab-size"] = 2;
  SyntaxHighlighter.all();
</script>

적용을 하고나면 이제 사용할 수 있는데 사용법은 다음과 같다.


<pre class="brush:html>

&lt;head&gt;

&lt;link rel="stylesheet" type="text/css" href="./images/shThemaDefault.css"/&gt

</pre>


pre태그로 감싸주고 class로 어떠한 언어를 사용할 것인지 적어주면 해당 언어에 맞게 하이라이팅이 가능하다.


이번 글에서는 기본으로 설정된 테마를 사용하고 있지만 <SyntaxHighlighter - Thema>에 들어가면 각 테마들을 확인할수 있으니 마음에 드는 테마를 골라서 사용하면 된다.

'코딩' 카테고리의 다른 글

[SQLD]데이터베이스 전문가 자격증  (0) 2017.07.21
공공 데이터 활용하는 방법  (0) 2017.07.19
더보기

댓글

MathGrammer

하고싶은거 공부하고 하고싶은거 하는 사람의 블로그