https://highlightjs.org/usage/
How to use highlight.js
Getting Started The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad: hljs.initHighlightingOnLoad(); This will find and highlight code inside of tags; it tries to de
highlightjs.org
1. 스킨 편집 - HTML 편집에서 <head></head> 태그 사이 아무곳에 아래의 CDN 경로를 넣어줌.(CDN 을 사용할 경우 기본적으로 제공해주는 39개의 언어만 하이라이트 기능 제공(10.5 버전 기준). 그 외의 언어를 하이라이팅 하고 싶다면 별도로 다운로드 받아서 사용)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>2. 위와 같이 넣을 경우 default 의 CSS 가 적용이 되므로 맘에 들지 않을 것(?)임. 내가 원하는 theme 을 적용하고 싶다면?
- highlightjs.org/static/demo/ 에서 맘에 드는 theme 을 골라본다! (예를 들어 Dracular 가 맘에 들었다고 가정)
- github.com/highlightjs/highlight.js/tree/master/src/styles 에 접속해 맘에 드는 theme 의 CSS 이름을 확인! (CTRL + F 또는 CMD + F 로 dracular 검색 -> dracular.css 가 검색 될 것임!)
- <link rel="stylesheet" href="https://cdnjs.../styles/default.min.css> 에서 default.min.css 을 dracular.min.css 로 변경!
3. 코드 블럭을 사용하려면?
- HTML 모드에서 <pre><code class="javascript">console.log('foo')</code></pre> 처럼 사용
- class 안에 내가 원하는 언어를 넣어주면 됨.(CDN 을 사용했으므로 지원되는 언어만 사용 가능 할 것...)
- class 에 넣을 언어는 여기서 확인! -> github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md
'Development > Javascript & Typescript' 카테고리의 다른 글
| 돈 단위 쉽게 표현하기. (천 단위로 콤마 넣는 방법) (0) | 2021.08.25 |
|---|---|
| [정규식] 연속 된 공백을 하나의 공백으로 변경 (0) | 2021.01.15 |
최근댓글