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><!doctype html></p>
<p>...</p>
<p><!-- html태그 --></p>
<p><div class="center123"></p>
<p style="margin-left: 2em;"><span >망고땡</span></p>
<p></div></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 테마
