[Tistory] Code Highlight 적용하기 (hELLO 스킨 사용시 에러 해결)

 

 

 

티스토리에서 플러그인을 통해 기본으로 제공하는 code highlight을 사용하면

line number도 없고 아무튼 뭔가 맘에 안 든다.

무엇보다, 지난 번에 MATLAB 글을 작성할 때 MATLAB code highlighting을 티스토리의 코드블럭에서 지원하지 않는 것을 확인한 뒤 실망했었다.

 

그래서 좀 뒤적뒤적 해보니, highlightjs 라는 유명한 Javascript를 활용하면 MATLAB code highlight도 가능하며

theme도 훨씬 다양하게 바꿀 수 있는 것을 알았다.

 

highlight.js

 

오 그렇구나 이걸 사용해봐야겠다 결심하고 구글링을 열심히 해서 어떻게 사용하는건지 파악해봤다.

 

 

 

---

 

 

 

1. highlight.zip 파일 다운받기

다른 블로그들을 보니, CDN 방식이라고 해서, Javascript file을 티스토리 스킨설정에 따로 업로드 시키지 않고 link만 이용해서 설정하는 것을 보았다.

근데 이렇게 하면 내가 원하는 MATLAB code highlighting이 불가능하기 때문에 (기본으로 제공하는 언어 리스트에 없음)

파일을 받아서 사용하기로 했다.

 

위에 걸어둔 링크로 접속한 뒤, Get Version을 클릭한다.

 

highlightjs.org의 메인 화면

 

그러면 아래와 같이 티스토리 스킨의 HTML에 적용시켜야 할 code들이 나온다.

얘네들은 일단 넘기고, 아래로 가서 MATLAB을 찾은 뒤 체크박스에 체크를 했다.

그 후, Download를 눌러 .zip file을 받는다.

 

highlightjs.org에서 Get Version을 클릭한 모습.

Get Version을 클릭한 뒤, MATLAB을 선택한 모습.

 

압축을 풀어보면 아래와 같은 파일들이 있다.

여기서 주목해야 할 것은 highlight.min.js / styles 이다.

 

highlightjs.zip을 받으면 나오는 파일들

 

 

 

---

 

 

 

2. 티스토리 스킨 설정에 관련 파일들 업로드하기

티스토리 블로그 관리 페이지로 간 뒤, 꾸미기 -> 스킨 편집 에 가서 HTML 편집을 누른다.

나는 hELLO. 스킨을 사용중이므로 아래와 같이 뜬다.

 

티스토리 스킨 편집에 들어간 모습.

티스토리 스킨 편집에서 필요한 파일들을 업로드한 모습. (이 글과 무관한 파일들은 가려서 캡처함)

 

그 뒤, 파일업로드로 가서 아래에 있는 +추가 버튼을 통해 highlight.min.js을 업로드 한다.

업로드를 하면 images/highlight.min.js 의 경로로 해당 파일이 추가된다.

(+다른 블로그들 보니, 거의 다 highlight.pack.js를 업로드 하라고 소개되어있어서 꽤 헤맸다.

아마 예전에는 -pack.js라는 naming을 사용한 듯)

 

그리고, 내가 사용하고 싶은 code highlighting의 테마 CSS 파일을 업로드 한다.

나는 Devibeans 테마를 사용하기로 했다.

따라서 devibeans.min.css를 추가해주었다.

다른 테마들은 어떤게 있는지 보고싶다면 아래 링크를 따라가면 됨.

테마 CSS 파일은 아까 압축 풀었을 때 봤던 styles 폴더에 있다.

 

highlight.js demo

 

 

 

---

---

 

 

 

3. 티스토리 스킨 HTML에서 관련 파일들 연결하기

파일업로드에서 HTML로 이동 후, Ctrl + F를 눌러 </head>를 찾는다.

Ctrl + F를 눌렀을 때 아래와 같이 뜬다면

HTML 코드들 사이 아무데나 마우스 클릭 한 번 하고 다시 Ctrl + F를 누르면 된다.

 

브라우저 자체에서 찾기 명령이 수행된 경우.

티스토리 스킨 HTML에서 </head>을 검색한 모습. 

 

그리고 위와 같이 javascript 파일 및 css 파일을 연결시켜준다.

아래는 위 코드를 그대로 붙여넣은 것.

만약 내가 Devibeans말고 다른 테마를 사용하고 싶다면 해당 테마의 CSS 파일도 위에서 설명했듯이 업로드 해놔야 하고

아래 CSS link 코드도 바꿔야 한다. 예를 들어 github-drak를 테마로 사용하고 싶다면 아래 코드에서

devibeans.min.css -> github-dark.min.css로 바꾸고,

styles 폴더에 있는 github-dark.min.css을 파일업로드에 가서 추가해놔야 한다.

 

<<코드가 보이지 않는다면 오른쪽 아래의 달모양 버튼으로

테마를 다크모드에서 화이트모드로 바꿔주세요>>

 

<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/devibeans.min.css">
<script>hljs.initHighlightingOnLoad();</script>

 

 

 

---

 

 

 

4. [hELLO 스킨 한정] Code Highlight가 내가 설정한 테마대로 안 나올 때

오케이 이렇게 하면 되는구나 하고 위 수정사항들을 적용 버튼을 눌러 적용시킨 뒤,

저번에 작성해놓은 글로 돌아가보니 테마가 제대로 적용되지 않았다.

뭔가 글자들 색깔은 이전이랑 다르게 바뀐 것 같기는 한데,

무엇보다 나는 분명 검은 배경의 테마를 적용했는데 배경색이 바뀌질 않았다.

열심히 구글링을 해보다 아래 블로거님의 글을 봤는데, 여기서 제시된 방법들대로 해도 해결이 되지 않았다.

(아래 블로거님도 hELLO 스킨을 사용중이었음)

 

티스토리 코드블럭, highlight.js로 테마 적용 안됨 해결

 

위 글에서는 일단 티스토리 플러그인에 있는 Syntax Highlight (코드 문법 강조)를 끄라고 하긴 하는데,

시도해봐도 전혀 해결이 되질 않았다.

 

티스토리 플러그인에 있는 Syntax Highlight.

 

위 방법은 hELLO 스킨 제작자님의 배포 홈페이지 (아래 링크)에 가봐도 마찬가지로 소개된 방법이다.

꺼봐도 안 되니까 내가 이 글을 쓰고 있다 ㅜㅜ

 

hELLO. 티스토리 스킨을 소개합니다.

 

또 열심히 구글링을 좀 해보니, 티스토리 스킨에 따라 CSS 파일에서 기본 값으로 덮어씌워지는 경우가 있다고 한다.

 

티스토리 코드 하이라이트(highlight.js, line number, 폰트 적용하기)

 

[코드 구문 강조 - highlight.js]3. highlight.js 줄 번호(line number), 가로 스크롤 추가 방법

 

위 블로그들에서 해결방법으로 제시된 것은 CSS 파일에서 table과 관련된 곳을 건드리는 것이다.

그런데 내 스킨의 CSS에는 코드 하이라이팅을 table로 다루지 않는다. 아무리 검색해봐도 안 나옴 ..

결국 code로 검색해서 background-color가 강제로 덮어씌워지는 곳을 발견하고, 이 부분을 주석처리함으로써 해결했다.

 

hELLO 스킨의 CSS를 보니, background-color가 important로 강제로 실행되고 있는 것을 발견.

 

근데 막상 Devibeans 테마를 적용해놓고 보니 내 블로그 배경색인 흰색과 너무 큰 대비를 이뤄서 눈이 아팠다.

조금 완화시키기 위해 적당한 색깔을 찾아 넣어준 후, 이미 있는 !important 강제로 덮어씌워지는 것을 이용했다.

 

CSS에서 background-color를 내가 원하는 색깔로 바꿔주었음.

코드 하이라이팅이 잘 적용된 모습. 아직도 살짝 눈이 아프긴 한데, 바꾸기 전 보다는 훨씬 덜해서 그나마 낫다.

 

 

 

---

 

 

 

5. 코드 폰트 바꾸기 및 박스 모서리 둥그렇게 만들기

pre code {
  font-family: "consolas", monospace;
	line-height: 1.3;
}

pre code.hljs {
	padding: 10px; margin: 15px 0; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;  border-radius: 7px; line-height: 130%;
}

 

위 코드를 내 스킨 CSS 제일 아래에다가 붙여넣어주면 된다.

역시 코드 표기는 consolas가 최고지.

 

.hljs {
  white-space: pre;
  overflow-x: auto;
}

 

또한, 위 code를 넣어주면 모바일에서 가로스크롤 기능이 생긴다.

코드들이 자동으로 줄바꿈되면서 개판으로 표기되는 것을 방지할 수 있다.

이 코드도 CSS 아래쪽에 대충 붙여넣어주면 된다.

 

 

 

---

 

 

 

6. 코드 line number 보이게 만들기

위에서 소개된 대로만 하면 line number가 보이지 않는다.

 

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

 

위 링크로 이동 후, highlightjs-line-number.js 파일을 받아야 한다.

 

highlightjs-line-numbers.js의 Github 페이지.

highlight-line-numbers.js 파일 선택.

highlightjs-line-numbers.js를 raw file로 표기하기.

Raw file로 표기된 highlightjs-line.numbers.js.

 

이 페이지까지 왔으면, Ctrl + S를 눌러 저장을 하면 된다.

그 후, 위에서 했듯이 티스토리 스킨 편집 -> HTML 편집 -> 파일업로드

로 가서 해당 파일을 업로드 한다.

그 후, HTML로 돌아와 아까 넣어놓은 코드에 추가로 아래 code를 넣어서 아래 사진처럼 보이게 만든다.

 

티스토리 HTML에서 highlightjs-line-numbers.js를 적용하는 코드를 넣은 모습.

<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
	$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
	});
});
</script>

 

그리고, CSS에는 아래 code를 넣어준다. 코드의 line number 옆에 줄이 생기게 만들어주는 코드이다.

 

/* for block of numbers */
.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 !important;
 
    /* your custom style here */
}
 
/* for block of code */
.hljs-ln-code {
    padding-left: 10px !important;
}

 

위 코드는 아래 블로거님의 글을 참고했다.

위에서 !important로 강제 명령을 하지 않으면 padding이 적용되질 않으니 꼭 넣어주자.

 

티스토리 코드 하이라이트(highlight.js, line number, 폰트 적용하기)

 

 

 

---

 

 

 

오늘 하루종일 이거 왜 안되나 여기저기 뒤적거리면서 겨우 해결하였다.

이런 글이 이미 있었다면 훨씬 더 쉽게 해결되었을 것을 .. !

글 적는 이유가 그런거지 뭐 ㅎㅎ