Prism 사용하기 (Syntax Highlighter)

Prism(프리즘)은 Syntax Highlighter(구문 하이라이터) 입니다. 웹페이지에 소스코드(Source Code)를 올릴 때 언어에 맞춰서 색깔을 입혀주는 기능을 합니다. 공식 홈페이지는 prismjs.com입니다. Prism외에도 highlight.js, Rainbow 등이 있습니다.

HTML 문서에 소스코드 넣는법

HTML 문서에 소스코드를 넣을 때는 <pre><code></code></pre>태그로 코드를 감싸줘야 합니다. 다른 문장 안에 들어가는 짧은 코드는 <code></code>로 감싸주면 됩니다.

HTML 언어에서 <와 >는 태그(Tag)로, &는 Entity의 시작문자로 인식합니다. 그렇기 때문에 코드를 넣기 전에 <는 &lt;로, >는 &gt;로, &는 &amp;로 각각 바꿔줘야 합니다. (직접 바꾸는거 보다 툴을 사용하면 편한데 'html escape tool' 정도로 구글링 해보면 많이 나옵니다.)

Prism을 사용하려면 <code>태그 안에 language-xxx class를 넣어서 언어를 지정해줘야 합니다. 예를 들어 HTML은 language-html, Python은 language-python입니다. 짧게 lang-py 이렇게도 가능합니다. 하이라이팅을 안할 때는 lang-none이라고 하면 됩니다.

Prism 사용하기

CDN을 기준으로 사용법을 설명하겠습니다. (링크는 이곳에서 하면 됩니다.) Prism은 CSS와 Javascript파일로 이루어져 있습니다. 여러개의 플러그인이 있으며, 선택하는 기능에 따라 적절하게 링크를 해줘야 합니다. Autoloader 플러그인을 사용하면 언어마다 따로 링크를 하지 않아도 되기 때문에 편리합니다. 다음은 Autoloader를 사용하는 간단한 Prism 예제코드입니다. (Python 소스코드 삽입) 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
</head>
<body>

<pre><code class='lang-py'>a = 3
b = 4
if 0 &lt;= (a + b) &lt;= 10:
  print("이것은 예제다...")</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

기본테마(CSS) 파일과 기본Javascript 파일, Autoloader 플러그인 파일까지 3개의 참조 링크를 걸었습니다. 삽입한 Python 코드에 스타일이 입혀질 것입니다. 스타일을 바꾸고 싶으면 기본테마 파일 대신에 다른 테마를 링크하면 됩니다.

제 블로그에서 사용하는 Copy to Clipboard Button 플러그인을 추가하는 방법까지만 예를 들겠습니다. Copy 플러그인은 좀 추가할 링크가 많습니다. Toolbar CSS 와 Javascript 그리고 Copy Javascript 파일까지 3개를 더 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>
</head>
<body>

<pre><code class='lang-py'>a = 3
b = 4
if 0 &lt;= (a + b) &lt;= 10:
  print("이것은 예제다...")</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'></script>
</body>
</html>

이렇게 하면 코드위에 마우스를 올렸을 때 Copy 버튼이 활성화되고, 버튼을 누르면 코드가 클립보드에 복사됩니다.

(※ 자세한 사용법은 Prism 홈페이지를 참고하세요~)

Blogger Twitter Facebook