블로그에 코드블럭 적용하기

 

 

2019/06/20 디자인이 맘에 안들어 다른 코드블럭이용 (prism)

Prism.JS 티스토리에 쉽게 적용하기

 

1. 기본코드블럭

에디터에서 코드블럭만 쓴다면

 

에이 이게 뭐야!!

 

코드블럭 디자인이 적용 안되잖아!!

라고 할수 있다 ㅋㅋ

 

디자인을 위해선 코드블럭 플러그인을 사용하고, 디자인을 선택해줘야 된다.

 

티스토리 코드블럭 플러그인

 

플러그인 적용을 통해 기본 편집기(뉴 에디터) 의 코드블럭을 꾸밀수 있다.

 

티스토리 편집기의 코드블럭은 아래의 소스를 사용하고 클라우드 플레어 cdn에서 소스를 불러온다.

https://github.com/highlightjs/highlight.js

highlightjs/highlight.js

highlight.js 를 이용한것으로 깃헙에 들어가서 소스를 수정하거나

원하는대로 사용할 수도 있다.

 

https://highlightjs.org/static/demo/ 디자인 확인해보기

 

티스토리 기본은 조금 부족한느낌이 있다.

 

저 같은 경우 디자인이 다 마음에 안들어서..

그 중 나은것의 소스를 조금 수정하여 사용하고있습니다..

필요한 언어도 추가했고요

 

2. 구글 code-prettify

원래는 이걸 썻으나 기본 에디터에서 편집하는게 편해서

html 편집하다가 기본모드를 오면 편집한 소스가 날라가서

걍 1. 티스토리 지원 코드블럭을 쓰기로 결정했다..

 

먼저 스크립트에

 

 

 

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css"></script>

를 작성하고

 

<pre class="prettyprint"></pre>

 

<pre> 태그 사이에 코드를 작성하면된다.

 

내가 만들긴 귀찮고

다른 코드블럭도 적용해봤는데 적용할 부분이 많고 해서 찾다가

구글 code prettifier이 나왔는데 스크립트도 한줄, pre태그도 간단해서 바로 적용 해봤다.

 

jsdelivr cdn 에서 불러오는 방식으로 웹호스팅된 페이지에서도 트래픽 걱정없이 쓸수있을것이다.

 

오픈소스입니다 https://github.com/google/code-prettify