티스토리 블로그에 소스코드 넣기 SyntaxHighlighter

< 블로그에서 자주 보이는 디자인 입혀서 예쁜 소스 코드 >

티스토리 블로그 소스코드 입력 라이브러리에 대해 검색한다면, SyntaxHighlighter 라이브러리가 대다수다.

나는 주로 아래의 ColorScripter 가 편리해서 티스토리 블로그에 소스 코드를 쓰지만.. ( 다음 포스팅으로.. )

SyntaxHighlighter 라이브러리가 궁금해서 SyntaxHighlighter 라이브러리를 적용해 보려고 한다.

< ColorScripter 홈페이지 >

2016년 8월 8일 월요일 기준 SyntaxHighlighter 버전은 3.0.83 이다.

참조한 티스토리 게시글은 2013년 1월 28일 게시글 이므로 아마 여러분들도 작동이 잘 될 것이다

1. SyntaxHighlighter 라이브러리 다운로드

SyntaxHighlighter 홈페이지에서 우측 메뉴 Donate 탭 밑에 Download 탭을 누르면 된다.

그 이후에, Click here to download 링크를 클릭하여 zip 파일을 다운로드 받는다.

Zip 파일을 압축 해제한다!

우리가 쓸 것은 scripts 폴더와 styles 폴더뿐이다!

2. 티스토리 블로그에 라이브러리 업로드

블로그 관리 -> 꾸미기 탭의 HTML/CSS 편집 -> 파일 업로드 탭으로 넘어간다!

하단에 + 추가 버튼을 눌러, 라이브러리의 scripts 폴더 안에 있는 파일 전체와 styles 폴더 안에 있는 파일 전체를 업로드 해준다!

용량은 보시다 시피, 전체 업로드를 했음에도 416.0 kB 밖에 들지 않는다!

3. 스크립트 적용시키기

그런다음, 파일 업로드 탭이 아닌 HTML 탭에서

Ctrl + F 키로 </head> 를 찾는다! 그리고 그 바로 위에 아래 코드를 붙여넣기 하면 된다!

<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>

그러면, 아래 사진처럼 나온다.

자, 이제 만반의 준비는 끝났다!

마지막으로 실제 에디터에 코드를 어떻게 집어넣는가이다.

소스 코드 삽입은 에디터의 우측 상단 메뉴에 있는 HTML 편집탭에서 넣어주어야 한다.

네모난 버튼을 누르면, HTML 편집기로 넘어갈 수 있다.

또, 다시 체크를 풀면 원래 에디터로 넘어간다!

<pre></pre> 태그를 이용할 수 있지만, 줄바꿈 등의 사용하는데에 있어 문제가 생긴다.

다른 방법인 <textarea></textarea> 태그를 사용해 버리자~

  
실제 코드

위 코드에 대한 HTML 소스였다. 줄바꿈 등의 문제로, 한줄을 더 띄우고 그대로 HTML 소스를 체크해버리면, 다시 줄바꿈 문제가 생겨버려서 바로 글 발행 버튼을 눌러야하는 문제점이 있다.. ㅋㅋㅋ

HTML 체크를 풀면, 아래와 같이 텍스트 편집기가 안어울리게 나온다!

내 테마에서 pre 태그가 글박스 처리되서 회색 박스가 생겨버렸다!

그래서 미리보기 버튼 또는 발행 버튼을 누르면, 이렇게 멋있게 나온다!

 brush:언어이름; 에서 언어이름에 속하는 내용은 홈페이지 syntaxes 탭에 적혀있다.

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

두 번째, Brush aliases 에 있는 단어를 활용하면 된다!

예시 : brush:sql;

brush:vbnet;

brush:html;

4. 테마 바꾸기

테마 바꾸기에 자세한 내용은 홈페이지의 themes 탭에 나와있다.

다시 HTML 편집 탭으로 돌아가서, 선택한 부분에서 shThemeDefault 이름만 바꾸면 된다!

예를 들어, Eclipse 테마를 선택하고자 한다면, 아래 처럼 바꾸어야 한다.

그럼, 아래 처럼 테마가 바뀐다!

< 변경 후 >

< 변경 전 >

테마 이름은 아래와 같다.

Name	File
Default	shThemeDefault.css
Django	shThemeDjango.css
Eclipse	shThemeEclipse.css
Emacs	shThemeEmacs.css
Fade To Grey	shThemeFadeToGrey.css
Midnight	shThemeMidnight.css
RDark	shThemeRDark.css

한 번, 홈페이지에서 다른 테마가 어떻게 생겼는지 보고, 마음에 드는 테마로 언제든지 바꾸면 된다!

---

댓글과 트랙백 환영합니다