개요
제가 수행하는 업무와 관심사로 인하여 제가 작성하는 대부분의 포스트는 소스코드가 삽입되어 있습니다. 때문에 이를 조금이라도 보기 좋게 표시 해줄 수 있도록 구문 강조기능을 적용해 주었습니다.
Prismjs는 구문강조(syntax highlighter) 기능을 사용할 수 있도록 해주는 JavaScript module입니다. 다음과 같이 차이가 발생합니다.
c언어 문법강조 미적용
#include <stdio.h>
int main(void) {
printf("hello world\n");
return 0;
}
c언어 문법강조 예시
#include <stdio.h>
int main(void) {
printf("hello world\n");
return 0;
}
티스토리 적용하기
스킨수정
티스토리의 스킨편집창을 열고, 다음의 <head> </head> 사이에 다음의 코드를 삽입합니다.
<!-- 코드 하이라이트-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" rel="stylesheet" />
아래의 코드는 <body> </body> 사이에 삽입합니다.
<!-- 코드 하이라이트-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.js"></script>
현재 cdn 으로 추가한 javascript파일은 css, javascript, markup, clike 4가지 언어에대한 문법만 강조해줍니다.
그 외의 문법을 강조하기 위해서는 추가로 다음의 javascript 를 추가해야 합니다.
링크 ← javascript cdn에 접속합니다.
원하는 언어를 검색합니다. 예를 들어 python 을 검색합니다. 경로를 복사한 후 앞서 붙였던 코드 하단에 아래와 같이 복사해 넣습니다.
<!-- 코드 하이라이트-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-python.min.js"> </script>
포스트작성
포스트 작성시 html 편집모드에서 코드항목을 편집합니다. 아래와 같이 <code> 태그에 class="language-javascript" 와 같이 프로그래밍 언어의 이름을 입력합니다.
▼ c 언어 구문강조 예시 html 코드
<pre><code class="language-clike">
#include <stdio.h>
int main(void) {
printf("hello world\n");
return 0;
}
</code></pre>
참고
prismjs 가 지원하는 전체 프로그래밍 언어 목록은 다음 링크를 참고합니다.
링크
'티스토리 > 스킨제작' 카테고리의 다른 글
| 티스토리 - 클립보드로 복사 버튼 추가하기 (0) | 2020.02.21 |
|---|---|
| 티스토리 스킨 제작기 - 카테고리 메뉴 변경 (0) | 2018.08.29 |
| 티스토리 스킨 제작기 - 기타 (0) | 2018.06.30 |
| 티스토리 스킨 제작기 - 본문 (0) | 2018.06.29 |
| 티스토리 스킨 제작기 - 사이드바 (0) | 2018.06.25 |
