안녕하세요.
티스토리 입성하고나서 첫번째로 하고 싶었던것이 highlighter 적용입니다.
전에 쓰던 블로그에 강좌를 옮기면서 바로 highlighter를 적용했습니다. ^^
특별히 추가한 내용도 없는데 가독성도 높아지고 깔끔해지더군요.
이제 시작하겠습니다.
1. highlighter이란?
내가 작정한 프로그램 소스를 보기 좋게 스타일을 변환하여 보여주는 프로그램(?)입니다.
editplus등 IDE Tools를 이용하다보면 특정 구문이나 단어에 글꼴이나 색상을 바꿔주어 보기 좋게
정리하여 주잖아요. 그런 효과와 같다고 보시면 됩니다.(전 이거 할 수 있는게 정말 부러웠어요 ㅋㅋ)
2. 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/
위 주소로 이동하시면 해당 사이트 입니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
위 주소는 바로 다운로드를 할 수 있는 곳이구요. 최신버전을 받아 아무곳에서 압축을 푸세요.
3. Highlight Style
스타일은 어떤 언어를 하일라이트 할것인지 결정합니다.
해당 언어에 맞게 설정을 해주워야 좀 더 가독성이 높아지겠조?
파일 위치 : ./syntaxhighlighter_(버전)\scripts
해당 위치로 이동을 하면 js파일이 여러게 있습니다.
이 js파일이 어떤언어에 맞게 highlight할지 정해줍니다.
아래 표를 보시면 어떤 언어에 어떤 스크립트를 이용할지 알수 있습니다.
실제로 적용한때 이름은 중앙에 Brush aliases(브러시 별칭)의 명을 이용합니다.
(적용방법은 더 아래에 있습니다. 천천히 읽어보세요 ^^)
| 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 |
4. Highlight Themes(태마)
스타일은 해당 언어에 맞게 하일라이팅 되고 텍스트를 중심으로 하일라이팅 하는 것이지만
태마는 배경과 텍스트를 같이 변경해줍니다.
자세히 모르시겠으면 아래 샘플을 확인해보세요.
파일위치 : ./syntaxhighlighter_(버전)\styles
해당 위치에 이동하면 css파일들이 있습니다.
각 한파일당 태마를 담당하고 있습니다.
전체 샘플을 다 넣으려면 시간이 오래 걸리니 홈페이지에 있는 샘플 몇개를 올려 높겠습니다.
* shThemeDefault.css
* shThemeDjango.css
* shThemeEclipse.css
* shThemeEmacs.css
* shThemeFadeToGrey.css
* shThemeMidnight.css
* shThemeRDark.css
홈페이지에 있는것만 넣는데도 시간이 상당히 걸리네요.
5. 티스토리에 필요한 파일 올리기
먼저 티스토리에 로그인 하신 후
꾸미기 -> HTML/CSS편집 -> 파일업로드 탭 으로 이동하세요.
하단 부분에 [+추가] 버튼을 이용하여 파일들을 업로드 하셔야 합니다.
* scripts폴더의 모든 파일을 올리셔도 되고 혹은 사용할 언어에 해당되는 파일만 올리셔도 됩니다.
(단, shCore.js파일은 필수 항목 입니다. ********** 별표~)
> 참고로 전 다 올렸습니돠~~ 귀찮아서요 ㅎㅎ
* styles폴더에서는 자신이 사용할 태마관련 파일을 올리시면 됩니다.
(단, shCore.css파일은 필수 항목입니다. ********** 별표~)
6. 티스토리에 올린 파일 기본 설정하기
[5]번 위치에서 [파일업로드]바로 옆인 [HTML/CSS]탭으로 이동합니다.
아래 이미지처러 등록을 하세요.
위 이미지를 보시면 붉은색 큰 라인이 넣어야 할 코드입니다.
위치는 </head> 위에 넣어주시면 되겠구요.
작은 붉은색 라인은 적용할 태마입니다. 위에서 업로드하신 파일 이름이 되겠지요 ^^ㅣ
아래는 복사하시라구 넣어 놨습니다. ^^ㅣ
<link rel="shortcut icon" href="https://live.noligo.co.kr/favicon.ico" />
<title>이프로 생활 정보 :: 'Code' 태그의 글 목록</title>
<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushDelphi.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"></link>
<link type="text/css" rel="stylesheet" href="./images/shCoreDjango.css"></link>
<script class="javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
이제 모든 준비는 끝났습니다.
실제 게시글에 적용하는 일만 남았네요 유후
7. 게시글에 highlighter 적용하기
글쓰기로 이동하셔서 아래와 같이 넣어보세요.
<PRE class=brush:php>
public aa()
{
string a = "test";
}
</PRE>
결과 :
public aa()
{
string a = "test";
}
짜잔 깔끔하게 처리되었네요.
긴 글 읽어 주시느라 고맙습니다.
다음에는 highlighter의 여러가지 속성 값에 대하여 한번 알아보도록하겠습니다.
이상입니다.