블로그 관리하기

[블로그 관리하기] 티스토리(Tistory)에 소스코드 넣기, SyntaxHighlighter 설치/적용/사용법

쌍쌍바나나 2016. 3. 17. 10:02
반응형

블로그에 소스코드를 작성하려고 할때, Ctrl+C, Ctrl+V를 하게 되면 그 누가 보고 얻어가겠는가. 
나조차 다시 보고 싶지 않을 것 같다. 
그렇기 때문에 Syntax Highlighter를 적용하는 방법을 공유하려고 한다. 



HTML과 CSS를 몰라도 적용하는 방법은 매우 쉬우니 천천히 따라하면 가능.
코드를 넣는 방법은 아래 두가지 방법이 있다.
첫 번째 그냥 막 복붙

import sys
import os

print 'test python code style'

두번째 SyntaxHighlighter를 적용하여 아름답고 깔끔하고 소유하고싶고 공유하고싶으고 나중에 보기 좋게 소스코드를 넣는 방법

당신은 무엇을 선택할 것인가? 두번째? 그럼 아래를 천천히 따라하자 (예상소요시간 지금 일어나서 물떠 오는 시간)

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 를 누른뒤에 찾으면 더 빨리 찾을 수 있겠지요.>

※ <head>와 <body> 부분을 변경한 최종 결과는 아래와 같다. 


3. 사용법

1) HTML 체크 

글쓰는 오른쪽 위에 HTML을 체크한 후에


2) 소스코드 Style 적용하기

brush:python에서 python대신 cpp를 넣으면 cpp코드가 삽입 가능하다.

<textarea name="code" class="brush:원하는 언어;">
에디터 모드에서 이 사이에 코드를 작성하면 된다.
</textarea>

예) python 코드 삽입하기.
<textarea name="code" class="brush:python;">
print 'hello world'.
</textarea>

2-1) 적용 가능한 언어 목록

[참고] http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js



반응형