안녕하세요?
티스토리로 코딩 블로그를 운영하면서 코드 블록에 넣은 코드가 좀 더 멋지게 보이는 방법이 없을까 고민을 많이 하는데요.
티스토리 플러그인에 하이라이트(Highlight.js)가 있습니다.
그런데, 플러그인에 있는 하이라이트는 코드 스타일이 몇가지 없어 본인이 원하는 스타일의 테마를 적용하기가 어렵습니다.
그래서 직접 HTML 파일을 열어 편집해서 적용하도록 하겠습니다.
일단 Hightlight.js 코드 홈페이지에서 다운 받을게 있는데 먼저 다운로드하도록 합시다.
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 39 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig
highlightjs.org
위 링크를 타고 가시면 중간 쯤에 아래 부분이 나옵니다.
여기서 직접 원하는 언어를 선택할 수 있습니다.
대부분 기존에 선택되어 있는 상태로 다운로드하여도 크게 문제가 없습니다.
스크롤하셔서 아래 그림처럼 다운로드 버튼을 누르시면 됩니다.
다운로드하면 다음과 같이 압축파일이 나옵니다. 일단 압축을 해제하시면 다음과 같습니다.
우리가 필요로하는 파일은 highlight.pack.js 파일입니다.
그리고 또 한가지 원하는 스타일의 css 파일이 필요한데 위 그림에서 styles라는 폴더로 이동해 봅시다.
여기서 우리는 가장 기본적인 androidstudio.css 파일을 선택할 예정입니다.
일단 여기까지 진행하셨다면 티스토리에 업로드 해야 겠죠?
사실 필요한 파일을 외부 CDN 서버로 직접 링크할 수도 있지만 블로그 페이지가 0.1초라도 더 빨리 로드되기를 원한다면 티스토리 서버에 올리는 게 좋을 듯싶습니다.
이제 블로그 관리에서 스킨 편집 화면으로 들어갑니다.
아래 화면에서 오른쪽 밑에 "html 편집"이라고 쓰여 있는 버튼을 누릅시다.
그러면 다음과 같이 나오는데,
맨 위에 있는 파일 업로드를 클릭합니다.
파일업로드를 클릭하면 위와 같이 나오는데 여기서 맨 밑에 있는 "+추가" 버튼을 눌러 아까 우리가 다운로드하였던 "highlight.pack.js" 파일과 우리가 선택한 "androidstudio.css" 파일을 업로드합니다.
업로드가 완료됐으면 다시 위 그림에서 HTML을 선택해서 HTML 선택 화면으로 갑니다.
그리고 <head></head> tag에 다음 코드를 삽입하시면 됩니다.
<head>
.....
.....
<!-- 하이라이트JS highlight.js -->
<link rel="stylesheet" href="./images/androidstudio.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
저는 </head> 바로 위에 저장했습니다.
위 코드는 "androidstudio.css" 파일을 로드하고 "highlight.pack.js"파일을 읽어 들이고
마지막으로 highlight 자바스크립트 코드를 론칭하는 코드입니다.
이제 저장하고 기존에 저장되어 있는 블로그에서 코드 블록이 제대로 스킨 반영되었는지 확인하시면 됩니다.
참고로 "androidstudio.css" 스킨이 마음에 안 드시면 아래 링크에서 원하시는 테마를 고르시면 됩니다.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
Dracula 테마인데요. 개인적으로 이 테마가 가장 눈이 편하더라고요.
개개인마다 좋은 테마가 많으니 잘 고르시기 바랍니다.
일단 골랐으면 아까 다운로드하였던 highlight 폴더에서 같은 이름으로 고르신 후 아까랑 똑같이 티스토리 서버에 업로드하시면 됩니다.
이상 티스토리에서 코드 블록에 하이라이트 테마를 적용하는 방법에 대해 알아봤습니다.
'코딩 > Javascript' 카테고리의 다른 글
| [JS-중급편-OOP] 12. null,undefined 알아보기 (0) | 2021.01.02 |
|---|---|
| [JS-중급편-OOP] 11. 부울린(Boolean) 타입과 비교연산자(===, !==) (0) | 2021.01.02 |
| 티스토리 HTML 스킨 편집하기 (0) | 2020.12.31 |
| [JS-중급편-OOP] 10.클래스 (0) | 2020.12.30 |
| [JS-중급편-OOP] 9.빌트인 객체 확장 (0) | 2020.12.27 |