블로그 포스팅은 끝날 길이 없어보인다.
하나를 해결하면 하나의 특이점이 나와서..해야 할 게 늘어나버리는 거 같다.
오늘 포스팅하는 내용도 비슷한 맥락이다.
7번째 블로그 포스팅을 마지막으로 더 이상 블로그 만들기에 대한 포스팅을 할 일이 없을거라 생각했는데, 나의 오산이었다. 블로그에 알고리즘 관련 글을 포스팅하려고 하다보니 문제점을 하나 찾았는데, Markdown 코드블럭에 하이라이팅이 되지 않고 있었다.
보통 마크다운운은 ``` 이렇게 따옴표 3개로 열고 닫는 사이에 프로그램 코드를 작성하면 테마에 따라서 표시를 해준다. 클래스명은 클래스명대로, 변수명은 변수명대로, 자료형은 자료형대로, 예약어는 예약어대로..색의 분간을 줘서 보는 사람이 좀 더 편하게 볼 수 있도록 해주는 것이다.
근데 그 기능이 동작하지 않고 있었다.
생각해보면 기존에 올렸던 명령어들에서도 그 동작이 일어났어야 하는건데 그냥 까만 배경에 회색 글씨였는데..이걸 왜 이제서야 눈치챈 건지.
하이라이팅 관련해서는 내가 사용하는 icarus 테마에서 지원하는 기능이 있었다.
highlight.js를 디폴트값으로 해서 _config.yml 파일에 옵션을 줌으로써 제공이 되어야 하는데…실제 띄워놓은 서버를 보니 동작을 하지 않고 있었다.
짧은 코드야 괜찮지만, 코드가 길어질 경우에는 가독성에서 확실히 차이가 난다.
그리고 이 블로그는 기술 블로그이기 때문에 언제, 어떤 식으로든 코드가 올라 올 것이다.
그렇기에 코드 하이라이팅은 중요한 기능 중에 하나라서, 오늘 또 해법을 찾아 이리저리 돌아다녔다.
찾은 방법은 총 3가지였다.
- icarus 에서 제공하는 기본 기능.
- hexo-prism-plugin 이라는 별도의 npm package
- hexo의 기본 기능
결론부터 말하자면 3. hexo의 기본 하이라이팅 기능을 사용하게 되었다.
이유는 간단하다…3번이 너무 강력해서 서버를 띄웠을 때 1,2번이 동작을 하지 않았다.
(물론 내가 1,2번을 정확하게 적용하는 법을 모른 것일 수도 있다.)
해결법부터 소개를 하자면
이것도 결국 7번에 포스팅(이미지 첨부 관련)했던 것과 마찬가지로 태그 플러그인을 사용하게 되었다.
사실 태그 플러그인 페이지를 가봐도 코드에 대해서 Markdown처럼 장문의 코드를 ``` 로 처리하라고 되 있지만..
이걸 사용하면 정말 딱, 코드인 것처럼 보이면서 + 라인 줄 수 정도만 알 수 있다.
사용된 코드가 C인지 Java인지 Javascript인지 SQL인지..알 수가 없다.
하지만 코드 태그 플러그인을 사용하면 어떤 종류의 코드인지를 명시해 줄 수 있고, 명시된 코드의 형태에 따라서 하이라이팅이 적용된다.
사용법은 아래와 같다(실제 사용시에는 중괄호와 퍼센테이지 사이를 붙여야 한다.)
{ % codeblock lang:java % }
코드 작성 부분
{ % endcodeblock % }
이와 같은 형태로 사용해주면 되며 lang 옵션에 내가 사용한 언어의 종류를 적어주면 된다.
lang 옵션을 주지 않으면 그냥 까만 배경에 회색글씨로 표현이 되는 형태로 보이게 되며, 실제로 들어갈 수 있는 값은 highlight.js demo에서 확인할 수 있으며 우리가 사용하는 대부분의 프로그래밍 언어들은 있다고 보면 된다.
1번과 2번
혹시나 나와 달리 1번과 2번 방법들로 성공시켜보고자 하시는 분들이 있을까봐 글을 좀 더 써본다.
1번. icarus에서 제공하는 기본 기능
icarus에서 제공하는 기본 기능에 대한 사용법은 이 링크에 들어가보면 간략히 설명이 나와있는데…
사실 themes > _config.yml 에 있는 customize: 아래에 highlight: 항목에 테마명을 명시하라는 게 전부였다.
그리고 거기에 명시가능한 테마의 이름은 themes > icarus테마 > source > css > _highlight 에서 확인할 수 있음..
겨우 이 설명이 전부였다. 이 설명을 따라 _config.yml 파일에서 테마명을 변경해 봤지만, 동작하지 않았다.
그래서 이 값도 저 값도 바꿔봤지만, 역시나 fail..다른 방법을 모색했고 그러다 찾은 게 아래에 나오는 2번 방법이다.
2번. hexo-prism-plugin 이라는 별도의 npm package
1번의 방법이 실패하고 구글링을 시작했다.
hexo icarus highlight, hexo code highlight, hexo code, hexo markdown code등등..수많은 키워드들로 구글링을 하고 Github Wiki를 봤지만 마땅한 해법이 나오지 않았다.
그렇게 계속 삽질을 하다가 보인 것이 code highlight를 해주는 npm package 였다.
npm-prism-plugin의 설명도 비교적 심플하다.
들어가보면 알겠지만 npm i -S hexo-prism-plugin 로 해당 패키지를 설치하고
블로그 디렉토리 > _config.yml에 관련 옵션값을 설정한다.
그 뒤에 hexo clean, hexo generate를 통해서 정적파일들을 새롭게 빌드하고 서버를 올리면 코드에 하이라이팅이 먹힌다는 게, 해당 패키지의 설명이었다.
단, 이때 hexo가 기본적으로 제공하는 highlight가 disabled 되어야 하므로 _config.yml에서 false로 값을 줘야 했는데…이렇게 하고 서버를 올리니, 데헿, 아예 블럭단위의 코드가 먹지를 않는다
(여러줄의 코드들이 전부 한 줄짜리 코드들처럼 하이라이팅되어 나오더라)
그래서 아,이것도 안되나보다 하고 package.json과 node_modules 디렉토리에 새로 설치된 패키지들을 지우고 어찌해야하나 고민하다가, 아 잠깐? 기본 코드 하이라이팅을 false 해서 다른 애들이 아예 안 먹는거면 가장 강력한 코드 하이라이팅 도구가 hexo의 기본 도구 아닌가? 라는 생각에 도달하였고 그 생각을 바탕으로 hexo 공홈을 뒤지기 시작했다.
그러다 찾은 게 태그 플러그인을 사용하는 코드 블럭 작성이었고, 이 포스팅의 결론과 같은 답을 찾게 된 것이다.
위에서도 말했듯, 3가지의 방법이 있었고 나는 그 중 3번 방법을 택한 것일 뿐이다.
이 글을 참고해서 자신의 블로그에 적용했는데 1번이나 2번 기능이 제대로 동작한다면, 마음에 드는 방법을 선택하며 된다.