도쿠위키에 highlight.js 적용하기

https://highlightjs.org/ 의 사용법을 보고 따라 합니다.

https://highlightjs.org/usage/ 에서 Custom Initialization 부분에 있는 내용을 작성합니다.

snippet.javascript

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

도쿠위키에서 제공하는 Include Hooks 가 있습니다.

사용중인 템플릿 폴더에서 pagefooter.html 파일을 생성하여 위의 코드를 수정하여 넣습니다.

지금 bootstrap3 템플릿을 사용하고 있으므로 dokuwiki/lib/tpl/bootstrap3/pagefooter.html 파일을 생성합니다.

snippet.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
jQuery('pre.code').each(function(i, block) {
        hljs.highlightBlock(block);
});
</script>

$ 대신에 jQuery 로 변경합니다. 그리고 상단에 CSS, js 를 포함합니다.

https://cdnjs.com/libraries/highlight.js/ 에서 스타일의 링크를 확인할 수 있습니다.

키워드 문자열의 색상이 변경되어, 어두운 계열의 테마를 사용하면 안보이게 되므로 geshi 를 제외합니다.

dokuwiki/lib/styles/screen.css 파일의 맨 아래에 있는 부분을 주석처리 합니다.

snippet.css

...
 
[dir=rtl] .a11y {
    left: auto !important;
    right: -99999em !important;
}
 
/*@import "geshi.less";*/

사용자 정의 스타일을 사용하여 폰트 크기를 변경합니다.

dokuwiki/conf/userstyle.css 에 내용을 추가합니다.

snippet.css

pre.code {
        font-size: 1.5rem;
}

마크다운으로 작성한 코드는 다음과 같습니다.

snippet.python

import os
cmd = 'ls -al'
os.system(cmd)