티스토리 블로그에 하이라이트 코드 적용하기

깃허브 블로그 포스트를 통해 잠시나마 알게된 내용이 있다면 _site 디렉토리 내의 파일 및 폴더들은 직접 수정하는것이 아니라는 점이다.

_post 디렉토리 내에서 YYYY-MM-DD-name-of-post 형식으로 파일을 생성하거나 복사 붙여넣기해서 추가하면, jekyll serve 후에 카테고리 등의 폴더들이 자동으로 _site 내에 반영이 된다.

처음에는 블로그가 생소하여 _site 내에서 수정한 내용이 블로그에 반영되는 방식인줄 알았는데, 간단하게 포스트 파일만 추가하거나 레이아웃을 변경하기만 하면 된다.

티스토리로 포스팅을 하려는데, 기본 모드와 HTML 모드 그리고 마크다운 방식으로 글을 작성할 수 있다는 부분이 상당히 만족스러웠다.

깃허브 블로그에서 마크다운으로 적용한 페이지에 적응이 되었다고나 할까, 여러모로 마크다운이 편하게 느껴진다. 하지만 깃허브 블로그에서 티스토리로 옮겼을 때, 조금은 다른 마크다운 문법을 보게 되었다.


{% highlight javascript %}

...code

{% endhighlight %}

이렇게 코드를 삽입하게 되면 하이라이트 문법이 적용되는데, 티스토리에서 작성할 때에는 조금 달랐다.
아마 jekyll 블로그를 설치할 때, 적용되는 하이라이트 마크다운 부분인듯 하다.

우선 티스토리에 하이라이트 코드를 적용하기 위해, 블로그 관리자 페이지로 이동한 후

그 후, 해당 소스를 <head> 태그 하단에 붙여넣기 하고

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

아래 소스도 함께 넣어주는데, highlight 홈페이지에서 적용하고 싶은 코드 스타일을 확인하고 아래의 default 의 값을 변경하여 저장한다.
(디폴트로 저장해도 무방하다)

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">

마지막으로 마크다운으로 작성시 코드를 적용하기 위해,

```html

...some html code

```

혹은, <pre><code> 태그를 활용하여 소스를 넣어주고 미리보기하여 반영된 글을 확인해볼 수 있다^^

<pre><code class="javascript">

...some javascript code

</code></pre>

우분투 Jekyll 설치 및 github 블로그 테마 적용하기 (0)	2019.10.11

흘러가는 시간