====== Syntax Highlighter ======
* 코드를 페이지에 올리기 위해 사용할 Syntax Highlighter을 찾아봤다.
* 주로 올리게 될 언어는 Python과 C++이겠지..
* 사실 많은 기능은 필요 없다. 기능적으로는 라인 넘버를 붙여주는 기능정도만 있으면 좋겠고, 나머지는 그냥 적당히 눈에 안거슬리는 디자인으로 가볍고 빠르고 안정적이면 충분.
* 가장 간단한 방법은 도쿠위키 자체에서 기본적으로 제공하는[[https://www.dokuwiki.org/ko:syntax#%EA%B5%AC%EB%AC%B8_%EA%B0%95%EC%A1%B0|구문 강조]] 기능
* 그러나 기능이 부실하고 디자인이 별로.. 탈락
* 도쿠위키 플러그인에도 highlighter들이 여러 종류 있다. 널리 쓰이는 JS기반의 오픈소스 highlighter들을 도쿠위키 플러그인으로 래핑한것들이다
* [[https://www.dokuwiki.org/plugin:codeprettify|Code Prettifier Plugin]] 은 [[https://github.com/googlearchive/code-prettify|google-code-prettify]]에 기반한 플러그인이다.
* 5개의 스킨이 기본 제공된다. ([[https://raw.githack.com/google/code-prettify/master/styles/index.html|링크]])
* Sunburst와 Sons-Of-Obsidian은 둘다 예쁘고 맘에 드는 테마.
* 그러나 이 플러그인의 문제점은 문법 분석. Python 문법 분석을 c-like language로 같이 처리하는데, 이때 Python의 예약어가 아닌 built-in 함수들에 대해서는 하이라이팅을 해주지 않는다. 그리고 연산자도 따로 하이라이팅을 안해준다. 그래서 하이라이팅이 적용된 코드를 보면 꽤나 심심하다..
* {{:ps:code_prettify.png?497}}
* sons-of-obsidian 스킨
* [[https://github.com/googlearchive/code-prettify/blob/master/src/prettify.js#L205|소스코드]]를 뒤져보면 파이썬에 적용되는 키워드는 이것뿐.
*
var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
"elif,except,exec,finally,from,global,import,in,is,lambda," +
"nonlocal,not,or,pass,print,raise,try,with,yield," +
"False,True,None"];
* [[https://www.dokuwiki.org/plugin:syntaxhighlighter4|SyntaxHighlighter4 Plugin]] 은 [[https://github.com/syntaxhighlighter/syntaxhighlighter|SyntaxHighlighter v4]]에 기반한 플러그인이다.
* 기능도 많고, Code Prettifier Plugin과는 달리 내장 함수도 잘 하이라이트 해준다.
* 문제는.. 7개의 기본 테마가 제공되는데, 그중에 마음에 드는 것이 단 한개도 없다.
* 테마 스크린샷 - [[https://tistory.noo9ya.com/64]]
* 촌스러운 형광색 위주이거나, 가독성이 떨어지는 어두운 빨강색으로 표시되는 테마들을 제외하면 남는게 없다. 아무리 디자인에 무신경한 나로서도 용납이 안되는 수준.. ㅜㅜ
* {{:ps:syntaxhighlighterv4.png?547}}.
* 그나마 가장 봐줄만한 테마인 Midnight
* [[https://www.dokuwiki.org/plugin:dokuprism|DokuPrism plugin]]은 [[https://prismjs.com/index.html|Prism JS]]에 기반한 플러그인이다.
* 원래 라이브러리의 기능은 풍부하고, 기본 스킨에도 괜찮은 것들이 있다. 그러나 문제는 플러그인에서 이것들을 지원하지 않는다..ㅜㅜ
* 기본 라이브러리 소스를 다운로드 받을때 코드 경량화를 위해서 꼭 필요한 스킨과 기능만 선택해서 포함시키도록 되어있다. 도쿠위키 플러그인을 설치할때 포함된 라이브러리 소스는 기본스킨이 적용되어 있고 다른 기능은 추가되어 있지 않은 코드이다.
* {{:ps:dokuprism.png?539|예시}}
* 플러그인에 포함된 기본 테마인 Default
* 결국 그대로 사용할 수 있는 솔루션 중에서는 마음에 드는 것이 없고, 최소한의 노력이 필요한 상황. 고민끝에 DokuPrism plugin을 커스텀 스킨을 사용하도록 (최대한 간단하게) 수정해서 쓰기로 했다.
* prism js 사이트에서, Tomorrow Night 스킨 + line numbers plugin 을 포함시켜서 새로 다운로드를 받은 후에, 도쿠위키의 플러그인 디렉토리에 복사.
* line numbers기능이 적용되도록 /lib/plugins/dokuprism/syntax/code.php 파일을 수정. 71번 라인에 line-numbers를 추가.
* $renderer->doc .= '';
* 그러나 행번호가 여전히 안보임. 디버깅해보니, 플러그인은 도는데 css 문제로 화면에 안 보이는 상태
* 플러그인 제작자가 /lib/plugins/dokuprism/style.css 에서 글자 폰트를 바꾸고 사이즈를 줄이는 등 몇가지 css 룰을 추가했는데, line number 엘리멘트랑 안맞음.. 그래서 그것들을 삭제시킴
*
pre.plain > code {
box-shadow: none;
/*
font-size: 0.85em;
line-height: 1;
font-family: "Roboto Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
*/
}
div.page pre[class*="language-"] {
padding-top: .3em;
padding-bottom: .3em;
}
* 최종 결과
*
def median(pool):
'''Statistical median to demonstrate doctest.
>>> median([2, 9, 9, 7, 9, 2, 4, 5, 8])
7
'''
copy = sorted(pool)
size = len(copy)
if size % 2 == 1:
return copy[(size - 1) / 2]
else:
return (copy[size/2 - 1] + copy[size/2]) / 2
if __name__ == '__main__':
import doctest
doctest.testmod()
* 2026년 업데이트
* gh plugin (https://www.dokuwiki.org/plugin:gh) 을 이용해서 코드를 복붙하는게 아니라 github에 올린 코드를 자동참조하도록 바꿨다
* 문제는 gh plugin을 통해 렌더링되는 코드는 기본적인 code나 file tag를 이용해서 나오는 하이라이팅을 따른다. 그래서 gh plugin의 코드를 고쳤따.
* syntax.php 파일에서
* $renderer->file($text, $lang); 이부분을
*
$renderer->doc .= '';
$renderer->doc .= trim($text);
$renderer->doc .= '
'; %%
이렇게 바꿈
* 그리고 userstyle.css 에 .dokuwiki dl.file pre.plain {border-style: none;} 를 추가