앞으로 블로그 활동을 하게 되면, 블로그에 코드를 입력 할 일이 많을 것 같아서. 코드 이쁘게 넣을 수 있는 방법을 찾아 보았는데..
Syntax Highlighter 라는 소스를 발견 하였다. 나의 블로그에 적용한 방법을 올려볼까 한다.
1. Download
Syntax Higilighter 홈페이지 (http://alexgorbatchev.com/SyntaxHighlighter/download/)에 접속을 하여서 최신버전인 3.0.83 (15.09.10 기준) 을 다운받을 수 있다.
2. Syntax Highlighter 설치
ZIP 파일을 받은 후 압축파일을 열어보면 여러가지 파일이 나오는데 그 중, scripts와 styles 폴더만 압축을 해제해 줍니다.
압축 해제 후 관리자 페이지에 접속을 하고, [ 꾸미기 -> HTML/CSS 편집 ] 항목으로 들어갑니다.
그 후, 파일 업로드에 들어가고, 압축해제 한 파일들을 추가 합니다.
파일 추가를 다 했으면 CSS HTML 편집부분에 </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> | cs |
그리고 <body> 태그를 찾은 후 <body 와 > 사이에 아래 line을 작성해줍니다.
1 | Onload="dp.SyntaxHighlighter.HighlightAll('code');" | cs |
그리고 저장을 하면 홈페이지에서 불러들일 준비가 되었습니다.
3. 사용방법
사용방법은 정말 간단합니다.
HTML 에디터로 변경 후 작성하고 싶은 부분에 아래 코드를 입력하면 됩니다.
1 2 3 | <textarea name = "code" class = "brush:사용하고싶은 언어;"> 내용 입력 </textarea> | cs |
4. 코드별 Loader
코드별 Loader는 다음과 같습니다.
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
'낙서장' 카테고리의 다른 글
| CRT 파일을 JKS 파일로 변환 하기 (0) | 2019.03.13 |
|---|---|
| 파일 첨부시 웹브라우저 튕기는 현상 (0) | 2018.01.24 |