소스 코드 구문 강조 (코드 하이라이터)

그동안 미뤄왔던 소스 코드 하이라이터 플러그인 마음에 드는 것을 찾아보았습니다.
가볍고 사용하기 편리하고 보기에도 좋은 것을 찾아본 결과 prismjs라는 것을 알게 되어 정리하고자 합니다.

다운로드 링크 http://prismjs.com/download.html

사이트에서 7가지의 테마별 샘플을 확인할 수 있고, 또 다양한 플러그인을 추가하여 사용할 수 있습니다.

자세한 사용 방법은 홈페이지에서 확인 가능하지만 간단히 사용 방법을 정리해보겠습니다.

사용 예제

<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>

<pre class="language-none line-numbers">
<code>&lt;div&gt;This raw text&lt;/div&gt;
is not highlighted
but it still has
lines numbers</code>
</pre>

위 예제는 Line Numbers 플러그인의 사용으로 <pre>에 클래스명 line-numbers를 추가했습니다.

• 부등호 <, > 사용시 엔티티코드를 사용해야 합니다. <, >
• 자동줄바꿈이 필요하면 <pre>에 CSSwhite-space:pre-wrap을 추가합니다.

이 블로그에 사용된 prismjs의 사용자 정의

• Themes : Default
• Languages :
  - Markup
  - CSS
  - C-like
  - JavaScript
  - ASP.NET(C#)
  - Java
  - Less
  - PHP
  - Sass
  - SQL