블로그에 소스코드를 작성하려고 할때, Ctrl+C, Ctrl+V를 하게 되면 그 누가 보고 얻어가겠는가.
나조차 다시 보고 싶지 않을 것 같다.
그렇기 때문에 Syntax Highlighter를 적용하는 방법을 공유하려고 한다.
HTML과 CSS를 몰라도 적용하는 방법은 매우 쉬우니 천천히 따라하면 가능.
코드를 넣는 방법은 아래 두가지 방법이 있다.
첫 번째 그냥 막 복붙
import sys
import os
print 'test python code style'
당신은 무엇을 선택할 것인가? 두번째? 그럼 아래를 천천히 따라하자 (예상소요시간 지금 일어나서 물떠 오는 시간)
1. 설치
SyntaxHighlighter 3.0.83버전이 가장 최근 버전이다. [Download] <--- 다운로드 Link
http://alexgorbatchev.com/SyntaxHighlighter/download/
파일 크기는 대략 175KB, 다운로드 받은 파일을 압축을 풀면 아래와 같이 파일들이 나온다.
우리가 사용해야 할 파일은 scripts와 styles
2. 적용
적용하기 위해 관리자 페이지로 들어가 HTML/CSS편집을 선택한다.
다운받은 syntaxhighlighter 폴더 안에 있는 scripts와 styles의 폴더 내에 있는 모든 파일을 업로드한다.
1) <Head> 부분 추가 <Ctrl + F 를 누른뒤에 찾으면 더 빨리 찾을 수 있겠지요.>
</head> 바로 위에 아래의 코드를 추가한다.
2) <body> 부분을 변경 <Ctrl + F 를 누른뒤에 찾으면 더 빨리 찾을 수 있겠지요.>
3. 사용법
1) HTML 체크
글쓰는 오른쪽 위에 HTML을 체크한 후에
2) 소스코드 Style 적용하기
brush:python에서 python대신 cpp를 넣으면 cpp코드가 삽입 가능하다.
<textarea name="code" class="brush:원하는 언어;"> 에디터 모드에서 이 사이에 코드를 작성하면 된다.</textarea>
<textarea name="code" class="brush:python;"> print 'hello world'.</textarea>
2-1) 적용 가능한 언어 목록
[참고] http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
| 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 |
'블로그 관리하기' 카테고리의 다른 글
| 블로그 방문자수 늘리기 - Sitemap 등록하기 (3/3) (0) | 2016.03.29 |
|---|---|
| 블로그 방문자수 늘리기 - Sitemap 생성하기 (2/3) (0) | 2016.03.29 |
| 블로그 방문자수 늘리기 - 웹마스터를 이용해 블로그 포털에 등록하기 (1/3) (0) | 2016.03.28 |