테페리넷

사용자 도구

사이트 도구

현재 위치: 테페리넷 » Problem Solving » Syntax Highlighter
ps:syntax_highlighter

Syntax Highlighter

  • 코드를 페이지에 올리기 위해 사용할 Syntax Highlighter을 찾아봤다.
    • 주로 올리게 될 언어는 Python과 C++이겠지..
    • 사실 많은 기능은 필요 없다. 기능적으로는 라인 넘버를 붙여주는 기능정도만 있으면 좋겠고, 나머지는 그냥 적당히 눈에 안거슬리는 디자인으로 가볍고 빠르고 안정적이면 충분.
  • 가장 간단한 방법은 도쿠위키 자체에서 기본적으로 제공하는구문 강조 기능
    • 그러나 기능이 부실하고 디자인이 별로.. 탈락
  • 도쿠위키 플러그인에도 highlighter들이 여러 종류 있다. 널리 쓰이는 JS기반의 오픈소스 highlighter들을 도쿠위키 플러그인으로 래핑한것들이다
    • Code Prettifier Plugin 은 google-code-prettify에 기반한 플러그인이다.
      • 5개의 스킨이 기본 제공된다. (링크)
        • Sunburst와 Sons-Of-Obsidian은 둘다 예쁘고 맘에 드는 테마.
      • 그러나 이 플러그인의 문제점은 문법 분석. Python 문법 분석을 c-like language로 같이 처리하는데, 이때 Python의 예약어가 아닌 built-in 함수들에 대해서는 하이라이팅을 해주지 않는다. 그리고 연산자도 따로 하이라이팅을 안해준다. 그래서 하이라이팅이 적용된 코드를 보면 꽤나 심심하다..
          • sons-of-obsidian 스킨
        • 소스코드를 뒤져보면 파이썬에 적용되는 키워드는 이것뿐.
          •   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"];
    • SyntaxHighlighter4 Plugin 은 SyntaxHighlighter v4에 기반한 플러그인이다.
      • 기능도 많고, Code Prettifier Plugin과는 달리 내장 함수도 잘 하이라이트 해준다.
      • 문제는.. 7개의 기본 테마가 제공되는데, 그중에 마음에 드는 것이 단 한개도 없다.
        • 테마 스크린샷 - https://tistory.noo9ya.com/64
        • 촌스러운 형광색 위주이거나, 가독성이 떨어지는 어두운 빨강색으로 표시되는 테마들을 제외하면 남는게 없다. 아무리 디자인에 무신경한 나로서도 용납이 안되는 수준.. ㅜㅜ
        • .
          • 그나마 가장 봐줄만한 테마인 Midnight
    • DokuPrism plugin은 Prism JS에 기반한 플러그인이다.
      • 원래 라이브러리의 기능은 풍부하고, 기본 스킨에도 괜찮은 것들이 있다. 그러나 문제는 플러그인에서 이것들을 지원하지 않는다..ㅜㅜ
      • 기본 라이브러리 소스를 다운로드 받을때 코드 경량화를 위해서 꼭 필요한 스킨과 기능만 선택해서 포함시키도록 되어있다. 도쿠위키 플러그인을 설치할때 포함된 라이브러리 소스는 기본스킨이 적용되어 있고 다른 기능은 추가되어 있지 않은 코드이다.
      • 예시
        • 플러그인에 포함된 기본 테마인 Default
  • 결국 그대로 사용할 수 있는 솔루션 중에서는 마음에 드는 것이 없고, 최소한의 노력이 필요한 상황. 고민끝에 DokuPrism plugin을 커스텀 스킨을 사용하도록 (최대한 간단하게) 수정해서 쓰기로 했다.
    • prism js 사이트에서, Tomorrow Night 스킨 + line numbers plugin 을 포함시켜서 새로 다운로드를 받은 후에, 도쿠위키의 플러그인 디렉토리에 복사.
    • line numbers기능이 적용되도록 /lib/plugins/dokuprism/syntax/code.php 파일을 수정. 71번 라인에 line-numbers를 추가.
      • $renderer->doc .= '<pre class="plain line-numbers"><code class="language-'.$language.'">';
    • 그러나 행번호가 여전히 안보임. 디버깅해보니, 플러그인은 도는데 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()

토론

댓글을 입력하세요:
N J N G᠎ Q
 
ps/syntax_highlighter.txt · 마지막으로 수정됨: 2020/11/14 12:58 저자 teferi