# 도쿠위키에 highlight.js 적용하기
https://highlightjs.org/ 의 사용법을 보고 따라 합니다.
https://highlightjs.org/usage/ 에서 `Custom Initialization` 부분에 있는 내용을 작성합니다.
```javascript
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});
```
## 파일 생성
도쿠위키에서 제공하는 [Include Hooks](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](https://www.dokuwiki.org/pagename) and wiki title |
| pageheader.html | Below the [breadcrumbs](https://www.dokuwiki.org/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 파일을 생성합니다.
## 파일 작성
```html
```
`$` 대신에 `jQuery` 로 변경합니다. 그리고 상단에 CSS, js 를 포함합니다.
https://cdnjs.com/libraries/highlight.js/ 에서 스타일의 링크를 확인할 수 있습니다.
## geshi 제외
키워드 문자열의 색상이 변경되어, 어두운 계열의 테마를 사용하면 안보이게 되므로 geshi 를 제외합니다.
dokuwiki/lib/styles/screen.css 파일의 맨 아래에 있는 부분을 주석처리 합니다.
```css
...
[dir=rtl] .a11y {
left: auto !important;
right: -99999em !important;
}
/*@import "geshi.less";*/
```
## 사용자 정의 스타일
사용자 정의 스타일을 사용하여 폰트 크기를 변경합니다.
dokuwiki/conf/userstyle.css 에 내용을 추가합니다.
```css
pre.code {
font-size: 1.5rem;
}
```
## 적용 결과
마크다운으로 작성한 코드는 다음과 같습니다.
```python
import os
cmd = 'ls -al'
os.system(cmd)
```
## 스타일 목록
| 링크 |
| ------------------------------------------------------------ |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/a11y-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/a11y-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/agate.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/an-old-hope.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/androidstudio.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/arduino-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/arta.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/ascetic.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-cave-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-cave-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-dune-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-dune-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-estuary-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-estuary-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-forest-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-forest-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-heath-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-heath-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-lakeside-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-lakeside-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-plateau-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-plateau-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-savanna-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-savanna-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-seaside-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-seaside-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-sulphurpool-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atelier-sulphurpool-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark-reasonable.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/brown-paper.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/brown-papersq.png |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/codepen-embed.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/darcula.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/darkula.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/docco.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/dracula.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/far.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/foundation.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github-gist.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/gml.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/googlecode.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/grayscale.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/gruvbox-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/gruvbox-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/hopscotch.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/hybrid.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/idea.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/ir-black.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/isbl-editor-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/isbl-editor-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/kimbie.dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/kimbie.light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/magula.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/mono-blue.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/monokai-sublime.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/monokai.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/nord.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/obsidian.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/ocean.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/paraiso-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/paraiso-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/pojoaque.jpg |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/pojoaque.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/purebasic.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/qtcreator_dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/qtcreator_light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/railscasts.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/rainbow.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/routeros.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/school-book.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/school-book.png |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/shades-of-purple.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/solarized-dark.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/solarized-light.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/sunburst.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow-night-blue.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow-night-bright.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow-night-eighties.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow-night.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs2015.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/xcode.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/xt256.min.css |
| https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/zenburn.min.css |