티스토리 공지에서는 코드 삽입을 위해서 에디터의 코드블럭 기능을 사용하라고 한다.
하지만 코드블럭을 사용할 경우 처럼 html 코드가 더러워져서 그냥 직접 html을 수정해서 코드를 넣기로 했다.
다양한 Syntax highlighter 중에서 Prism을 사용한 이유는 여러 가지가 있다.
- 용량이 굉장히 작다.
- class를 상속받기 때문에 body에 class를 지정하는 식으로 기본 언어를 지정할 수 있다.
- 지원하는 언어가 많아서 티스토리 코드블럭에서 지원하지 않는 언어들도 사용할 수 있다.
- 정규 표현식만 안다면 새로운 언어를 만들거나, 기존 언어를 수정할 수도 있다.
- 플러그인을 통해 다양한 기능들을 지원한다.
Prism을 적용하는 한가지 방법은 다운로드 페이지에서 직접 Prism을 다운로드 받는 방법이 있다.
하지만 다운로드 방식은 Prism이 업데이트 되거나 다른 플러그인을 받고 싶을 때마다 새로 다운로드해야 한다는 문제점이 있다.
그래서 CDN을 사용해서 Prism을 적용하기로 했다.
jsDelivr CDN에서 필요한 파일들을 받자.
- 제일 중요한 prism은 당연히 받아야 한다. 맨 위에 prism.min.js를 선택한다.
- themes 폴더에서 원하는 테마를 받는다. 이 블로그에서는 Tomorrow Night 테마를 사용했다. 테스트 페이지에서 테마와 언어를 선택해 어떻게 생겼는지 볼 수 있다. 원하는 테마 하나를 선택한다.
- plugins 폴더에서 원하는 플러그인들을 받는다. 유용한 플러그인들이 많으니 설명을 읽어보고 필요한 플러그인을 받자. 일부 플러그인들은 코드블럭을 만들 때 특정 class를 추가하는 등의 다른 작업이 필요한 경우가 있으므로 설명을 잘 읽어보자. 되도록이면 Autoloader 플러그인은 받는것이 좋다. 원래는 사용할 언어들을 일일히 받아야 하지만, Autoloader 플러그인이 있다면 필요한 언어들을 알아서 받아온다.
- 마지막으로 components 폴더에서 원하는 언어들을 받는다. Autoloader 플러그인이 없다면 여기에서 선택한 언어들만 사용할 수 있으며, Autoloader 플러그인이 있더라도 자주 사용하는 언어들은 직접 받아두는 것이 더 빠를 수 있다.
필요한 파일들을 전부 선택했다면 아래 주황색 SHOW & CONFIGURE ALL LINKS 버튼을 누른 다음 위 사진대로 왼쪽 3개를 체크한다. 이후 COPY ALL을 누른다음 티스토리에서 관리 - 꾸미기 - 스킨 편집으로 들어간 후 html 편집을 누르고 코드를 <head></head> 사이 아무 곳에나 끼워넣는다.
성공했다면 html 코드에서 <code class="language-html"></code>로 inline 코드블럭을 넣을 수 있고, <pre class="language-html"><code></code></pre>로 코드블럭을 넣을 수 있다. 지금까지 나온 글 중간에 나오는 코드들이 inline 코드블럭이고, 코드블럭은 아래처럼 생겼다.
<!-- Prism start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
<!-- Prism end -->
<!-- Prism languages start -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-clike.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-cpp.min.js"></script>
<script src="./images/text.js"></script>
<!-- Prism languages end -->
<!-- Prism plugins start -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/toolbar/prism-toolbar.min.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!-- Prism plugins end -->
<!-- Prism plugins settings start -->
<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
'spaces-to-tabs': 4
});
</script>
<!-- Prism plugins settings end -->이때 language-html을 HTML 코드를 작성할 때 쓰는 class고, 다른 언어를 사용할 때는 다른 class를 써야 한다. 사용가능한 언어 목록을 확인하고 맞는 class를 사용하자. 사용가능한 언어 목록에 없는 경우 직접 언어를 만들 수 있다.
Prism.languages.text={string:/\\\S/}를 text.js로 저장한 후 티스토리에서 관리 - 꾸미기 - 스킨 편집으로 들어간 후 html 편집을 누르고 파일업로드로 text.js를 업로드한다. 그러면 images 폴더에 업로드돼서 images/text.js로 보일텐데 위 코드처럼 <script src="./images/text.js"></script>로 언어를 추가하면 된다. 이제 language-text라는 새로운 언어가 추가됐고, 이 언어를 사용하면 정규표현식 /\\\S/에 맞는 부분이 string으로 하이라이트된다. (string이 정확히 어떤 색인지는 각 테마의 css 파일을 확인해봐야 한다.) 일반적인 정규표현식보다 더 다양한 기능이 있으니 공식 홈페이지를 참고하자.
'블로그 시작하기' 카테고리의 다른 글
| MathJax 3으로 LaTeX 지원하기 (0) | 2021.01.21 |
|---|