[블로그] CodeMirror Gist테마 css

블로그에서 GIST 처럼 가독성있는 코드블럭을 보여주기 위해서 여러 시도들을 해왔다.

몇달이 걸렸지만, 결국 성공했다.
Gist 사이트가 제공하는 highliter가 codeMirror에서 제공되는 것이라는 것을 알게된 후, codeMirror 플러그인을 설치했었다.
하지만 그 이후 워드프레스 플러그인에 대한 이해가 부족해서, 어떤식으로 플러그인이 작동하는지 감을 못잡고 있었다.

그러다가 최근 CSS를 다시 공부하면서, gist 테마를 만들어봐야겠다고 결심했고, 다시 플러그인을 분석했다.
백업을 하면서 사이트 구조를 들여다 본 것이 도움이 되었다.

codeMirror 플러그인에서 테마를 담당하는 부분은 관리자 페이지에서 접근할 수 없는 위치에 있었다. vendor 폴더 내 codeMirror 라이브러리 안에 위치하고 있었기 때문이다.

플러그인 폴더내의 vendor 폴더로 들어가야 codeMirror 라이브러리가 보인다.


그렇기 때문에 플러그인 수준에서는 이 테마를 직접 변경하는 것이 불가능 했고, 결국 플러그인을 직접 다운받아 압축을 풀어서 테마 파일을 추가하였다.

css를 처음 부터 만든 것이 아니고, 기존 github staff이 올려놓은 레포지토리를 찾을 수 있었다.
확인해보니 4년전 업데이트가 마지막이었고, 현재 GIST 테마와는 조금 다른 부분들이 있어서, 이를 포크해서 수정하였다.

완벽한건 아니고, 보면 메소드명이 code 에서 variable로 인식되는 문제가 있어서, 인접 형제 선택자를 가지고 강제적으로 색을 지정을 해준 부분이 꽤 있다.
codeMirror 플러그인 문제인것 같은데, 워드프레스로 옮기면서 코드들이 제대로 반영이 안되는 것 같다.

오리지널 Gist.github.com 에서 만든 스니펫
gist 테마를 적용한 codeMirror 블럭

chlyoo/codemirror-github-light: Codemirror GitHub syntax theme