Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

Trikang

[티스토리 꾸미기] 블로그에 코드블록 적용하기 본문

개발 Tip/Web

[티스토리 꾸미기] 블로그에 코드블록 적용하기

Trikang 2018. 7. 3. 16:29

처음에 티스토리 사용을 망설였던 이유 중 하나는, 코드블록을 지원하지 않는다는 얘기를 들었기 때문이었다. 그러나 방법이 없는 것은 아니었다. 조금 귀찮긴 하지만...


Prism 등의 다른 서비스도 있었지만, 적용하기 간편한 것으로 code prettify 선택.


적용법

적용을 하기 위해 블로그 관리 페이지에서 '스킨 편집'에 들어간다. 그 후 우측 화면에서 html 편집 선택(빨간 박스)



그 후에 head 태그 사이에 아래 코드 삽입

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

예시 화면


그리고 여기에 쓸 수 있는 여러가지 테마와 추가 언어가 있다. 테마는 https://rawgit.com/google/code-prettify/master/styles/index.html에서 볼 수 있고, 언어는 https://github.com/google/code-prettify/blob/master/docs/getting_started.md참고.


테마나 언어 적용을 위해서는 url로 파라미터 전달하듯 위 링크(https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js) 제일 뒤에 ?를 붙인 후 skin=(테마 명) 같이 써붙이면 된다.


위의 이미지에도 알 수 있듯, 내 블로그에는 skin=desert가 적용되어 있다.


그럼 적용은 끝났다.


사용법

사용을 위해서는 적용을 원하는 게시물의 html 편집을 해야한다. 

우측 상단의 html 버튼을 눌린 후

<pre class="prettyprint"> 여기에 원하는 코드 삽입 </pre>

위의 코드를 삽입하고, pre 태그 사이에 원하는 내용을 적기만 하면 끝.


line numbering 하는 법등을 참고하여 조금 더 많은 기능을 사용할 수 있다.

Comments