티스토리 뷰
Syntax Highlighter
신택스 하이라이터는 개발 관련 블로그에서 꽤 중요한 역할을 합니다. 내가 작성한 코드를 이쁘게 보여주거든요.
#include <iostream>
using namespace std;
int main(){
cout << "Hello World!!";
return 0;
}
하이라이터에는 여러 종류가 있습니다.
저는 처음엔 gist를 이용했고
최근까지는 colorscriptor를 이용했습니다.
|
1
2
3
4
5
6
7
|
#include <iostream>
using namespace std;
int main(){
cout << "Hello World!!";
return 0;
}
|
cs |
둘 다 썩 맘에 드는 편은 아닙니다. 심지어 colorscriptor는 자바스크립트 ES6부터 지원을 안 해줘요.
그러던 차에 Highlight.js를 발견했습니다. 되게 맘에 들더라구요.
Highlight.js
Highlight.js, 줄여서 hljs라고 합니다.
hljs는 깃허브에 올라와있는 오픈소스입니다.
https://github.com/highlightjs/highlight.js
highlightjs/highlight.js
Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.
github.com
장점
-
CDN을 이용하면 정말 간단히 적용할 수 있습니다.
-
사용하기도 편합니다. 티스토리의 경우 새로 업데이트된 글쓰기 에디터에 코드블럭이라는 기능이 생겼습니다. 순정상태의 코드블럭은 아무짝에도 쓸모없는 기능인데요, hljs를 적용하면 코드블럭으로 쉽게 신택스 하이라이팅을 할 수 있습니다.
-
185개의 언어, 91개의 테마가 적용 가능합니다. (CDN 이용하면 10개밖에 안됩니다ㅜ)
-
자동으로 언어를 디텍팅해줍니다. (코드블럭 쓰면 직접 설정해야 합니다ㅜㅜ)
-
그 외 이런저런 장점이 있는데 https://highlightjs.org/ 여기서 확인 가능합니다.
단점
-
원래 쓰던 하이라이터(gist, color scriptor)보다 로딩이 조금 느립니다. 0.5초 정도?
-
줄 번호 표시가 안됩니다. hljs-line-numbers라는 라이브러리로 커버할 수 있지만 CSS를 건드려야 해서 귀찮습니다.
티스토리 블로그에 적용하기
블로그 스킨 HTML에 스크립트 코드 삽입
깃허브 링크를 타고 들어가시면 친절하게 설명되어 이씃ㅂ니다.
우선 다음 코드를 블로그 스킨 HTML의 <head></head> 사이에 삽입해줍니다. 이런 추가적인 스크립트는 </head> 바로 위에 차곡차곡 쌓아주는 게 나중에 찾기 편합니다.
스킨 HTML 수정법을 모르시는 분은 아래 더보기를 열어주세요.
-
블로그 관리 페이지로 들어갑니다.
-
좌측 중하단 '꾸미기 > 스킨 편집'으로 들어가 주세요.
-
우측 'html 편집'으로 들어갑니다
-
</head>를 찾아줍니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/hybrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>CDN을 통해 사용할 예정이므로 경로는 클라우드 플래어 경로로 미리 수정해두었습니다.
첫 줄 스크립트는 테마를 설정하는 스크립트입니다.
저는 hybrid 테마를 이용해서 저렇게 적어놨지만, 다른 테마를 원하시는 분은 스크립트의 "https://(...)/styles/hybrid.min.css"에서 hybrid만 수정해주시면 됩니다. 다른 테마는 https://highlightjs.org/static/demo/ 데모 페이지에서 확인 가능합니다.
글 작성 시점이 2020년 1월 14일입니다. 현재 기준 최신 버전 경로를 넣어두긴 했는데 나중에 보시는 분들은 https://cdnjs.com/libraries/highlight.js 여기서 최신 버전 경로 복사 후 붙여 넣으시면 되겠습니다. 못하겠으면 그냥 저거 그대로 넣어두 될 거예요.
hljs 사용하기
위 스크립트를 넣고 저장해주면 이제 hljs를 사용할 수 있습니다.
-
글쓰기 에디터에서 코드블럭을 선택해주세요.
-
코드를 붙여 넣고, 원하는 언어를 선택해주시면 됩니다!
-
쨔쟌
이런 식으로 코드블럭을 사용해도 되고, 아니면 html로 직접 다음처럼 삽입해도 됩니다.
<pre><code>첫 번째 줄
두 번째 줄
세 번째 줄
...
...
...
</code></pre>코드블럭 기능은 단순히 붙여 넣은 코드를 <pre><code></code></pre>로 감싸주는 역할이거든요.
폰트 바꾸기
만약 적용 후에 폰트가 맘에 안 들면 블로그 스킨 CSS를 살짝만 건드려서 수정할 수 있습니다.
hljs는 코드를 <pre><code></code></pre>로 감싸준다고 했잖아요? 그러니까 저부분 CSS를 추가해줍시다.
CSS 코드 가장 아랫부분에 다음 코드를 삽입해주세요.
pre code {
font-family: "Consolas", "Sans Mono", "Courier", monospace;
}
첫 폰트에 원하는 폰트를 넣어주시면 됩니다. 저는 consolas를 적용했습니다.
hljs에 줄 번호 표시하기
hljs는 줄 번호를 표시해주지 않아 아쉽습니다.
이를 highlightjs-line-numbers.js를 이용해 해결할 수 있습니다.
https://github.com/wcoder/highlightjs-line-numbers.js
wcoder/highlightjs-line-numbers.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
참고로 갓 적용한 hljs-line-numbers는 다음과 같이 굉장히 못생겼습니다. 드래그 시 드래그 영역 색상도 개판이에요.
입맛대로 CSS를 수정할 수 있으신 분만 적용하시면 되겠습니다.
적용법은 간단합니다. 아래 스크립트를 순서에 맞게 넣어주면 됩니다.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>이 스크립트를 기존 hljs 스크립트 사이에 다음처럼 넣어주세요
<!-- 4, 7번 줄의 스크립트가 추가되었습니다. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/hybrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>그 후 HTML을 저장해주면 줄번호가 함께 표시됩니다!
hljs-line-numbers의 CSS 셀렉터 정보는 해당 깃허브에 가시면 나와 있습니다.
제가 적용한 CSS는 댓글 주시면 달아드리겠습니다.