[Highlight.js] 사용 방법

https://highlightjs.org/

highlight.js

# CDN 연결하는 방법

초록박스로 선택된 영역 클릭

 

CDN 복사

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>

link의 href의 끝 부분을 보면 "default"이다. 즉, 테마는 기본 값으로 설정 돼 있는 것을 알 수 있다.

---

# 테마 설정하는 방법

초록색 영역을 클린한다.

윈쪽에 테마가 있고, 테마 아래에서 원하는 테마를 클릭한다.

 

테마를 클릭한 뒤 개발자 모드에서 HTML을 선택한 상태에서 테마의 이름을 검색한 뒤 적용된 이름을 복사한다.

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>

link의 "default"를 복사한 이름으로 변경하면 테마가 적용이 된다.

---

# 실행을 하기 위해서

<script>hljs.highlightAll();</script>

위 코드가 필요하다.

 

[최종 코드]

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

---

Q. 왼쪽에 코드 번호를 넣고 싶어요.

아래 코드들을 추가로 넣어준다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initLineNumbersOnLoad();
$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});
</script>

/* for block of numbers */
.hljs - ln td.hljs - ln - numbers {
    -webkit - touch - callout: none; -
    webkit - user - select: none; -
    khtml - user - select: none; -
    moz - user - select: none; -
    ms - user - select: none;
    user - select: none;
    text - align: center;
    color: #64666a;
    border-right: 1px solid currentColor;
    vertical-align: top;
    padding-right: 5px;
    /* your custom style here */
}
 
/* for block of code */
.hljs-ln td.hljs-ln-code {
	padding-left: 10px;
}

---

# HTML에 사용하는 방법은?

<pre><code> ... </code></pre>

https://highlightjs.org/usage/

How to use highlight.js

---

Q. HTML을 작성하면 출력을 안하는데요?

아래와 같이 코드를 작성하면 화면에 아무것도 출력하지 않는다.

이유는 작성자는 <h1></h1>을 코드로 출력하길 바랬지만, 브라우저는 태그로 인식을 해서 아무것도 출력하지 않는 것이다.

<pre>
    <code>
    	<h1></h1>
    </code>
</pre>

 

그렇다면 어떻게 해야하나요?

https://pjw48.net/webapp/ltgt_conv/

HTML < ... > converter

위 사이트에 코드를 넣고 변환을 한다.

<h1></h1> => &lt;h1&gt;&lt;/h1&gt;

귀찮지만 어쩔수 없이 변환 과정이 필요하다.

---

[공부 좌표]

https://webdir.tistory.com/439

https://mainia.tistory.com/6039