데이터베이스

highlight.js를 이용한 코드 하이라이트

waterground 2019. 11. 13. 22:35

highlight.js 사용에 앞서

적용할 스타일을 다음 홈페이지에서 살펴 볼 수 있다.
https://highlightjs.org/static/demo/

CDN을 이용한 highlight.js 사용

  1. 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집으로 이동해사이에 아래의 코드를 넣는다
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  1. 적용하고자 하는 스타일을 정하기 위해 첫 줄을 아래와 같이 바꾼다.
    예를 들어, Ocean 스타일을 적용하려면

    default.min.css를 ocean.min.css로 바꾼다.

  2. 아래와 같은 형식으로 코드를 삽입한다.

<pre class="사용할 언어"><code>코드 내용</code></pre>

스타일을 적용 후

<p>Hello!</p>