사용방법(아래애도 동일한 내용이 있습니다.)
html 편집을 활성화 하고 아래 pre 태그 부분을 복사해서 붙여넣기 한다음에 html 편집을 비활성화 한 후에 "코드입력" 부분에 원하는 코드를 붙여넣기 하면 됩니다.
<pre class='brush:html'>
코드입력
</pre>
사용방법. 끝.
안녕하세요.
코드를 블로그에 쉽게 공유하기 해서 이전에 Online syntax highlighter like TextMate 를 소개했었습니다.
이 프로그램은 설치가 필요없다는 장점이 있지만 코드를 공유할 때마다 테마를 다시 지정해 줘야하고 줄 번호가 없는 단점을 발견했습니다.
그래서 귀찮더라도 초반에 설정을 해주면 다음부터는 쉽게 사용이 가능한 SyntaxHighlighter를 사용하기로 했습니다.
제가 보고 따라한 출처는 다음과 같습니다.
출처1. 티스토리(tistory)에 SyntaxHighlighter를 적용하여 소스코드 글자색 변경하기(http://hijuworld.tistory.com/25)
출처2. 티스토리 SyntaxHighlighter 테마 적용 하기(http://hijuworld.tistory.com/26)
현재 4버전이 나와있지만 터미널로 빌드 하는 과정이 있어서 따라하기 어렵네요..
그래서 출처 블로그에 있는 3.0.83 버전을 설치하였습니다.
새 버전에 도전해 보실 분은 아래 링크를 클릭해서 해보시기 바랍니다.
https://github.com/syntaxhighlighter/syntaxhighlighter
1. 소스 다운로드 및 압축 풀기
- 아래 링크를 클릭해서 소스를 다운로드 받습니다.
syntaxhighlighter_3.0.83.zip
2. 스킨편집(티스토리 기준)
- 블로그 관리 페이지 왼쪽 메뉴에서 "꾸미기" - "스킨 편집" 메뉴로 들어갑니다.
- 왼쪽에 있는 HTML 편집 버튼을 클릭합니다.
- 파일 업로드 탭을 선택합니다.
- 압축을 푼 폴더에서 "scripts", "styles" 폴더에 있는 모든 파일을 업로드 합니다.
- html 탭을 선택합니다.
- 아래 코드를 head 태그 안쪽 아래 부분에 추가합니다.
(주의: head태그 빼고 붙여넣을 것)
<head>
...중략...
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeMidnight.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/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>
<script type="text/javascript">
SyntaxHighlighter.defaults["auto-links"] = false; // link removal
SyntaxHighlighter.defaults["toolbar"] = false; // toolbar removal
SyntaxHighlighter.defaults["tab-size"] = 2; // soft-tab : 2 spcaes
SyntaxHighlighter.all();
</script>
</head>
3. 사용해 보기
사용 방법은 html 편집을 활성화 하고 아래 pre 태그 부분을 복사해서 붙여넣기 한다음에 html 편집을 비활성화 한 후에 "코드입력" 부분에 원하는 코드를 붙여넣기 하면 됩니다.
참 쉽조?
<pre class='brush:html'>
코드입력
</pre>
사용하면 아래와 같은 결과가 나타납니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
</head>
<body>
</body>
</html>
적용 언어 및 테마에 대한 정보는 아래 링크를 클릭하면 확인할 수 있습니다.
https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Brushes-and-Themes
| 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 |
이제부터는 SyntaxHighlighter로 코드를 공유하겠습니다.
감사합니다.
