티스토리에 코딩 코드를 올리는 Synax Highlighter 적용법 및 사용법
티스토리 강좌를 운영하면서 이따금씩 html 혹은 CSS와 관련된 코딩을 올리곤 합니다. 그동안 사용해왔던 방법은 그냥 스크린샷해서 이미지로 올리는 방식을 사용했습니다. 가장 빠르고 확실한 방법이긴 하지만 가독성이 떨어집니다. 특히나 저해상도의 모바일에서는 이 방법은 치명적입니다. 이미지가 극도로 작아져서 코딩을 보이지 않거나, 티스토리 오류 발생 시 이미지가 깨지면 낭패를 겪게 됩니다.
그래서 이 방법을 알게 되었습니다. 코딩 그대로를 가독성을 높인채로 올릴 수 있으며, 이미지로 올리지 않기 때문에 검색엔진 노출에도 효율적입니다. 무엇보다도 깔끔해서 마음에 듭니다. Synax Highlighter 라고 하는 툴을 활용하시면 됩니다. 바로 사용할수는 없고, 티스토리에서 사용하시려면 초반 세팅이 필요합니다. 간단하게 설명 드리겠습니다.
지금은 티스토리 신형 글쓰기 에디터에서 해당 기능을 기본으로 제공합니다. 따라서 코딩과 관련된 글을 작성하실 때에는 신형 글쓰기로 작성하시면 됩니다.
Synax Highlighter 티스토리에 세팅하는 방법
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
여기에서 다운로드를 할 수 있는데 링크가 깨져있는 듯 합니다. 그래서 파일을 직접 올려놓도록 하겠습니다. 최신 릴리즈 버전이 지금은 v4로 올라간 듯 한데, 파일 구조가 완전 바뀐 것 같아서, 가장 많이 사용하는 3.0.83 버전으로 진행하도록 하겠습니다.
syntaxhighlighter_3.0.83.zip
파일을 다운로드 받으시고 압축을 푸시면 이런 파일들을 살펴볼 수 있습니다. 여기에서 필요한건 딱 이 두가지 폴더 입니다. script 와 styles 입니다. 스크립트 폴더에는 코딩 출력을 위한 자바스크립트 파일들이 들어있으며 스타일 폴더에는 테마와 코딩 출력을 위한 css 파일이 들어 있습니다.
두 폴더안의 파일들을 모두 꾸미기 > 스킨편집 > HTML편집 > 파일업로드 경로로 가셔서 자신의 티스토리에 업로드 해주시면 됩니다. 하지만 저는 꼭 필요한 파일만 올렸습니다. 불필요한 파일들은 용량만 차지하며 로딩속도를 저하시킬 수 있기 때문입니다.
shAutoloader.js / shCore.css / shCore.js / shCoreRDark.css / shregacy.js 를 제외한 나머지 파일들은 선택에 의해 업로드 할 수 있습니다. shBrushCss, shBrushJScript, shBrushXml 파일들만 올린 이유는 제가 코딩을 이 세가지만 다룰 것이기 때문입니다. HTML, CSS, JS 에 대한 코딩만 업로드할 계획이어서 굳이 다른 것들은 필요가 없습니다. 브러시 파일은 여러분들께서 파일만 올리시면 됩니다.
브러시 파일은 그냥 하나만으로도 사용이 가능한데, 사용 용도에 따라서 여러개를 쓰는 이유는 바로 가독성 입니다. 예를 들어서 제가 HTML 요소들의 마크업 상황을 Synax Highlighter를 사용해서 업로드 한다고 하면, css나 js 보다는 html 브러시를 써서 올리는게 더 가독성이 좋습니다. Synax Highlighter 에서는 각 요소에 따라 스타일을 다르게 해서 보여지게 만들 수 있기 때문입니다. html 태그들을 css 브러시로 표현하게 된다면 그냥 단일색으로만 출력이 되지만, html 브러시를 써서 표현하면 각 태그별로 컬러가 다르게 표시되어 훨씬 더 한눈에 쏙 들어옵니다. 이 차이 입니다.
<!-- Tistory SyntaxHighlighter Start -->
<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>
<!-- SyntaxHighlighter END -->
이 코드를 다 올리셔야 하지만, 전 어차피 사용할 파일이 적기 때문에 딱 필요한것만 마크업 했습니다. 제가 사용하는 코드는 아래에 있습니다.
<!-- syntaxhighlighter 코딩 출력 -->
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeRDark.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/shBrushCss.js"></script>
딱 이만큼 입니다. 브러시와 테마를 잘 봐주시기 바랍니다. 테마는 기본이 아닌 어두운 테마를 사용했습니다. 그래서 지금 위의 Synax Highlighter 전체 색상이 어둡게 보여지는 것 입니다. 위의 코드를 티스토리의 HTML 에서 <head> ~ </head> 태그 안쪽에 붙여두시면 됩니다.
보통 </head> 위에 넣어두시면 됩니다.
Synax Highlighter 사용 방법
세팅이 끝났다면 이제 티스토리에서 사용하는 방법에 대해서 알아보겠습니다. 세팅만 조금 복잡하지, 사용방법은 무척 쉽습니다. 아래의 코딩을 응용하시면 됩니다.
<pre class="brush:html">
<!-- 이곳에 코딩을 입력하세요 -->
</pre>
저기 노란색 주석 부분을 지우시고, 여러분들께서 입력하시고자 하는 코드를 붙여넣기 하신다음 전체를 복사합니다. 한마디로 <pre>와 </pre> 사이에 출력하고자 하는 코딩을 그대로 입력하시면 됩니다.
그리고 티스토리에서 글을 작성하실 때, 외부컨텐츠 기능을 활용해서 복사한 코드를 그대로 원하는 곳에 커서를 놓으시고 입력하시면 됩니다. 지금 여기에 있는 코딩들도 Synax Highlighter를 활용해서 입력한 것 입니다.
그리고 위에서 shBrush.js 파일에 대해서 간단하게 말씀 드렸는데 여기에서 추가로 설명을 드리겠습니다. 위의 태그 상태를 보시면 pre class="brush:html" 이라고 작성된 부분이 있습니다. 여기에서 사용하고자 하는 코딩의 성격에 따라서 변경해 주시면 됩니다. 만약 제가 CSS 코딩 상태를 마크업하고 싶다면, 빨간색 부분의 html을 css 로만 변경해서 사용하면 되는 것입니다. 자바스크립트의 경우는 js로 변경해서 사용하면 되는 것이구요. 간단합니다.
Synax Highlighter 티스토리에서의 문제는?
추가 설명을 한가지 더 하자면, Synax Highlighter가 이상하게 티스토리에서 사용되어질때 하나의 버그가 있는 것 같습니다. 원하는 위치에 외부컨텐츠를 사용해서 입력한다음, 계속해서 글을 이어나가려면 글씨가 위로 밀려올라가는 현상이 발생합니다.
이렇게 텍스트를 작성하면 <pre>와 </pre> 사이로 올라가버립니다. 이럴 경우, 티스토리 글쓰기 화면에서 오른쪽 상단에 있는 HTML에 체크를 하셔서 코드를 수동으로 수정하셔야 합니다.
이렇게 들어가서 문제의 텍스트를 아래로 내리고 다시 넣고자 하는 <pre>~</pre> 코드를 정상적으로 보여지게 해야 합니다. 햇갈리시면 아예 다시한번 여기에서 코드를 붙여넣기 해서 덮어씌워버리셔도 됩니다. 조금 번거롭지만 이렇게밖에 방법이 없네요. 제가 크롬 브라우저만 사용해서 다른 브라우저에서는 테스트를 해본것이 아니어서 잘 모르겠지만, 적어도 크롬에서는 이렇게 수동 방법을 사용하면 적용되긴 합니다. 끝.
"친절한효자손 취미생활" 을 검색!
