개발 블로그를 작성하다보면서 물론 코드블럭에 테마가 크게 중요한 부분은 아니지만
개인적으로는 글을 보다보면 첨부한 코드를 보기 위해 코드블럭을 보게 될 것이다.
이때 주석, 소스코드등이 식별 가능하고 보기 편하다면 더욱 더 도움이 될 것이라고 생각하여, 찾아보다가 좋은 테마들이 많이 있어서 추후 유용하게 사용하기 위해서 적어둔다.
1.)아래 접속하여 테마 영역에서 확인해보고 원하는 테마명을 알아둔다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
2) 프로필 - 설정 - 스킨 편집 - html 편집으로 들어간다.
3.) <head> </head> 사이에 다음 코드를 넣는다.
<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad(); $(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); }); </script>
<!-- 코드블럭 글씨 크기 -->
<style> pre > code {font-size: 13.5px;} </style>4.) 테마이름에 적용하고 싶은 테마명을 넣는다.
5.) 기분 좋게 블로그를 쓴다
이 모든 게 귀찮다면 프로필 - 설정 - 플러그인 - 코드 문법 강조를 활용하면 몇 가지 테마들을 적용할 수 있다. 그냥 테마 누르면 적용된다. 확인은 본인 코드작성한 부분 확인하면 알 수 있을 것이다.
'꿀팁' 카테고리의 다른 글
| NAVER SMS API 연동 (0) | 2023.03.27 |
|---|---|
| Apache JMeter 부하 테스트 (0) | 2023.03.26 |
| 엑셀에서 csv 깨짐 현상 (0) | 2023.03.25 |
| 개인도서목록 (0) | 2023.01.27 |