http://jb-story.tistory.com/13 <-- 담아왔습니다.
하는 일이 하는 일인지라 구글에서 코드를 찾아 블로그를 다닐 때가 많다. 그러다가 예전에도 어디서 본듯하긴한데 소스를 이쁘게 정리해주는 소스 입력기? 소스 편집기? 코드 입력기?? 뭐 이런 걸 발견했다.
바로 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> 바로 위에 다음 태그를 삽입해준다.(복붙)
<scripttype="text/javascript"src="./images/shCore.js"></script><scripttype="text/javascript"src="./images/shLegacy.js"></script><scripttype="text/javascript"src="./images/shBrushBash.js"></script><scripttype="text/javascript"src="./images/shBrushCpp.js"></script><scripttype="text/javascript"src="./images/shBrushCSharp.js"></script><scripttype="text/javascript"src="./images/shBrushCss.js"></script><scripttype="text/javascript"src="./images/shBrushDelphi.js"></script><scripttype="text/javascript"src="./images/shBrushDiff.js"></script><scripttype="text/javascript"src="./images/shBrushGroovy.js"></script><scripttype="text/javascript"src="./images/shBrushJava.js"></script><scripttype="text/javascript"src="./images/shBrushJScript.js"></script><scripttype="text/javascript"src="./images/shBrushPhp.js"></script><scripttype="text/javascript"src="./images/shBrushPlain.js"></script><scripttype="text/javascript"src="./images/shBrushPython.js"></script><scripttype="text/javascript"src="./images/shBrushRuby.js"></script><scripttype="text/javascript"src="./images/shBrushScala.js"></script><scripttype="text/javascript"src="./images/shBrushSql.js"></script><scripttype="text/javascript"src="./images/shBrushVb.js"></script><scripttype="text/javascript"src="./images/shBrushXml.js"></script><linktype="text/css"rel="stylesheet"href="./images/shCore.css"><linktype="text/css"rel="stylesheet"href="./images/shThemeDefault.css"><scripttype="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에티터 타입으로 변경한다.
그리고 나서 다음과 같이 입력해준다.
<textareaname="code"class="brush:원하는 언어;">에디터 모드에서 이 사이에 코드를 작성하면 된다.</textarea>
5. 예시 및 다양한 변형
만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.
<textarea name="code"class="brush:cpp;">#include <iostream>usingnamespacestd;voidmain(){cout <<"후다닥";}</textarea>
사용할 언어 목록은 다음과 같다.
Brush name Brush aliases File name ActionScript3 as3, actionscript3 shBrushAS3.js Bash/shell bash, shell shBrushBash.js ColdFusion cf, coldfusion shBrushColdFusion.js C# c-sharp, csharp shBrushCSharp.js C++ cpp, c shBrushCpp.js CSS css shBrushCss.js Delphi delphi, pas, pascal shBrushDelphi.js Diff diff, patch shBrushDiff.js Erlang erl, erlang shBrushErlang.js Groovy groovy shBrushGroovy.js JavaScript js, jscript, javascript shBrushJScript.js Java java shBrushJava.js JavaFX jfx, javafx shBrushJavaFX.js Perl perl, pl shBrushPerl.js PHP php shBrushPhp.js Plain Text plain, text shBrushPlain.js PowerShell ps, powershell shBrushPowerShell.js Python py, python shBrushPython.js Ruby rails, ror, ruby shBrushRuby.js Scala scala shBrushScala.js SQL sql shBrushSql.js Visual Basic vb, vbnet shBrushVb.js XML xml, xhtml, xslt, html, xhtml shBrushXml.js
나머지 자세한 사항은 홈페이지에 가면 나와있다.