https://highlightjs.org/ 의 사용법을 보고 따라 합니다.
https://highlightjs.org/usage/ 에서 Custom Initialization
부분에 있는 내용을 작성합니다.
$('div.code').each(function(i, block) { hljs.highlightBlock(block); });
도쿠위키에서 제공하는 Include Hooks 가 있습니다.
File Name | Position of included HTML |
————— | ———————————————————— |
meta.html | Inside the HTML <head>, use this to add additional styles or metaheaders |
topheader.html | At the very top of the page right after the <body> tag |
header.html | Above the upper blue bar, below the pagename and wiki title |
pageheader.html | Below the breadcrumbs, above the actual content |
pagefooter.html | Above the lower blue bar, below the last changed Date |
footer.html | At the very end of the page just before the </body> tag |
사용중인 템플릿 폴더에서 pagefooter.html
파일을 생성하여 위의 코드를 수정하여 넣습니다.
지금 bootstrap3
템플릿을 사용하고 있으므로 dokuwiki/lib/tpl/bootstrap3/pagefooter.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 파일의 맨 아래에 있는 부분을 주석처리 합니다.
... [dir=rtl] .a11y { left: auto !important; right: -99999em !important; } /*@import "geshi.less";*/
사용자 정의 스타일을 사용하여 폰트 크기를 변경합니다.
dokuwiki/conf/userstyle.css 에 내용을 추가합니다.
pre.code { font-size: 1.5rem; }