프로그래밍을 배워나가는 과정에서 내 발자취를 기록해보자!!라고 다짐한 지 어언 1년 정도..
그동안 여러 플랫폼(네이버블로그, 브런치, medium, github.io....)을 거쳐 티스토리에 정착하게 되었다.
- 글을 쓴다는 것이 적지 않은 부담인 내게 접근성이 꽤나 좋다는 것.(깃헙 블로그를 짧게 하면서 마크업 때문에 스트레스를...)
- 다소 주관적일 수 있으나, 디자인이 상당히 깔끔하고, 제공하는 기본 템플릿도 마음에 들었다.
- 나름 개발블로그의 목적을 가진 만큼 필수요소인 소스코드 기록에 대한 부분도 나쁘지 않다는 것.(기본으로 제공하는 기능인 코드블럭)
오늘 이 글을 작성하게 된 이유는 바로 세 번째 항목인 소스코드 기록에 대한 부분 때문이다.
열심히 짠 코드들을 더 예쁘게 기록하고 싶지만 티스토리에서 기본적으로 제공하는 코드 문법 강조 플러그인은 썩 마음에 들지가 않았다.
구글링 하던 중에 발견한 만족스러운 방법이 바로 highlight.js를 이용하여 코드블럭을 약간 수정하는 것이었다.
1. highlight.js 홈페이지
https://highlightjs.org/ 에 접속하여 Get version을 클릭하여 나온 화면이다.
내 블로그의 HTML 편집에서 </head> 앞에 아래의 소스를 추가하면 된다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script> <!-- 이부분은 따로 추가한 것 -->
위의 두 줄(link 태그와 script 태그)은 화면에 보이는 스크립트를 그대로 복사, 붙여넣기 한 것이고 세 번째 줄은 따로 추가한 것이다.
정리하자면,
1. 사이트에 접속하여 Get version을 클릭하여 나온 소스코드와
2. <script>hljs.initHighlightingOnLoad();</script>
3. 이 모두를 내 블로그의 HTML 소스의 </head> 태그 앞에 포함한다.
2. 테마 변경
사실 내가 마음에 들었던 부분은 바로 이 부분이다.
https://highlightjs.org/static/demo/ 에 접속하면 이런 화면이 보인다.
왼쪽 아래 Styles가 선택할 수 있는 테마 종류인데 저어어엉말 많다!!!
Language categories에서 사용하는 언어를 고르고, Styles에서 테마를 고르면 적용한 모습을 바로 볼 수 있다.
나는 Atelier Cave Dark가 마음에 들었다.
적용법은 매우 간단하다!! 위에서 복붙했던 소스를 조금만 수정하면 되기 때문이다!!
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/default.min.css">
여기에서 default.min.css 에서 default를 atelier-cave-dark로 수정하기만 하면 완성이다.
대문자는 소문자로, 공백은 - 로 대체하여 입력하면 된다!!