티스토리 소스코드 꾸미기 - highlight.js
먼저 https://highlightjs.org/링크로 들어가줍니다.
highlight.js
Version 9.15.7 New languages: none. New styles: none. Improvements: - fix(powershell): Add cmdlets (#2022) - fix(Bash): escaped double quotes (#2041) - fix(c++): add aliases 'hh', 'hxx', 'cxx' (#2017) - fix(ini/toml): Support comments on the same line. (#2
highlightjs.org
아래와 같이 창이 뜨게 되면 Get Version 버튼을 눌러줍니다.
화면을 아래로 내리면 Custom package가 있습니다. 이제 여기서 원하는 언어를 선택할 수 있습니다.
원하는 언어를 체크 후 아래의 Download를 눌러줍니다.
다운받은 파일을 다운받아 압축을 풀어보면 아래와 같이 구성되어 있습니다.
이 중 styles 폴더 안에 있는 css 파일 하나와 highlight.pack.js 파일을 업로드 해야합니다.
원하는 css 파일을 선택하는 방법은 https://highlightjs.org/static/demo/에서 확인할 수 있습니다.
highlight.js demo
highlightjs.org
왼쪽 배너의 Styles에 이름을 클릭하면 언어별로 적용되는 것을 확인할 수 있습니다.
이제 스타일을 선택했다면 블로그 관리 > 스킨편집에 들어와 우측의 html 편집 버튼을 눌러줍니다.
그 후 HTML / CSS / 파일 업로드 탭에서 파일업로드를 선택 후 하단의 추가 버튼을 눌러 highlight.pack.js와 css 파일을 추가해 줍니다.
추가가 되었다면 HTML 탭을 눌러 <head>와 </head> 사이에 아래의 코드를 넣어줍니다. 이제 여기서 .css 앞에는 본인이 선택한 css 파일의 이름을 넣어줘야합니다.
<link rel="stylesheet" href="./images/androidstudio.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>코드를 넣어준 후 적용을 누르면 코드 하이라이팅이 적용된 것을 확인할 수 있습니다.