이 개발블로그를 구축하면서 가장 골머리를 썩혔던 부분
바로 VBA코드를 코드블럭 안에 넣었을 때 알록달록하게 표현하는 것이었다.
예시 : www.sejuku.net/blog/74582
바로 이런 식으로...
Step 1 : highlight.js 를 적용해보았다
구글링해보면 티스토리를 사용하는 기술블로그에선 highlight.js를 적용하는 경우가 많은 것 같다.
highlight.js는 아래 코드를 <head>에 삽입해서 적용할 수 있다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
참고링크 : highlightjs.org/download/
그런데 문제는, 이 방식을 적용해도 VBA코드는 여전히 아래와 같이 출력된다.
Step2 : 티스토리 코드블럭이 VBA를 지원하지 않기에, 수동으로 HTML수정
티스토리에서 코드블럭을 삽입하려고 하면 언어를 선택하는 창이 드롭다운이 있는데, 여기엔 VBA가 없다.
어쩔 수 없이 임의의 언어(예를 들어 Java)을 선택하고 VBA코드를 삽입해도, VBA가 아니라 Java로 인식되서 의도한대로 색깔이 출력되질 않는다.
(아래의 경우는 제일 앞에 있는 '때문에 코드 전체가 주석으로 인식되어버렸다)
'メッセージボックスを表示するマクロ
Public Sub MsgBoxTest()
MsgBox "Hello World"
End Sub
이유는 생각보다 간단했다.
HTML편집모드로 들어가서 해당 코드블럭을 보면 다음과 같이 변환되어있었기 때문
<pre id="code_1608978867665" class="java" data-ke-language="java" data-ke-type="codeblock"><code>'メッセージボックスを表示するマクロ
Public Sub MsgBoxTest()
MsgBox "Hello World"
End Sub</code></pre>
코드블럭을 추가할 때 선택한 언어가 <pre>태그 안에 class로 지정되어버린 것이다.
이걸 다음과 같이 바꿔보았다.
<pre class="vba vbnet"><code>'メッセージボックスを表示するマクロ
Public Sub MsgBoxTest()
MsgBox "Hello World"
End Sub</code></pre>
결과는 아래와 같았다.
'メッセージボックスを表示するマクロ
Public Sub MsgBoxTest()
MsgBox "Hello World"
End Sub
해결되었다.
매번 포스팅 작성할 때마다 <pre>태그를 수정해줘야 하는게 심각하게 번거롭지만... 어쩔 수 있나....
티스토리 개발팀에 문의하면 반영해주려나...?