개발 공부 기록하기

티스토리 코드블럭 커스터마이징: highlight.js (ver. 11.6.0) 이용 방법 ( + 코드블럭에 라인 넘버 추가하기) 본문

Troubleshooting

티스토리 코드블럭 커스터마이징: highlight.js (ver. 11.6.0) 이용 방법 ( + 코드블럭에 라인 넘버 추가하기)

태영(泰伶) 2022. 10. 30. 15:24

공부를 하나씩 해 나가면서, 강의에서 제공되는 예제를 jsfiddle로 실습해왔다.

 

결과 화면을 코드와 동시에 한 화면에서 볼 수 있다는 장점 때문에 사용했으나,

(그리고 사실 티스토리에서 제공해주는 '코드블럭' 사용 방법을 몰랐다..)

 

글씨가 작아지고, 캡처 화면의 특성상 화질이 엉망이라 검색을 하다가 코드블럭 기능을 알게 됐다.

 

하지만, 코린이 수준에 불과한 내 실력은 생각지도 않는 것인지...

기본으로 제공되는 코드블럭 디자인이 마음에 들지 않아서 좀 꾸미고 싶어졌다.

 

많은 구글링을 통해서

티스토리 블로그 관리 → 플러그인 → "코드 문법 강조" 적용

을 시도했지만 이 역시 마음에 들지 않았다.

 

또다시 무한 구글링...

이번에 찾은 방법은 highlight.js였다.

(영어로 된 페이지지만, 영어 못하셔도 된다. 안 어렵다. 번거로울 뿐.)

 

 

 

처음에는 이것저것 블로그들을 참조하며 적용하려고 했는데,

tag마다 색이 이쁘게 입혀지는 작업만 도무지 되지가 않더라....

 

진짜 온갖 뻘짓하다가 얼결에 해결해버렸다.

그래서 진짜로 내가 처음부터 뭘 건드려서 해결을 봤는지 적어두기로 했다.

 

 

https://highlightjs.org/

 

highlight.js

Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.

highlightjs.org

 

위의 링크를 타고 들어가니까 아래 화면이 나왔다.

2022년 10월 30일 기준, 버전은 11.6.0이었다.

 Get version 11.6.0  클릭!

 

 

버튼을 누르게 되면 나오는 화면은 다음과 같다.

많은 블로거분들이  1. Hosted  방법을 사용해 highlight.js을 적용하는 방법을 포스팅해두셨는데,

아래에 복사하는 코드에 모두 highlight.js 버전 숫자가 포스팅 시점에 따라 다르게 적혀있었다.

(간혹 Custom package를 사용한 방법도 언급해두신 분이 있었다..만, 뒤의 과정에서 예전과 달라진 점이 있는 건지 한참 헤맸다.)

 

 

성격상 복잡한 절차를 선호하지 않는 나이기에..ㅎㅎ

highlight.js가 업데이트되어 버전 숫자가 바뀌게 되면 나중에 또 손대야 할 것 같다는 막연한 두려움(?)에

그리고 아이러니하게도 복잡한 과정을 거치는 한이 있더라도 처음 할 때 커스터마이제이션을 제대로 하는 걸 좋아하기에

 

 

나는  2. Custom package  방법을 택하기로 결정했다!

 

위의 화면에서 조금만 스크롤을 내리면

아래 사진처럼 수많은 프로그래밍 언어들을 선택할 수 있도록 되어있다.

(필요한 언어만 선택해도 된다!)

나중에 어떤 언어가 필요할지 모르니까 나는 그냥 모든 언어 다 선택했다..^^;;;

그리고  Download  클릭!

 

다운로드되는 압축파일을 풀어서 나는 바탕화면에 새 폴더 'highlight'를 만들어 그 안에 다 집어넣어버렸다.

 

 

그리고 다음 절차는 티스토리 블로그 관리 → 꾸미기 메뉴 → 스킨 편집 → HTML 편집에서 이루어진다.

 

HTML 편집 버튼을 누르면 위쪽에

 

HTML | CSS | 파일업로드

세 가지를 누를 수 있게 되어 있다.

 

거기서 파일업로드 쪽으로 이동한다.

 

그리고 조금 전 다운로드를 한 highlight 폴더 안에서

① highlight.min.js

② 수많은 CSS 원본 파일 중에 하나   (나는  espresso.min.css  를 골랐다.)

       * ②를 어떤 것으로 고르는지는 본인 마음이다! 어떤 디자인이 마음에 드는지 demo를 볼 수 있는 곳은 아래에서 소개하겠다. (cf1, 참조.)

 

② style 폴더로 들어온 화면인데, 이곳뿐만 아니라 제일 위에 있는 base16 폴더 안에도 css 원본 파일이 많다!! (디자인 참조는 cf1,에서 하시라.)

 

를 선택해서

파일업로드 페이지의 추가 버튼을 이용해 두 파일을 업로드해주었다.

 

혹시 모르니까 이쯤에서 오른쪽 위의 '적용' 버튼 눌러주고..!

 

다음 단계는

HTML | CSS | 파일업로드

중 HTML에서 해야 한다.

 

다른 부분은 손대지 않았다. (아마..도??)

그러니 다른 소스 코드들은 내가 선택했던 스킨에 기본 적용되어 있는 코드들이리라.

 

여기서  <head>  와  </head>  사이에 아래 코드를 복사&붙여넣기 해 주었다.

(위치는 상관없다. head 안에만 들어가면 된다.)

	<!-- 코드블럭 커스터마이징 시작 -->
	<link rel="stylesheet" href="./images/espresso.min.css">
	<script src="./images/highlight.min.js"></script>
	<script>hljs.highlightAll();</script>
	<!-- 코드블럭 커스터마이징 끝 -->

나는 espresso.min.css를 골랐기 때문에 <link> tag 안에 espresso.min.css로 썼지만,

다른 걸 고르신 분들은 아래의 cf2, 부분을 참고하셔서 코드를 적절히 변경하시기 바란다.

 

그리고 또다시 적용 버튼 클릭!

 

그렇게 하면 끝이다!!!!

 

 

cf1, 코드블럭 디자인 demo 확인하기

맨 처음의 highlightjs.org 페이지로 다시 접속하면,

아래의 노란 밑줄을 친 부분을 클릭할 수 있게끔 되어 있다.

 

클릭해서 나온 화면의 왼편에 보면,   Themes  라고 되어 있다.

이 아래에 있는 것들을 이것저것 눌러가며 오른편의 디자인을 확인하고 마음에 드는 것을 고르면 된다.

 

눈치 채셨겠지만.. Themes 아래의 'Base16/~~~'로 적힌 디자인들은 다운로드 받은 'highlight' 폴더의 'style' 안에서 봤던 'base16' 폴더 안에 있는 디자인들이다. (cf2, 참조)

 

 

 

 

cf2, highlight 폴더에서 내가 원하는 디자인의 파일 이름 확인하기

 

압축을 풀어 가지고 있는 highlight 폴더에서 style 폴더를 클릭하면,

위와 같은 수많은 CSS 원본 파일들이 자리하고 있다.

이 폴더 안에서 본인이 cf1,을 통해서 고른 디자인의 이름을 확인하면 된다.

 

그 확인한 이름을

코드에 작성하는데, 아래의 표시된 부분을 고쳐주시면 된다.

(주의할 점!!!! .css는 반드시 뒤에 붙여주셔야 한다!!)

 

 

 

 

cf3, 코드블럭 앞에 라인 넘버 붙이는 방법

 

바로 위의 사진에서 보시면 맨 왼편에 줄 번호가 달려있는 것을 확인할 수 있다.

가독성을 높이기 위함이라는 이유로 수많은 web editor(예, jsfiddle, codepen, liveweave 등)에서는 제공을 해주는데, 티스토리에서도 쓰고 싶어졌다.

 

이건 슬프게도 코드블럭 디자인을 highlight.js에서 고르기만 한다고 되는 사안이 아니다.

또 다른 손을 써주어야 한다.

 

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

 

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

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

 

위의 페이지를 눌러 들어가서 중간쯤에 있는  Code ▾  버튼을 클릭해 Download ZIP을 눌러주었다.

 

다운로드한 파일의 압축을 풀어서,

그 폴더의 dist 폴더를 클릭해 

그 안의 highlightjs-line-numbers.min.js 파일을

티스토리 블로그 관리 → 꾸미기 → 스킨 편집 → html 편집

의 '파일업로드'에 업로드해주었다.

 

그러고 나서, HTML로 넘어가 아래 코드를 <head>와 </head> 안에 복사&붙여넣기 해 준다.

	<!-- 코드블럭 라인 넘버 시작 -->
	<script src="./images/highlightjs-line-numbers.min.js"></script>
	<script>hljs.initLineNumbersOnLoad();</script>
	<!-- 코드블럭 라인 넘버 끝 -->

끝! 끝! 진짜 끝!!!

 

 

 

(지금부터는 아래 것들은 해도 그만 안 해도 그만이다.)

아래 코드를

/* 코드 출력시 라인넘버 추가 */
.hljs-ln-numbers {	
	user-select: none;	
	text-align: right;	
	color: #ccc;	
	width: 25px;	
	border-right: 1px solid #CCC;	
	vertical-align: top;	
	padding-right: 5px !important;
}

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

티스토리 블로그 관리 → 꾸미기 → 스킨 편집 → html 편집

에서 CSS에 붙여넣어주면 (이건 정말 어느 위치에 넣어도 상관이 없다.)

 

라인 넘버가 훨씬 선명해지고, 라인 넘버와 코드 사이에 구분선이 그어진다.

(출처: https://xxxelppa.tistory.com/242)

나보다 훨씬 더 세세하게 써두셔서 참고를 많이 했다..ㅠㅠㅎㅎㅎ 감사합니다ㅎㅎ

 

 

 

 

 

 

 

 

이제 어느 정도는 커스터마이징이 된 것 같다.

아직은 코린이 수준에 불과한지라 원하는 바대로 얼결에 해결된 것 같지만...

그렇더라도 하나하나 배워가는 과정이라고 생각하기로 했다ㅎㅎ

아고 어려버라....ㅎㅎㅎㅎㅎ

저작자표시 비영리 변경금지

'Troubleshooting' 카테고리의 다른 글

API 호출 횟수 줄여 성능 개선하기  (0) 2023.08.25
Login - token을 cookie에 저장  (0) 2023.08.10
'Troubleshooting' Related Articles more
Comments