PrismJS 티스토리 블로그에 적용하기

1. http://prismjs.com/download.html 에 접속합니다.

2. Languages에서 블로그에 출력할 프로그래밍언어를 선택합니다.

3. Plugins 에 

   Line Highlight ,

   Highlight ,

   Line Numbers , 

   Previewer Base ,

   Previewer Color ,

   Show Language 

   옵션들을 선택해줍니다. 

3. 맨 아래 DOWNLOAD JS, DOWNLOAD CSS 클릭으로 

    prism.css , prism.js 를 다운로드 합니다.

4. 블로그상에서 아래 빨간부분들을 순서대로 클릭합니다. 

5. 3번에서 다운로드 했던 prism.css, prism.js 파일을 업로드 해줍니다.

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

6. 위 코드를 </head> 안에 추가 해줍니다.

7. 티스토리 글쓰기 에디터에서 HTML 모드로 들어간 후 아래 테스트 코드를 입력합니다.

//▼▼▼▼▼▼▼▼▼▼ 복사할 테스트 코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

<pre class="line-numbers"><code class="language-markup">

<p>&lt;!doctype html&gt;</p>

<p>...</p>

<p>&lt;!-- html태그 --&gt;</p>

<p>&lt;div class="center123"&gt;</p>

<p style="margin-left: 2em;">&lt;span &gt;망고땡&lt;/span&gt;</p>

<p>&lt;/div&gt;</p>

</code></pre>

  <pre class="line-numbers"><code class="language-css">

/* css */

#c1{ background-color:black}

#block{diaplay:block;background-color:#ff2343}

</code></pre>

<pre class="line-numbers"><code class="language-java">

public static void main(String[] args) throws Exception{

//java 코드

System.out.println("망고땡블로그");

}

</code></pre>

<pre class="line-numbers"><code class="language-csharp">

using System;

using 토니스타크.자비스;

namespace 인공지능

{

public partial class 알파고 : 자비스

{

//C# 코드

public 바둑좌표 get최적의수(int[][] 현재바둑판상황)

{

return CPU1202개_GPU176개로_검색(현재바둑판상황);

}

}

}

</code></pre>

//▲▲▲▲▲▲▲▲▲  복사할 테스트 코드 ▲▲▲▲▲▲▲▲▲▲▲▲▲

다운로드 받을때 선택한 테마(Themes) 에 따라 아래와 같은 스타일이 적용됩니다.

COY 테마

DARK 테마

DEFAULT 테마

FUNKY 테마

OKAIDIA 테마

SOLARIZED 테마

TWILIGHT 테마