# 마크다운 to [Tufte CSS][] 데모 > 직접 내용을 편집해 보세요~ [Tufte CSS][]는 에드워드 터프티[>터프티]가 강의 노트나 책을 쓸 때 쓴 스타일을 바탕으로 만든 웹 스타일 시트이다. 터프티 스타일은 매우 간결하며, 측주[>측주]를 적극적으로 활용하는 점이 특징이다. [>터프티]: 데이터 시각화 분야의 창시자, [위키피디아](https://en.wikipedia.org/wiki/Edward_Tufte) 참고 [>측주]: 측주(sidenote)는 각주의 일종으로 본문 왼쪽이나 오른쪽에 바로 주석을 붙이는 것을 말한다. 첫 문단에서 "에드워드 터프티" 뒤에 작은 숫자 1 표시가 측주를 나타내며, 화면이 충분히 넓은 경우에는 우측에 바로 표시되며, 좁은 경우에는 숫자 표시를 누르면 측주 내용이 펼쳐져 보인다. # 마크다운으로 Tufte CSS 문서를 만들자 마크다운으로 작성한 텍스트를, Tufte CSS로 꾸민 HTML 문서로 만들어 낼 수 있으면 좋겠다고 생각했다. 그러나 아쉽게도 마크다운에는 측주를 표현하는 문법이 없었다. 찾아보니, 각주 표현을 위해 마크다운 문법을 살짝 확장한 방법을 찾을 수 있었고, 이와 유사한 방법으로 아래처럼 쓸 수 있었다. 마크다운 텍스트[>측주ID]에 측주를 달아보자. 이렇게 `[>]`로 측주라는 표시를 하고, `측주ID` 고유값을 구분해 둔 다음, 어딘가[>어딘가]에 부연 설명을 남겨 두는 방법이다. [>측주ID]: 마크다운 텍스트에 대한 측주 설명을 덧붙인다. [>어딘가]: 해당 링크를 처음 쓴 문단 뒤에 곧바로 이어서 쓰거나, 맨 마지막에 모아서 정리한다. # 데모 이렇게 마크다운 문법을 조금 확장한 파서를 만들어 보았고, 지금 보는 페이지가 그 데모이다. 에디터 창[>에디터]에서 내용을 편집하면, HTML로 변환된 내용이 거의 바로 표시된다. [>에디터]: 화면이 넓은 경우 왼쪽에, 좁은 경우에는 위에 위치하도록 했다. # 감사의 말씀 이 작업에는 [Instaparse][]라는 훌륭한 클로저용[>clojure] 파서 생성기를 사용했다. 마크다운 분석에 문제가 있거나, Tufte CSS로 보이는 웹페이지 모습이 훌륭치 못하다면, 오롯이 [데모 페이지 개발자](https://medium.com/@hatemogi)의 문제이며, 원작자의 문제는 아니다. [>clojure]: [ClojureScript](https://github.com/clojure/clojurescript)에서도 쓸 수 있어서, 이 페이지 처럼 JavaScript로도 시연할 수 있다. # 관련 링크 * [소스코드: GitHub 프로젝트](http://github.com/hatemogi/tufdown/) * [개발기 1: 합리화와 사전조사](https://medium.com/happyprogrammer-in-jeju/마크다운-파서-만들기-1-합리화와-사전조사-932a269b7233) * [개발기 2: 인스타파스 연습](https://medium.com/happyprogrammer-in-jeju/마크다운-파서-만들기-2-인스타파서-연습-12b2291a9f8b) * [개발기 3: 어둠의 영역](https://medium.com/happyprogrammer-in-jeju/마크다운-파서-만들기-3-어둠의-영역-be10d140e6b9) * [개발기 3.5: 빛의 놀이중](https://medium.com/happyprogrammer-in-jeju/마크다운-파서-만들기-3-5-빛의-놀이-중-8e5c5c20f7e3) * [개발기 4: 마무리 및 회고](https://medium.com/happyprogrammer-in-jeju/마크다운-파서-만들기-4-마무리-및-회고-a63dd9ef3a33) # 결론 마크다운의 문법을 조금 확장해서, Tufte CSS의 측주를 표현하는 파서를 만들어 봤다. 실험적으로 만들었고, 기본적인 처리에 측추 처리를 덧붙인 것에 불과하지만, 나머지 Tufte CSS를 위한 처리도 어렵지 않게 구현할 수 있을 것으로 보인다. [Instaparse]: https://github.com/Engelberg/instaparse [Tufte CSS]: https://edwardtufte.github.io/tufte-css/