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

카테고리 : 소개/기타

 

 

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

 

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

티스토리 적용하는데 간편하게 가능하도록! 간편하게 적용가능한 소스를 추가했다. 변경한 소스는 CDN서버(CDN서버 란?)에 올려놓아서 쉽게 사용할수 있습니다. 아래소스를 그대로 쓰면 CDN서..

hi098123.tistory.com

 

1. 기본코드블럭

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

 

에이 이게 뭐야!!

 

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

라고 할수 있다 ㅋㅋ

 

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

 

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

 

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

 

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

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

 

highlightjs/highlight.js

Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.

github.com

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

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글 (0개)