도쿠위키에 highlight.js 적용하기
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 , use this to add additional styles or metaheaders |
| topheader.html | At the very top of the page right after the 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 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 제외
키워드 문자열의 색상이 변경되어, 어두운 계열의 테마를 사용하면 안보이게 되므로 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;
}
적용 결과
마크다운으로 작성한 코드는 다음과 같습니다.
import os
cmd = 'ls -al'
os.system(cmd)
스타일 목록
'Application > Wiki' 카테고리의 다른 글
| [도쿠위키] 파일명 인코딩을 url 에서 utf8로 변경하기 (0) | 2018.09.06 |
|---|---|
| 도쿠위키에서 textarea 크기 조정 (0) | 2017.12.15 |
| 도쿠위키에서 reveal.js 사용하기 (0) | 2017.07.11 |
| 도쿠위키 Changes Plugin (0) | 2017.06.23 |
| [dokuwiki] - snippet 안보이게 처리 (0) | 2017.06.15 |
댓글