티스토리 SyntaxHighlighter 적용해서 소스코드 예쁘게 넣기

노가다 설치라니..

생각없이 쓰려고 서비스형 블로그로 시작했는데... 그냥 하면 되는게 아니네?

원클릭 설치가 될줄 알고 시작한건데... 시작했으니 그냥 가는 수 밖에..

티스토리는 리소스 관리 및 템플릿 커스터마이징 기능을 지원 해 준다.

html js가 어떻게 돌아가는지 알아야되는데... 소스코드 포매터를 쓰는 사람이면 문제 없지 않을까

준비

문법강조툴

http://alexgorbatchev.com/SyntaxHighlighter/

또는 다른거...

cdn

https://cdnjs.com/

https://code.jquery.com/

또는 다른데...

ms, google, .. 등등 cdn 운영하는 회사들 많다.

SyntaxHighlighter 설치

업로드 해도 되지만 귀찮으니까 CDN을 이용하도록 한다.

CDN : 콘텐츠 관리 서버. 한번 다운로드 받으면 브라우저에 캐싱이 되서 다시 다운받지 않는다.

다른 사이트에서 cdnjs를 사용해서 서비스를 했다면.. 여기서 또 사용하는경우 또 다운을 안받는다.

용량도 작고 인터넷도 빨라서 크게 상관은 없지만...

그리고 tistory에 파일 업로드를 해도 티스토리에서 제대로 해 놨다면...301 response 매번 받지는 않는다.

이 블로그에서 설정한 값을 다 올린다.

꾸미기 > 스킨편집 > html 편집

소스코드를 <pre></pre> 태그로 감싸서 올리면 되는데

편집창에서 html 보기 한 다음에 올려야 한다.

<pre class="brush: html"></pre>

<pre class="brush: java"></pre>

<pre class="brush: cpp"></pre>

<pre class="brush: python"></pre>

기타 등등... 찾아보면 다양하게 지원한다.

위의 shBrushXXX.min.js 파일이 있어야 해당 언어 지원이 되니까 필요하다면 아래에서 찾아서 추가 해 준다.

https://cdnjs.com/libraries/SyntaxHighlighter

JS를 다이내믹하게 로딩하다보니 블로그 로딩이 조금은 느려진다.

티스토리는 외부에서 완전히 편집을 해서 순수 HTML로 올리는게 낫지 않을까 고민이 되는군.