SyntaxHighlighter 적용하는 법

본문 바로가기

Notice

Recent Posts

Recent Comments

Link

Tags more

Archives

Today

Total

관리 메뉴

Halo World

SyntaxHighlighter 적용하는 법 본문

그 외

SyntaxHighlighter 적용하는 법

_Yeony 2017. 10. 1. 20:32

1. http://alexgorbatchev.com/SyntaxHighlighter에서 SyntaxHighlighter를 다운 받는다.

2. 압축을 푼 후, Tistory 관리자 페이지의 HTML/CSS 편집에 들어가서

Script 폴더와 Style 폴더의 파일들을 모두 넣어준다.

3. HTML의 </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/shThemeEclipse.css">   
 // shThemeEclipse.css는 테마명 이므로 다른 테마로 바꾸어도 된다.

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

4. <body> 부분에

Onload="dp.SyntaxHighlighter.HighlightAll('code');"

를 추가해준다.

<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">

이런식!!

이 부분은 <textarea>를 사용하기 위해서이다.

이렇게 적용하면 코드를 작성할 때 html 에디터에서

<textarea name="code" class="java">

코드가 들어가는 곳

</textarea>

이런식으로 작성해주면 된다.

티스토리툴바