프로그래머 메로니
티스토리에 프리즘(Prism) 적용하기 본문
티스토리에 프리즘(Prism) 적용하기
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.
- 출처 : http://prismjs.com/
프리즘(Prism)은 CSS와 js를 이용하여 웹상에 표시되는 code들에 syntax highlight를 표시 해준다.
다른 여러 스크립트들을 사용해봤는데, Inline Code들이 다 맘에 안들게 표시되더라.
Inline Code가 뭐냐면 이 글들 사이에 들어있는 블록에 코드를 적는애들이다. 지금 이글에도 상당량의 인라인 코드 블록이 들어가 있다. 보통의 다른 개발자들 블로그에는 핑크색(빨간색?) 박스안에 빨간색으로 적혀있는 애들이 있던데 그건 어떤 스크립트랑 테마를 쓴건지 모르겠다.
- 장점
- 가볍다 .
- 여러가지 플러그인기능을 선택할 수 있다.
- 테마를 선택가능하다.
- 적용할 언어를 선택 가능하다.
- 줄번호 표시가능(플러그인 필요)
Mark Down과 같이 사용할때 편하다(필자는Mac Down으로 작성하는데 잘 호환된다.)
- 단점
Inline Code Block에도code class를 명시해줘야한다.- 티스토리에서
Mark Down문법 작성시inline code가 예쁘지 않다. - 맘에 드는 테마가 없으면 직접
CSS를 수정해줘야한다.
단점들 중 테마 문제를 제외하고는 몇가지 작업을 통해서 고칠 수 있다.
Prism 설치 및 적용
Prism 다운로드
- http://prismjs.com/ 에 접속한다. 우측 상단에 DOWNLOAD라고 써 있는 부분을 클릭한다.<
- Theme와 Syntax highlight를 적용 할 Languages들의 체크박스에 체크를 해준다.
- 적용할 Plugins를 선택해준다. 필자는 아래와 같이 선택하였다. 체크한 플러그인들의 설명을 곁들인다.
-
Line Highlight: 특정 라인에 Hightlight를 줄 수 있다. -
Line Numbers: 소스코드 왼쪽에 라인번호를 표시할 수 있다.<pre class="line-numbers">를 통해서 적용가능 ( 당연하지만 Inline Code는 못 쓴다.) -
Show Language: 소스코드의 언어를 표기한다. -
Highlight Keywords:Keyword들을 다른 색상으로 표시해서 가독성을 높여준다. -
Remove initial line feed: 소스코드의 시작부의 라인피드들을 제거해준다. -
copy to Clipboard button: Copy라고 써있는 버튼을 소스코드의 우측상단에 띄워준다. 이 버튼을 누르면 코드가 카피된다. 우클릭 방지를 쓰는 블로그에서도 소스코드를 배포하는데 사용가능하다. -
Toolbar:js파일을 수정해서 소스코드에 버튼을 추가하는 등의 기능을 하는데, 필자는 딱히 사용은 안한다. Default로 체크 되어있길래 그냥 체크해뒀다.
-
- 가장 하단의 소스코드 밑에 위치한 Download JS, Download CSS버튼을 클릭하여 다운로드 한다.
Prism 티스토리 적용하기
티스토리 관리 페이지 > HTML/CSS편집 페이지로 이동한다.- Download한
CSS,js파일을 티스토리에 업로드 한다. HTML로 이동해서<head></head>코드 사이에 다음과 같은 코드를 삽입한다.
<!-- 코드 하이라이트-->
<link href="./images/prism.css" rel="stylesheet" />
<script src="./images/prism.js"></script>- 일단은 적용 끝!
포스팅하기
- 소스코드를 입력할 때는
html모드로 진입한다. html 모드에서 코드를 모두 입력한뒤 앞뒤로<pre><code> ... source code ... </code></pre>를 삽입해준다.Line NumbersPlugin을 체크했으면pre를<pre class="line-numbers">로 고쳐준다.<code>에 사용하는 언어의 종류를 명시해준다.C-like로 작성한 예제이므로<code class="language-clike"를 입력해줬다.html 모드해제, 이 화면에서는 그냥 회색박스로 보이는게 정상이다.- 미리보기 클릭! 짜잔!
인라인 코드(Inline Code)에도 테마 적용하기
"왜 나는 미리보기를 해도 인라인 코드가 회색박스에 나오는거지?"
라는 문제에 직면했다면 이 부분을 읽어라.
Prism은 HTML5기준을 중시한다고 code의 클래스가 명시 되지 않으면 적용을 안해준다. 이게 어찌보면 맞는건데 인라인 코드를 마크다운으로 사용하다보면 매우 귀찮다. 티스토리의 HTML설정을 바꿔주면 쉽게 적용가능하다.
다시 관리페이지의 HTML/CSS 수정페이지로 이동하여 HTML에서 아래와 같은 부분을 찾은 뒤 수정하여 주자.
</head>
<body id="tt-body-page" >
<s_t3>
<div id="dkIndex">
<!--웹접근성용 바로가기 링크 모음-->
<a href="#dkBody">본문 바로가기</a>
</div>
<div id="dkWrap" class="wrap_skin"><body id="tt-body-page" >를 <body id="tt-body-page" class="language-none">로 수정해 주자. 이렇게 하면 본문에 있는 모든 인라인 코드들의 언어를 NONE으로 인식하여 테마에 맞는 색으로 표시하여 준다. 만약 한언어만을 중점적으로 다루는 블로그라면 class의 언어를 명시해줘서 keyword들도 하이라이트를 표시하여 줄 수 있다.
부록 : 마크다운에서 언어 명시해주는 방법
마크다운에서는 `(back quote)를 이용하여 코드를 표기한다. 이때 언어를 명시하는 법을 이용하여 마크다운으로 쓴 문서를 포스팅하면 바로 Prism의 Language class를 사용 할 수 있다. 아래와 같이 사용하면 된다. (back quote가 안써져서 그냥 '로 했다. )
'''Language(e.g. Python, Clike, HTML, etc.) '''
인라인 코드의 경우에는 back quote를 앞뒤로 하나씩만 붙여주면 앞에서 해준 설정때문에 잘 보일거다.