highlight.js 적용하기

tistory에서 "관리자 > 플러그인 > Syntax HighLight"를 사용해서 하거나,

제공하는 플러그인을 사용하지 않고, 직접 관련 모듈을 사용할 수 있다.

 

많이 사용하는 모듈은 아래 highlightjs 하고

https://highlightjs.org/

  - 오픈소스 사이트로 직접 css와 script를 import 할 수도 있고, 다운로드 받아서 tistory에 업로드 후 사용도 가능함. 

라인넘버를 표시하기 위해서는 아래 추가 모듈이 필요하다.

https://github.com/wcoder/highlightjs-line-numbers.js

 

위, 두 소스를 받아서 tistory에 업로드 후 설정하는 방법으로 진행하기로함.

이유는 관련 사이트 장애나, 사이트 접근이 안되는 경우가 생길 수 있어서 tistory로 업로드하기로 함.

 

1. 관련 소스를 tistory에 업로드 후 설정하는 방법

 - 스킨이 변경되면, 업로드한 소스가 모두 삭제되므로 변경될 때마다 다시 설정이 필요함!!!

 - 관리자 > 꾸미기 > 스킨편집 화면에서, 맨 우측 상단 "html편집"으로 들어가면, 

   "HTML | CSS | 파일업로드" 메뉴가 보인다.

 

1.1 파일업로드

 a) highlightjs

  - agate.css : 다크모드 의 스타일 선택함. 필요한 스타일만 올리면 됨. (demo : https://highlightjs.org/static/demo/)

  - highlight.pack.js : java script

 b) highlightjs-line-numbers

  - highlightjs-line-numbers.js : java script

 

1.2 HTML 수정

 - head 태그 부분에 스크립트 추가

 - 스타일에 따라서 맨아래 함수에서 오류날 수 있음. jQuery를 지원하지 않는 스타일 소스 인 듯.

 - 또는, 소스 적용 후 원하지 않는 화면 결과가 나오면 수정하거나 수정이 힘들면 다른 스타일로 변경할 것. 

<script src="./images/highlight.pack.js"></script> 
<script src="./images/highlightjs-line-numbers.js"></script> 
<link rel="stylesheet" href="./images/tomorrow-night.css" /> 
<script> 
  hljs.initHighlightingOnLoad(); 
  hljs.initLineNumbersOnLoad(); 
  $(document).ready(function() { 
    $('code.hljs').each(function(i, block) { 
      hljs.lineNumbersBlock(block); 
    }); 
  }); 
</script>

1.3 CSS 수정

.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: #ccc; 
    border-right: 1px solid #ccc; 
    vertical-align: top;
    padding-right: 5px;
}

.hljs-ln td.hljs-ln-code {
    padding-left: 10px;
}

 

2. 사용법

1) 글작성 시 툴바 "..."을 클릭 후,  "<> 코드 블록"으로 먼저 작성한다.

 - 이때 <> 같은 기호가 html 태그로 변환된다.

 

2) 툴바 "기본모드" 선택 후 "HTML"모드를 선택한다.

 - "<>코드 블록"을 찾아서, highlight모듈의 표기로 수정한다.

   표기법1) 기본적으로 자동으로 소스 형식을 찾는다. 만약 찾지 못하면 class태그를 붙인다.

     <pre><code>소스코드</code></pre>

   표기법2) 기본적으로 자동으로 소스 형식을 찾는다. 만약 찾지 못하면 class태그를 붙인다.

     <pre><code class="java">소스코드</code></pre>

 

end.

 

highlight.zip

0.30MB

highlightjs-line-numbers.js-master.zip

0.00MB