티스토리 뷰

개요

개발 관련 포스팅을 하다 보면 작성하는 소스코드가 보기좋게 표출되어 읽는 사람들이 편하게 볼 수 있으면 좋겠다라는 생각을 많이 했습니다. 잠시 운영하던 워드프레스는 관련 플러그인이 있어서 쉽게 할 수 있지만, 티스토리는 지원하지 않아서 여러가지 방법을 적용해야 합니다.
syntaxhighlighter를 사용해서 하는 방법이 있긴 한데 파일도 업로드 해야되고 무거워보이고, Highlight.js는 자주 쓰는 JSX 지원이 부실하고...
그래서 PRISM.js를 활용해서 적용하는 방법을 알아보도록 하겠습니다.

설치

CDN에서 파일 찾기

요즘은 CDN(Content delivery network) 서비스가 많아서 구태어 직접 파일을 업로드할 필요는 없습니다.

다음은 기본으로 선택을 하고, 원하시는 언어를 추가로 선택하시면 됩니다.

  • https://cdn.jsdelivr.net/prism/x.x.x/prism.js

더 내리시다 보면 플러그인 부분도 있습니다. 원하시는 플러그인을 선택하시면 됩니다.

저는 줄번호 표시 플러그인 line-numbers와 커맨드라인 표시 플러그인 command-line을 선택하였습니다.

마지막으로 관련 테마와 플러그인의 css를 선택하시면 됩니다. 저는 coy 테마를 사용하였습니다. 플러그인의 경우에는 css가 있을 수 도 있고 없을 수 도 있기때문에 자신이 선택한 플러그인에 맞게 고르시면 됩니다.

그런 다음 위의 빨간 박스로 표시한 "x IN COLLECTION"버튼을 클릭하면 팝업이 오픈됩니다.


오픈된 팝업에서 "Add the <script> tag"를 클릭한 뒤 결과에서 COPY 버튼을 클릭하여 복사합니다.

HTML/CSS 편집

복사된 내용을 추가하기 위해 티스토리 블로그 관리자에서 "HTML/CSS 편집" 메뉴로 들어갑니다.
내용중 HEAD 부분에 복사한 내용(script, link)를 붙입니다.

모바일웹 사용해지

모바일웹의 경우에는 기존 스킨이 적용되지 않기 때문에 화면이 깨져보입니다. 대부분의 스킨이 모바일 지원하므로 모바일웹은 OFF로 변경하시면 됩니다.



사용법

Tistory 글쓰기 Editor에서 HTML을 체크하시고 다음과 같이 입력하시면 됩니다.
...
<pre><code class="language-[사용하고자 하는 언어]">[소스코드]</pre></code>
...

원하시는 언어는 http://prismjs.com/#languages-list여기를 참고하시면 됩니다.

Command-line 사용법

서버 관련 포스팅 할 때는 쉘관련 내용을 많이 작성하는데 그때 유용한 부분이 Command-line 플러그인 입니다.
기본 소스코드와 입력할 때 동일하게 하시되, 언어는 "bash"로 하시고, pre 태그에 command-line 클래스를 추가한 뒤 data-userdata-host를 추가하시면 됩니다.
예로, user라는 계정에 oofbird.net 이라는 호스트 관련 쉘을 표시할 경우 다음과 같이 입력하시면 됩니다.

<pre class="command-line" data-user="user" data-host="oofbird.net"><code class="language-base">command</pre></code>

그러면 결과는 다음과 같이 나오게 됩니다.

command



댓글
댓글쓰기 폼