적용 결과
# python code block
import pandas as pd
df = pd.DataFrame({'col':[1,2,3,4]})# R code block
library(dplyr)
a <- c(1,2,3,4)prism.js 파일을 직접 다운로드 받아서 사용하는 방법도 있지만 업로드 파일을 관리해야하는 번거로움이 있다.
그래서 링크 삽입으로 prism.js를 적용할 수 있는 CDN(Content Delivery Network) 방식을 사용
https://www.jsdelivr.com/package/npm/prismjs
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
이 페이지에서 선택해야할 부분은 크게 themes, plugins, components로 나누어진다.
먼저 themes에서는 코드블럭에 적용할 테마를 선택한다.
다음은 플러그인을 선택
플러그인은 line-numbers 정도를 선택해주면 되고, 취향에 따라 커스터마이징 해주면 된다.
플러그이네서 파일을 선택할 때는 .css, .min.js 파일을 선택하면 된다. min.js 파일은 js 파일에서 공백이나 줄바꿈을 제거하여 용량을 줄인 파일이라고 한다.
이제 컴포넌트에서 prism.js를 적용시킬 프로그래밍 언어를 선택하면 된다.
선택이 다 끝났으면 SHOW & CONFIGURE ALL LINKS 버튼을 눌러서 다음 화면으로 이동한다.
아래 그림에 보이는 것처럼 3개의 체크박스를 선택한 후, JavaScript와 CSS 링크를 COPY ALL 버튼으로 복사하여 티스토리 스킨 편집 창 html에 넣기만 하면 된다.
스킨편집 HTML에서 <head>와 </head> 사이에 넣어주고 적용 버튼을 누르면 끝.
prism.js는 티스토리 기본 코드블록에서는 적용되지 않는 것 같다. 편집기 HTML 모드에서 몇가지를 수정해 주어야 정상적으로 적용이 된다.
<pre class="python" data-ke-language="python" data-ke-type="codeblock"><code># 티스토리 기본 코드블록</code></pre>python 코드에 대해 테마를 적용하고 줄번호를 표시하기 위해서는 class 태그를 아래와 같이 수정해 주어야 한다.
<pre class="line-numbers language-python"><code># python code block
import pandas as pd
df = pd.DataFrame({'col':[1,2,3,4]})</code></pre>
r에 적용하고 싶으면 language-r, html에 적용하고 싶으면 language-html 이런식으로 language-언어 형태로 값을 넣어주면 된다.