티스토리의 새로운 에디터의 "코드블록" 이라는 기능을 이용해서 코드를 넣었는데,
편집창과 보여지는 창이 다르게 나오는 것을 보고, 코드 하이라이트를 보여주는 highlight.js 는 사용자가 적용해함을 알게 되었다. (티스토리 가이드: 코드블럭으로 소스코드 작성하기)
음 Github의 https://github.com/highlightjs/highlight.js 다운로드 받고 하는 방식이 있긴하나.
모든게 귀찮아서, CDN방식으로 하는 걸 선택했습니다.
티스토리의 "Admin > 꾸미기 > 스팀편집"에서 "html편집" 선택해서,
</head>위에 아래 코드를 넣어주면 됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
[Styles 바꾸기]
안드로이드 스킨 넣기 (demo사이트에 Styles에서 미리보기:https://highlightjs.org/static/demo/ )
스타일시트 영역에 default를 androidstudio로 변경하면 쉽게 변경이 됩니다.
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/styles/androidstudio.min.css">
[참고 사이트]
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 24 commonly used languages is hosted by following CDNs: cdnjs jsdelivr You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlight.js
highlightjs.org
https://www.jbfactory.net/10351
티스토리 강좌 | highlight.js로 코드 하이라이트 구현하기
새 에디터에서 코드하이라이트를 구현하는 방법은 여기에 있습니다. highlight.js highlight.js는 스크립트 파일 하나와 CSS 파일 하나, 두 개의 파일만으로 코드 하이라이트를 구현할 수 있습니다. 많은 언어와 다양한 스타일을 제공하고, 자동으로 언어를 감지하는 기능도 갖추고 있습니다. 162 languages and 74 styles automatic language detection multi-language code highlighti
www.jbfactory.net
(로그인하지 않으셔도 가능)