프리즘 : 코드 하이라이터, 신택스 하이라이터, Syntax Highlighter

꽤 오랫동안 신택스 하이라이터로 Crayon Syntax Highlighter를 사용하고 있었다. 가장 오랫동안 만족하며 쓰던 하이라이터이다.
하지만 이제 갈아 타려고 한다.

프리즘은 개발 사이트에서 직접 코드를 받아서 적용할 수 있다.
JS, CSS 파일 2개만 페이지에 적용시키면 간단하게 사용할 수 있다.

기본 적용법

다운로드 : 프리즘 다운로드 페이지에서 코드(JS, CSS) 파일을 다운로드 받는다.

기본 다운로드외에 본인이 원하는 테마와 코드 언어, 플러그인을 선택해서 추가할 수 있다.
프리즘 다운로드 페이지

파일 업로드 : JS, CSS 파일을 사용할 페이지에 적용시킨다.

<!DOCTYPE html>

<html>

<head>

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

 </head>

 <body>

     <script src="prism.js"></script>

 </body>

 </html>

기본 문법

기본적으로 <pre>, <code>를 사용하여 적용한다.
class=”language-xxx” 형식으로 코드의 언어를 정의할 수 있다.
코드 형식을 모르거나, 기본 형식으로 지정할 때는 language-markup을 사용하면 되는 것 같다.

형식 지정없이 pre > code 로만 사용하거나, code.language-* 식으로도 사용할 수 있다.

<pre><code class="language-css">p { color: red}</code></pre>

더 다양한 예제는 여기서 볼 수 있다.

추가 플러그인 (선택)

프리즘 다운로드시 아래 플러그인을 선택한 경우에만 적용할 수 있다.
기존에 선택하지 않았던 기능을 추가하려면, 프리즘 파일을 새로 다운로드 받아야 한다. 그 때 원하는 기능을 선택하여 다운로드 받으면 된다.
그런데…. 이상하게 아래 플러그인이 작동을 안하고있다. 일단 넣어놓고 원인을 찾아봐야겠다.

라인 하이라이터

<pre><code class="language-css" data-line="2, 4-5, 7">

    <p>긴 코드</p>

    <p>이 줄을 강조해 주세요</p>

    <p>긴긴긴 코드</p>

    <p>이 줄을 강조해 주세요</p>

    <p>이 줄을 강조해 주세요</p>

    <p>긴긴긴긴긴긴 코드</p>

    <p>이 줄을 강조해 주세요</p>

    <p>긴긴긴긴긴긴 코드</p>

</code></pre>

줄 번호 표시

<pre><code class="language-css" data-start="0">

    <p>data-start를 사용한다.</p>

    <p>값에는 음수도 사용할 수 있다.</p>

</code></pre>

수정한 부분

폰트 적용함. 한글 부분에 나눔 고딕 코딩이 들어가도록 함

code, kbd, pre, samp,
code[class="language-"],  
pre[class="language-"],
code[class*="language-"] *, 
pre[class*="language-"] *{
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Nanum Gothic Coding', Menlo, monospace ;
}

code를 단독으로 쓸 때 padding 조절함.

:not(pre) > code[class*="language-"] {
     padding: .1em .3em;
     border-radius: .3em;
     white-space: normal;
 }

최신 댓글

최신 댓글