Tistory 에디터 편집기가 업데이트되었습니다. 코드를 넣으면 HTML로 구문 강조를 해주는 사이트를 이용하다가, Tistory 에디터가 업데이트되고 코드블럭을 사용해 봤더니, 너무 밋밋한 거 같네요. 하던 대로 외부에서 복사해서 붙여 넣기 해야지 하는데? 버그인지 의도인지는 모르겠지만, HTML 서식이 아직 복사가 안 되네요.
IT 블로그가 많은 Tistory인데, 코드 강조 구문을 쓸 수가 없다? (구)에디터 만을 써야 한다? 말이 안 되죠. 그래서 확인해보니, 코드블럭에서 highlight.js 기능을 지원하고 있었습니다. 다른 코드 구문 강조도 적용할 수도 있지만, 여기서는 highlight.js를 심층 분석해보겠습니다.
2. highlight.js적용이 안 될 때(configure 옵션 설정 방법)
3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법
코드 구문 강조의 종류 - highlight.js를 선택한 이유
코드 구문 강조를 지원해주는 라이브러리는 다양합니다. highlight.js, SyntaxHighlighter, Google Code Pretty, SHJS 등이 있죠. 많은 코드 구문 강조 중에 highlight.js를 선택한 이유부터 설명드리겠습니다.
1. 코드 블럭 호환
- Tistory 블로그에서 글쓰기 하고, 바로 코드 블럭으로 코드를 넣었을 때, 바로 적용이 되니, 글 작성이 수월해집니다. 이전 에디터에서는 HTML 모드로 전환해서 <pre><code> 구문을 넣어야 했지요.
2. 최적화
- 속도, 용량, 코드 문법 강조면에서 가볍고, 뛰어납니다.
3. HTML5 호환
- HTML5 권고문에 <pre><code class="언어">... </code></pre>를 쓰라고 얘기하고 있습니다. 이에 맞춰 Tistory 코드 블록도 구현된 것 같고요. 권고를 반드시 지켜야 하는 건 아니지만, 나중에라도 호환에 유리하겠죠?
highlight.js의 2가지 적용 방법
웹 검색을 해보시면, highlight.js를 간단히 적용하는 방법은 2가지로, 많이 나와있습니다.
그러나!
사이트(블로그)에 적용된 스킨에 따라서, 적용이 안 되기도 하고(글씨가 검은색으로만 나오는 현상 등), 더 가독성이 떨어지는 폰트, 줄 간격 등이 적용되어 보이기도 하고, 탭 사이즈 같은 옵션을 바꾸고 싶기도 하는 문제와 고민이 발생하게 되죠.
이러한 고민들이 highlight.js를 다루는 글을 쓰기 시작한 계기가 됩니다.
본론으로 들어가서 웹사이트(블로그)에 highlight.js를 적용하는 방법은 2가지가 있습니다.
CDN js를 적용하는 방법과 직접 다운로드하여 업로드하는 방법이 있습니다.
1. CDN js를 이용하는 방법
2줄의 코드를 넣으면 초기 설정이 완료되는 간단한 방법입니다.
장점은 업로드 없이 간편하게 구축이 가능하다는 점, 만약 업데이트가 된다면 자동으로 갱신된다는 점이 있겠네요.
단점은 자주 쓰이는 22개의 언어만 강조되는데, 추가 언어를 적용하기 위해서는 직접 다운로드하여야 하죠. 블로그는 상관없겠지만, 오프라인 환경에서는 적용되지 않는다는 점이 있고, 체감하기는 어렵지만, 직접 업로드하는 방식에 비해 비교적 속도가 느리다는 점이 있습니다. 또 만에 하나 link 주소가 변경되었을 때 구문 강조가 고장 날 수도 있어요. (발생 가능성은 없습니다.)
2. 직접 다운로드하는 방법
직접 라이브러리를 다운로드하여 웹사이트(블로그)에 업로드하고, 사용하는 방식입니다. 그 외에 차이가 없기 때문에, 개인적으로 직접 설정해서 다운받아 쓰는 게 더 나은 것 같습니다.
highlight.js 다운로드 및 적용
1. highlightjs.org 사이트에 접속합니다.
highlight.js
Version 9.15.6 New languages: none. New styles: none. Improvements: - Move dependencies to be devDependencies. - Fixed security issues in dev dependencies.
highlightjs.org
2. Get version을 누릅니다.
185개 언어와 89개 스타일을 지원하고, 언어를 자동으로 찾아주고, 1개의 코드에서 여러 개의 언어 지원, node.js 지원, 모든 마크업에 잘 작동, 모든 JS 플랫폼에 잘 동작한다는 특징을 홍보하고 있네요.
3. Custom package를 설정하고, download 받습니다.
- cdnjs를 사용하실 분은 2줄을 추가하시면 될 것 같아요. 적용 방법은 tistory 블로그를 기준으로 설명드릴 건데, cdnjs 방법은 생략하고 다운로드하는 방법으로 설명드리겠습니다.
- main 언어는 다 선택해도 용량이 적어서 부담이 안 되는 것 같아요. 총 185개의 언어가 있으니, 필요하신 부분을 체크해서 다운로드하시면 될 것 같아요. R 등의 언어도 아래쪽 기타 언어에 있네요.
...
압축을 풀면 여러 가지 파일들이 나오는데, highlight.pack.js와 styles 폴더 안의 css파일만 있으면 됩니다.
styles에는 90개가 넘는 css 파일이 있는데, 적용할 style만 업로드하시면 됩니다.
style은 아래 사이트에서 고르시면 될 것 같습니다. 개인적으로 VS2015, androidstudio 같은 어두컴컴한 배경이 마음에 드네요.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
css 파일은 용량이 적기 때문에, 여러 개를 업로드해놓고, 필요에 따라 html 편집으로 스타일을 바꿔주면서 사용해도 될 것 같습니다. 주의할 점은 새로운 글만 적용되는 게 아니라 이전 글도 공통으로 적용된다는 점이에요.
필요하신 분들을 위한 파일 첨부
4. 이제, Tistory 블로그에 적용을 해보겠습니다.
다른 웹이나 블로그도 유사하게 적용하시면 될 것 같고, 모르겠으면 댓글 주세요.
먼저 블로그 관리 페이지로 이동해주세요. 꾸미기의 스킨 편집
HTML 편집으로 이동해주세요.
파일 업로드를 선택하시고, 추가 버튼으로 highlight.pack.js 폴더와 스타일 css 파일을 업로드해줍니다.
저는 예비용으로 default.css 까지 해서 androidstudio.css, highlight.pack.js 3개의 파일을 업로드하였습니다.
HTML으로 설정하고, highlight.js를 설정해주세요.
<head>와 </head> 사이에 아래와 같은 코드를 입력해주시면 됩니다.
<link rel="stylesheet" href="./images/androidstudio.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>아래처럼 되겠죠?
적용하기 전의 기본 코드 블럭입니다.
엇! 그런데 적용하고 나서 보니 이상해졌어요.
이 부분에 대해서 다음 포스팅에서 다루겠습니다.
(빠른 해결이 필요하신 분은 댓글!)
'WEB Programming > Blog' 카테고리의 다른 글
| [코드 구문 강조 - highlight.js]3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법 (6) | 2019.04.08 |
|---|---|
| [코드 구문 강조 - highlight.js]2. highlight.js적용이 안 될 때(configure 옵션 설정 방법) (31) | 2019.04.06 |
