제가 쓰는 글은 그리 대단한 코드는 없습니다. 그러나 가끔 박스 치고 고정폭 글꼴을 쓰고싶을 때가 있습니다. 박스 치고 글꼴 바꾸는게 귀찮아서 좀 편한 방법이 없나 알아보다가, 덜컥 소스코드 문법 하이라이트 플러그인을 설치했습니다. 원래 원했던 바 손이 편해지는 일은 없습니다만, 그래도 좀 이뻐지지 않으려나요?
대개는 SyntaxHighlighter를 쓰시던데, FlexGet에서 사용하는 YAML syntax가 없었습니다. 깃어브에 js 파일이 하나 떨렁 올라와있긴 하던데, 그걸 어찌해야 추가할 수 있는지 모르겠더라구요. 그래서 YAML syntax 포함되어 있는 highlight.js를 설치했습니다. 생긴 것은 SyntaxHighlighter 조금 떨어지는 것 같습니다만, 제 두어줄 짜리 코드를 보여주는데는 아주 충분합니다. 설치도 간편하고 사용법은 SyntaxHighlighter와 동일하고 뭐 좋네요.
- 설치방법: http://blog.eedler.com/6
- 홈페이지: https://highlightjs.org/
- 포함한 syntax: asciidoc, bash, cpp, dockerfile, php, python, ruby, xml, yaml
몇 개 고르지도 않았는데 클릭 실수가 있네요. cpp, ruby는 필요 없지만 그냥 두는 것으로..
- 스타일은 달랑 한 개: agate.css
highlight.js를 사용할 때는 편집기에서 HTML 버튼을 누른 후, 코드 삽입 위치에 아래 처럼 입력하면 됩니다.
- bash 예시
<pre><code class="bash">//패키지 목록 갱신
$ sudo apt-get update
</code></pre>
//패키지 목록 갱신
$ sudo apt-get update
- yaml 예시
<pre><code class="yaml">#자동반복
schedules:
- tasks: [task1, task2]
schedule:
hour: 20-23
minute: "*/15"
</code></pre>
#자동반복
schedules:
- tasks: [task1, task2]
schedule:
hour: 20-23
minute: "*/15"
쩝.. 애석하게도 주석에서 오류가 납니다. <br />로 줄바꿈이 되면 다음줄도 주석 색깔로 표시되네요, 이런.. <br /> 없이 그냥 엔터로 줄바꿈 해서 코드를 입력했을 경우, 출력된 소스코드를 카피해서 다른 곳에 붙여넣으면 줄 바꿈 없이 한 줄로 나오네요. 원인은 모르겠고 그냥 살기로 했습니다. 나중에 후회하려나요?
