Tistory Syntax Highlighter 및 글꼴 변경

1. Tistory Syntax Highlighter

https://highlightjs.org/ 에서 Get version 9.13.1 (2018.12.24 기준)선택 후 다운받을 언어를 선택하고 다운로드 진행.

styles 에는 각종 css가 있는데 각각의 스킨의 미리보기는 위의 사이트에서 확인 가능.

원하는 css와 (예, vs.css), highlight.pack.js를 선택(A)

Tistory의 Admin 페이지 -> 스킨 편집 -> html 편집 -> 파일 업로드에서 (A)를 업로드

HTML의 헤더에 

<!-- LOOKA -->
<link rel="stylesheet" href="./images/vs.css"> <script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- LOOKA -->

추가

이후, 게시글 작성 시에 HTML 모드에서 <pre><code class="언어명"> ~~실제코드~~ </code></pre>를 통해 구문 강조 가능

2. 글꼴 변경

code 부분의 글꼴을 D2 Coding으로 변경하기 위해서 먼저, D2 coding을 다운받음(https://github.com/naver/d2codingfont)

ttc 파일을 1.의 파일 업로드를 통해 업로드함. (예, images/D2Coding-Ver1.3.2-20180524.ttc)

그리고 똑같이 1.의 html 편집의 css에서 다음과 같이 추가

@font-face {font-family:D2 coding; src:url(images/D2Coding-Ver1.3.2-20180524.ttc)};

그리고 난 뒤에 code 태그의 css 수정

code { border: 1px solid #eee;... ... display: inline-block; font-family: 'D2 coding'}

끝