Hello World

티스토리에 소스코드 넣기(SyntaxHighlighter) 본문

Tistory

티스토리에 소스코드 넣기(SyntaxHighlighter)

EnterKey 2016. 1. 9. 23:32
반응형

1. Syntax Highlighter Download


http://alexgorbatchev.com/SyntaxHighlighter/download


다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 


 

2. 파일 업로드


압축 폴더를 풀면 다음과 같은 폴더들이 나온다. 



이 중 우리가 업로드 할건 scripts 폴더와 styles 폴더이다. 내용은 아래 그림과 같다. 

필요한 것만 올려도 상관 없으나 용량이 부족하지 않은이상 큰 문제가 없으니 모두 업로드하자.



Tistory 관리 >> HTML/CSS 편집 >> 파일 업로드 >> 추가 버튼을 차례로 눌러서 모두 업로드



  그럼 업로드가 완료된다.



 3. HTML 수정하기


 Tistory 관리 >> HTML/CSS 편집에 다시 들어가 CTRL + F 로 </head>를 찾는다.

 찾고나서 </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>


 아직 끝난게 아니다. 범용성을 늘리기 위해 우리는 textarea 태그를 이용할 것이므로 추가 수정이 필요하다.

 다시 CTRL + F로 <body>를 찾아주자. 

 찾았다면 <body>를 다음과 같이 바꾼다.


<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">

 

그렇다면 HTML 수정이 완료된다. 이제 사용법만 알면 된다.


- Default 테마 외에 다른 테마를 적용하고 싶으면 sHCore.css 와 shThemeDefulat.css 파일명을 변경하면 된다

- Emacs 테마를 사용한다면 shCoreEmacs.css와 shThemeEmacs.css로 입력한다.

- 테마 정보 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/



 4. Syntax Highlighter 적용법


 원래 Syntax Highlighter 적용법에는 크게 두가지가 있다. <pre> 태그 이용법과 <textarea> 태그 이용법, 하지만 <pre>태그를 이용하게 되면 html태그 코드를 사용할 때 많이 많이 불편하게 되므로 <textarea>태그를 이용하자.


 간단하다. 글 작성할 때 코드를 쓰게된다면 먼저, HTML에티터 타입으로 변경한다.


그리고 나서 다음과 같이 입력해준다.

 

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



 5. 예시 및 다양한 변형


 만약 c++ 코드를 입력하고 싶다면? 다음과 같이 입력하면 된다. col이나 width는 중요하지 않다.


?
1
2
3
4
5
6
7
8
9
<textarea name="code" class="brush:cpp;">
#include <iostream>
using namespace std;
 
void main(){
  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


 나머지 자세한 사항은 홈페이지에 가면 나와있다.



6. 링크


사이트 주소: http://alexgorbatchev.com/SyntaxHighlighter/

다운로드 주소: http://alexgorbatchev.com/SyntaxHighlighter/download/

테마 정보: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

브러시 종류: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


반응형
저작자표시 비영리 변경금지

'Tistory' 카테고리의 다른 글

블로그/웹에서 소스코드 하이라이트/구문강조 사용하기  (0) 2016.04.18
[펌]워드프레스에 버디프레스(BuddyPress) 구성하기  (0) 2016.01.11
[펌]How to Add a Login Form in Your WordPress Sidebar  (0) 2016.01.11
공유하기 링크
'Tistory' Related Articles more
Comments