바로 Syntax Highlighter
이름을 몰라서 한참을 찾았었는데 구글링의 힘으로 찾아서 설치/적용 방법을 알게되었다. 차근 차근 따라해보자.
1. Syntax Highlighter Download
http://alexgorbatchev.com/SyntaxHighlighter/download
다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.
이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.
2. 파일 업로드
압축 폴더를 풀면 다음과 같은 폴더들이 나온다.
이 중 우리가 업로드 할건 scripts 폴더와 styles 폴더이다. 내용은 아래 그림과 같다.
필요한 것만 올려도 상관 없으나 용량이 부족하지 않은이상 큰 문제가 없으니 모두 업로드하자.
Tistory 관리 >> HTML/CSS 편집 >> 파일 업로드 >> 추가 버튼을 차례로 눌러서 모두 업로드
그럼 업로드가 완료된다.
3. HTML 수정하기
여러분이 제일 귀찮아하는 나도 귀찮은 HTML 손보기는 의외로 간단하다
Tistory 관리 >> HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.
찾고나서 </head> 바로 위에 다음 태그를 삽입해준다.(복붙)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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> |
아직 끝난게 아니다. 범용성을 늘리기 위해 우리는 textarea 태그를 이용할 것이므로 추가 수정이 필요하다.
다시 CTRL + F로 <body>를 찾아주자.
찾았다면 <body>를 다음과 같이 덮어씌운다(바꾼다).
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
그렇다면 HTML 수정이 완료된다. 이제 사용법만 알면 된다. 참 쉽죠?
4. Syntax Highlighter 적용법
원래 Syntax Highlighter 적용법에는 크게 두가지가 있다. <pre> 태그 이용법과 <textarea> 태그 이용법, 하지만 <pre>태그를 이용하게 되면 html태그 코드를 사용할 때 많이 많이 불편하게 되므로 <textarea>태그를 이용하자.
간단하다. 글 작성할 때 코드를 쓰게된다면 먼저, HTML에티터 타입으로 변경한다.
그리고 나서 다음과 같이 입력해준다.
1 2 3 | <textarea name="code" class="brush:원하는 언어;"> 에디터 모드에서 이 사이에 코드를 작성하면 된다.</textarea> |
5. 예시 및 다양한 변형
만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.
1 2 3 4 5 6 7 8 9 | <textarea name="code" class="brush:cpp;"> #include <iostream>using namespace std;void main(){ cout << "참 쉽죠?";}</textarea> |
사용할 언어 목록은 다음과 같다.
Brush name | Brush aliases | File name |
as3, actionscript3 | shBrushAS3.js | |
bash, shell | shBrushBash.js | |
cf, coldfusion | shBrushColdFusion.js | |
c-sharp, csharp | shBrushCSharp.js | |
cpp, c | shBrushCpp.js | |
css | shBrushCss.js | |
delphi, pas, pascal | shBrushDelphi.js | |
diff, patch | shBrushDiff.js | |
erl, erlang | shBrushErlang.js | |
groovy | shBrushGroovy.js | |
js, jscript, javascript | shBrushJScript.js | |
java | shBrushJava.js | |
jfx, javafx | shBrushJavaFX.js | |
perl, pl | shBrushPerl.js | |
php | shBrushPhp.js | |
plain, text | shBrushPlain.js | |
ps, powershell | shBrushPowerShell.js | |
py, python | shBrushPython.js | |
rails, ror, ruby | shBrushRuby.js | |
scala | shBrushScala.js | |
sql | shBrushSql.js | |
vb, vbnet | shBrushVb.js | |
xml, xhtml, xslt, html, xhtml | shBrushXml.js |