eedler

TISTORY에 소스코드를 넣어보자.

구글에서 검색을 해봤는데 사람들은 

Syntax Highlighter 를 사용하는 사람들이 대부분이었습니다. 그래서 필자도 해당 사이트로 날아갔으나,

세상에. Swift가 지원되지 않더군여.

저희 팀에서는 주로 MEAN을 위한 javascript 와 iOS App을 위한 swift 를 사용하고 있습니다.

그래서 swift 소스코드를 추가하는 기능이 필요한건데... 그래서 조금 더 찾아보니.

https://highlightjs.org/ 에서 제공을 해준다고 합니다.

Swift도 있고 CDN도 지원을 해주는 듯 싶었으나.... CDN 버젼에서는 Swift를 지원하지 않더군요.

그래서 어쩔 수 없이 다운로드해서 업로드 하는 방식으로 써야했습니다.

common에서 지원해주는 언어에 사용하시는 언어들이 들어있다면 단순히 cdn의 주소만 넣는 방식으로 쓰시면 편할듯합니다.

전체 순서는

1. 사이트에서 관련 파일 다운로드

2. 티스토리에 업로드

3. 코드 추가

1. 사이트로 이동 https://highlightjs.org/ Get version x.x.x 를 클릭합니다.

2. 아래처럼 cdnjs 주소도 보이는데여. 아래 common에 있는 언어만 사용하신다면 그냥 저 cdn 주소만 사용하셔도 됩니다.

아래는 기본적으로 제공해주는 언어의 목록입니다. cdn에서도 22개의 언어에 대해서 제공해주고 있으니,

이 안에 목록에 포함되실 경우 파일 다운로드 없이 위의 cdn주소만 추가해서 사용하셔도 됩니다.

전 Swift 가 필요했으므로, 아래쪽에 Custom에서 Swift 체크 후 다운로드 했습니다.

그러구나서 압축을 풀고. 티스토리 관리자 페이지로 갑니다.

아래 HTML/CSS 편집 메뉴를 클릭해줍니다.

파일업로드를 클릭해주시고, 아까 다운받은 파일에서 압축해제 했던 파일 중.

highlight.pack.js 파일과 style 폴더 안에 있는 원하는 스타일의 파일을 업로드 해줍니다.

전 스타일 고르기 귀찮아서 일단 다 업로드 했습니다.

이제 코드를 추가해줘야 합니다. HTML 버튼을 클릭해 줍니다.

아래 <link>와 <script> 태그들 사이에 아래 소스를 붙여줍니다.

물론 css 스타일은 default.css 가 아닌 원하는 스타일 파일로 작성해 주시면 됩니다.

개인적으로 default를 좋아해서 저흰 그냥 default ^^

<link rel="stylesheet" href="./images/default.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이렇게여.

설정할 부분은 끝이 났고, 이제 사용만 하시면 됩니다.

사용법은 글 작성시 글 작성란에서 HTML 체크박스를 체크해주시고,

작성법은

<pre><code class="swift">//소스 코드

NSLog("Hello World!")

</code></pre>

라고 작성하시면 됩니다.

그러면 결과가.

//소스 코드
NSLog("Hello World!")

이렇게 나옵니다.

 class에는 자신이 표현하고자 하는 언어를 넣어주시면 됩니다.

그러면 글 보기를 할 때 해당 언어에 맞게 이뿌게 표시됩니다.

감사합니다.