highlight.js는 웹페이지에서 코드 구문 강조 기능을 제공하는 자바스크립트 라이브러리입니다. 아래는 highlight.js의 사용법입니다.
1. 기존 코드 문법 강조 비활성
플로그인에서 기본적으로 제공되는 코드 문법 강조를 이용하게 되면 highlight.js가 적용되지 않을 수 있습니다.
2. highlight.js 라이브러리 다운로드
아래의 사이트에서 highlight.js를 다운 받을 수 있습니다.
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
highlight.js에서 제공되는 코드 구문 강조를 할 수 있는 종류이며 해당 페이지에서 필요에 따라 선택하면 됩니다.
130개의 언어가 지원되며 대체로 많이 사용되는 언어들의 경우 common의 항목으로 기본적으로 선택되어 있습니다.
다운로드가 완료된 파일의 압축을 풀어 주시면 됩니다.
3. highlight 스타일 선택
아래의 사이트에 들어가게되면 Themes 항목을 통해 제공되는 스타일을 확인할 수 있습니다.
highlight.js demo
highlightjs.org
해당 스타일 파일들은 압축이 풀린 폴더의 styles 폴더에 저장되어 있습니다.
4. 스타일 적용
선택한 스타일을 적용하기 위해선 티스토리 관리창에서 스킨 편집으로 이동하여 html편집으로 이동하여야 합니다.
html편집 창에 들어오게 되면 파일업로드 화면으로 이동 후 추가를 선택하여 위에서 선택한 스타일 파일과 highlight.min.js 파일을 추가하시면 됩니다.
마지막으로 html편집 화면으로 이동하여 head 태그 안에 아래와 같이 입력해 주시면 됩니다.
<head></head>사이
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/apprentice.min.css">
<script>hljs.initHighlightingOnLoad();</script>
이상 highlight.js 적용법이었습니다.
'Tistroy' 카테고리의 다른 글
| 티스토리 외부 스킨 적용 (0) | 2023.03.31 |
|---|
