Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

올해는 머신러닝이다.

[펌] 티스토리에서 코드 예쁘게 넣기, syntaxhighlighter 설치/적용/사용법 본문

웹 관련 팁 모음

[펌] 티스토리에서 코드 예쁘게 넣기, syntaxhighlighter 설치/적용/사용법

행복한 수지아빠 2014. 11. 28. 10:32

출처 : http://jb-story.tistory.com/13



하는 일이 하는 일인지라 구글에서 코드를 찾아 블로그를 다닐 때가 많다. 그러다가 예전에도 어디서 본듯하긴한데 소스를 이쁘게 정리해주는 소스 입력기? 소스 편집기? 코드 입력기?? 뭐 이런 걸 발견했다.


 바로 Syntax Highlighter


 이름을 몰라서 한참을 찾았었는데 구글링의 힘으로 찾아서 설치/적용 방법을 알게되었다. 차근 차근 따라해보자.


 1. Syntax Highlighter Download


http://alexgorbatchev.com/SyntaxHighlighter/download


다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.

이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.


 

  2. 파일 업로드


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



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

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



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



  그럼 업로드가 완료된다.



 3. HTML 수정하기


 여러분이 제일 귀찮아하는 나도 귀찮은 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 수정이 완료된다. 이제 사용법만 알면 된다. 참 쉽죠?



 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


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


저작자표시

'웹 관련 팁 모음' 카테고리의 다른 글

centos 서버 구입시 기본 세팅...  (0) 2017.07.28
이클립스에 UML Generator 를 붙여보자 ) - objectaid  (0) 2014.11.28
제로보드로 포인트몰 개설  (1) 2014.11.27
[펌]UML Diagram의 종류  (0) 2014.11.25
검색엔진에 등록하는 Robot.txt  (0) 2014.11.18
'웹 관련 팁 모음' Related Articles more