[tistory] code block에 Highlight js와 line-number 적용하기

[tistory] code block에 Highlight js와 line-number 적용하기

2020. 11. 1. 14:30ㆍtistory

code block에 highlight js와 line-number를 적용해봅니다.

highlight js

: code block의 스킨

: 저는 atom-one-dark를 씁니다.

highlight-line-number

: code block 왼쪽에 line number를 표시해줌

이 글을 쓰는 이유는 제가 삽질한 것을 공유드리기 위해서입니다.

아래 4단계를 따라해주시면 됩니다.

1. Syntax Highlight 플러그인 해제하기

이게 발단이었습니다. line number를 적용하고 싶다면, 이걸 해제하고 highlight js를 설치해야합니다, 블로그 중에서 이걸 켠 상태에서도 되는 분들이 있던데, 안되는 경우 저처럼 해제를 해주세요.

2. Highlight js 설치

Highlight js로 가셔서 language를 선택하고, 직접 다운로드 혹은 CDN을 갖고 오시면 됩니다.

<!-- Highlight JavaScirpt - Cloudflare CDN 사용 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

귀찮으신분들은 관리>>스킨편집>>HTML편집 으로가서 HTML에<head></head>에 위 코드를 추가해줍니다.

다른 스킨으로 바꾸려면 line 2의 atom-one-dark을 다른스킨 이름으로 변경 (min.css는 그대로 둡니다.)

정확한 이름을 모르시면 여기 참고

이제 코드블럭을 작성하시면 스킨이 적용되어 있음을 볼 수 있습니다.

제가 삽질한 부분은 line 4에

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

이 부분을 빼먹었기 때문입니다.

Congratulation 🎉

여기까지 완료하신 분들은 왼쪽의 line number가 없을 것입니다.

3. Highlight line number 적용하기

<!-- Highlight Line Number JavaScirpt - Cloudflare CDN 사용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

위 코드를 HTML의 <head></head>안에 추가해줍니다.

js파일을 직접 다운로드해서 파일업로드를 하는 방법도 있지만, 저는 게을러서 모두 CDN으로 했습니다.

파일을 다운받아서 올리는 방법은 블로그들을 검색하면 많이 나오므로 여기서는 다루지 않겠습니다.

Congratulation 🎉

여기까지 완료되면 코드스킨적용과 line number가 보일 것 입니다.

4. CSS 수정해주기

우선 3번까지 제대로 했으면, 코드스킨 적용 및 라인넘버는 나와야합니다.

그런데.. 아래처럼 테이블 형태로 코드가 나타납니다. 이게 맘에 드시는분들은 그냥 두시면 되고, 없애고 싶으신 분들은

CSS에서 아래코드를

.article_view  table {
  border: 1px solid #dadce0;
  border-collapse: collapse; }

.article_view  table thead tr {
  background: rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: #000; }

.article_view  table tr th,
.article_view  table tr td {
  padding: 7px;
  border-left: 1px solid #dadce0; }

.article_view  table tr {
  border-bottom: 1px solid #dadce0; }

다음과 같이 수정해줍니다. (article_view내에 있는 table에만 css적용 되도록)

.article_view > table {
  border: 1px solid #dadce0;
  border-collapse: collapse; }

.article_view > table thead tr {
  background: rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: #000; }

.article_view > table tr th,
.article_view > table tr td {
  padding: 7px;
  border-left: 1px solid #dadce0; }

.article_view > table tr {
  border-bottom: 1px solid #dadce0; }

결과는

참고자료 (결정적으로 도움을 준 글들, Thank you!)

1. [티스토리] 코드블럭 생성, 테마, 라인넘버 끝내기

2. highlight.js를 활용하여 Code구문 강조하기

js 개발자 (Snail Dragon)