Notepad ++ 과 크롬 마크다운 프리뷰 확장 사용

 

마크다운 에디터를 PC 에서 사용하고 싶은데, 마음에 드는 게 없네요. 속도나 성능이나 안정성을 모두 만족시키면서 제가 원하는 옵션을 제공하는 에디터를 찾는 게 쉽지 않네요. 저는 교실에서 텍스트뷰어를 겸해서 사용하고 싶기 때문에 아래의 요건을 충족해야 사용할 수 있습니다.

  1. 무설치 옵션을 제공해야 한다.
  2. 가볍고 빨라야 한다.
  3. 화면의 확대와 축소가 단축키나 마우스휠로 가능해야 한다.

또한, 마크다운으로 원고를 쓰고 원하는 서식을 적용해서 인쇄할 때 제가 만들어놓은 스타일시트를 쉽게 적용하기를 원하죠.

  1. 사용자가 설정한 CSS 를 적용하여,
  2. PDF 등으로 쉽게 뽑아낼 수 있어야 한다.

그리고 기본적으로 프로그램이 안정적이고 사용성이 뛰어나면 좋겠습니다.

  1. 가볍고 빠르게 실행되며, 운영체제 버전이 달라도 안정적으로 굴러가야 한다.

아톰 에디터 사용 후기

라이트몽키는 수 년 동안 즐겨 사용하던 프로그램입니다. 강력한 기능을 자체적으로 제공하면서, 집중해서 글 쓰기에 이만한 게 없다고 생각될 정도로 애용했는데, 역시 한글 윈도우 상황에서 가끔씩 뿜어내는 오류가 해결이 안 되네요. 하나의 머신에서 여러 폴더에 해당 프로그램을 두고 사용하면서 뭔가 얽혔는지 최근에 실행 자체가 안 되기에 이르렀는데, 제작자가 베타 버전으로 예고한 WM3 를 사용해보니 뭔가 개발 방향이 제가 예상했던 가벼운 텍스트 에디터에서 점점 벗어나는 것 같아서 이 참에 메인 글쓰기 도구를 바꿔보려고 조사에 들어갔습니다.

나름 찾은 건 아톰 에디터를 글쓰기 도구로 사용 하는 방법인데, 여러 가지 면에서 좋은 선택이라고 생각하지만, 더블 클릭 이후에 최초 실행까지 5초 내외가 걸리면서 스크롤이 버벅이는 환경을 참아주기가 힘들더군요. 아무리 자동차가 성능이 좋고 훌륭해도 자동차 문 열고 출발하는 데 매번 5분을 기다려야 한다면? 또 에어컨도 잘 나오고 시트도 좋은데 주행 중 계속 틱틱 거리는 소리가 들린다면? ….

결국 Notepad++을 요즘 더 많이 쓰고 있네요.

Notepad ++ 글쓰기 도구로 사용하기

원래 코딩용 텍스트 에디터라서 마크다운 에디터로 전용하기에는 아쉬운 점이 많이 있습니다.

  1. 헤더나 링크 주소 등 문법 강조가 힘들다.
  2. 미리보기 화면 없음
  3. 기타 PDF 내보내기 기능이 없거나 설정이 귀찮다

노트패드 ++ 에서 마크다운 문법 강조하기

1번의 문법 강조는 깃헙의 Edditoria/markdown_npp 의 자료를 이용하면 조금 해결 가능합니다.

위 그림처럼 마크다운 문법이 강조되는 효과가 있죠. 하지만 최종 사용을 포기하게 되었는데, 가령 본문 중간에 1. 과 같은 부분을 강조해버린다든가, *하나 둘* 이렇게 별표 사이에 빈 칸이 있는 경우 인접한 첫 단어만 강조한다든가 뭔가 표시 기준이 오히려 사람 헷갈리게 하더군요. 걍 없이 쓰던가 notepad++의 사용자 지정 언어 설정에서 표시하기 원하지 않는 부분들의 스타일링은 수정/삭제하여 사용하면 됩니다.

가령 라인 첫 머리에 #로 시작하는 경우 주석 스타일링을 적용하여 색깔을 바꾸는 건 예외 없이 마크다운 문서에서 헤더를 잘 강조할 수 있는 규칙이어서 적용된 상태로 두어도 좋겠어요.

노트패드 ++에서 문서 구조 보기

TOC라고 하나요, 마크다운 헤더의 위계를 정리해서 보여주는 맵map 이 있으면 분량이 긴 문서의 경우 편집이 더욱 용이해지는데, 노트패드++은 마크다운 전용 에디터가 아니라서 그런 기능이 없거든요. 때문에 저는 … Ctrl + F 버튼을 눌러 일반 텍스트 찾기 창을 띄우고, ##을 찾을 내용에 쓰고, “현재에서 모두 찾기” 버튼을 누르는 방식으로 문서의 구조를 봅니다.

완벽하진 않지만, 그래도 아쉬우나마 헤더 사이를 점프하기 좋아요.

폰트, 줄간격 등

요즘 24인치 모니터 많이 쓰죠? 설정의 스타일 메뉴에서, 글로벌 스타일을 ‘나눔고딕 굵게’ 정도로 설정하고 기본 폰트 크기도 좀 키워두니 쓸만하네요.

또한 줄간격의 경우 Global Styles 하위의 Line number margin 스타일의 글자 크기를 조절하는 방식으로 아쉬우나마 조정 가능합니다. 라인넘버를 표시하는 숫자도 덩달아 커지기 때문에 저는 이 숫자 폰트의 색을 쉽게 눈에 띄지 않게 해서 집중을 방해하지 못하도록 하였습니다.

또한 환경 설정의 자동완성 메뉴에서 단어 완성도 꺼주시는 게 좋을 거 같습니다. 비슷한 한글 단어가 나올 때마다 팝업이 뜨는데 타이핑 하면서 꽤 신경쓰이더군요.

뭔가 귀찮은 점이 있지만, 대신 속도와 안정성 만큼은 빠릿합니다. 아톰 에디터와 비교할 수 없는 실행 속도는 물론, 작성 과정에서도 버벅임이 전혀 없고 너무나 쾌적하네요.

크롬 – 마크다운 프리뷰 확장

작성이야 텍스트 파일이니 버틴다고 해도 결과적으로 작성한 파일의 프리뷰가 필요할 때가 있겠죠. 프리뷰와 PDF 인쇄 측면은 notepad ++ 에 플러그인을 설치하기보다 아예 크롬 쪽에서 해결하는 방법이 있었네요.

크롬 웹스토어에서 markdown preview 로 검색하면 몇 개가 검색되는데, 제가 추천하는 것은 MarkView 라는 확장입니다. 이 확장은 다음과 같은 기능이 있습니다.

  1. 컴퓨터에 있는 .md 파일을 크롬에 드래그앤드롭 하면, 미리보기 화면을 보여준다.
  2. 기본적으로 TOC(목차 미리보기), 테이블 나타내기가 포함되어 있고, Github 강조문법에 준하게 예쁘게 나온다.
  3. 로컬 .md 파일이 바뀌면 바로바로 미리보기 화면에 적용된다.
  4. 커스텀 CSS 파일을 지원하고 쉽게 전환이 가능하다.
  5. PDF 전환은 브라우저에서 인쇄 단계에서 하면 된다.

아쉬운 점이라면,

  1. 텍스트 에디터와 브라우저는 별개의 프로그램이므로 스크롤 동기화는 되지 않음
  2. PDF 인쇄 시 헤더/푸터를 넣거나 가릴 수 있지만, 그 내용까지 사용자가 고치도록 크롬이 배려하지 않기 때문에 푸터 대신 헤더에 페이지 번호를 넣는다거나, 푸터에 문서 제목을 새로 직접 적어 넣는다거나 한다는 게 불가능하다.
  3. 커스텀 CSS는 로컬의 유저 폴더 안에 저장되기 때문에 동기화가 안 됩니다. 따라서 두 대의 컴퓨터에서 사용할 경우 커스텀 설정을 여러 번 해야 함.

설치 과정

설치야 뭐 크롬웹스토어에서 하면 되는데, 주의할 것은 크롬의 확장프로그램 설정 화면 – chrome://extensions/에서 해당 프로그램에게 “파일 URL에 대한 엑세스 허용” 권한을 주어야 합니다. 그렇지 않으면 크롬 브라우저가 컴퓨터에 있는 .md 파일을 열어 미리보기 내용으로 바꾸지 못하게 됩니다.

PDF 인쇄

크롬의 인쇄 옵션에도 PDF 저장 기능이 있는 걸로 알고 있고, 좋아하는 가상 프린터 사용하며 됩니다. 저는 Foxit PDF Reader 깔면 같이 깔리는 거 좋아서 그거 써요. 화질 조정 등의 옵션이 추가되어 있는데 일상적인 사용에서는 크게 차이가 없습니다.

CSS 스타일 적용

기본적으로 MarkView의 옵션 화면에서 바로 사용자 스타일을 입력할 수도 있고, 파일을 업로드할 수도 있습니다. 적용할 스타일 변경은 MarkView 의 옵션 화면으로 진입해서 간단히 해결됩니다.

사용자 CSS는 Theme CSS 와 Code Style CSS 를 따로 구분해서 올릴 수 있도록 되어 있어요. 코드 스타일이야 그렇게 자주 쓰는 것도 아니고 불만이 없어서 만질 일이 없을 듯 합니다.

위에 보시면, MarkView 에서 기본 제공해주는 스타일 옵션도 인쇄해서 보기에 꽤나 이미 훌륭하기 때문에 맘에 드시면 그냥 쓰셔도 되지요. 테마 CSS 중에 Numeric-Outline 스타일은 TOC에 자동으로 넘버링된 헤더를 보여주어서 미리보기할 때 바로 점프도 되고 ~ 무척 편리합니다. 그런데 인쇄할 때는 이런 TOC가 표시되지 않죠. 인쇄용 CSS는 또 따로 적용됩니다. 다 괜찮은데 저는 바탕체처럼 나오는 게 싫더군요.

위에서 보시다시피 미리보기 화면에서 브라우저에서 볼 때는 분명 고딕체였는데, 종이나 PDF에 인쇄하려고 보면 삐침 있는 서체로 바뀌어 있습니다. 이런 서체 변경을 포함해서 미리보기 / 인쇄 시의 스타일을 사용자가 직접 조정하려면 CSS 파일을 만들어서 직접 적용해줘야 하겠습니다.

MarkView 스타일 수정

평소 좋아하는 스타일시트 파일을 이미 만들어두셨으면 바로 적용하면 되겠습니다만, 저는 기존에 MarkView 확장이 사용하는 스타일시트를 가져와서 수정해서 사용하기로 했습니다.

크롬브라우저 확장은 크롬웹스토어의 주소줄에 있는 문자열에 해당하는 폴더를 확장 설치 폴더에서 찾아 들어가는 방식으로 내부 파일을 들여다볼 수 있는데, (사용자)/AppData/Local/Google/Chrome/User Data/Default/Extensions 폴더 안에서 찾으면 됩니다.

MarkView의 아이디 문자열은 ehnambpmkdhop.... 로 시작합니다. 안에 들어가보면 css 폴더가 있어요. 거기에 있는 markdown.css 파일이 기본 스타일 소스인데, 이거 복사해서 좀 고쳐서 다시 불러들여 사용하면 됩니다. minify되어 있는데 구글링하면 다시 beatify – 펼쳐주는 사이트 있으니까 활용하면 되고요.

특히 크롬에서 인쇄할 때의 스타일은 @media print 부분을 고쳐주면 되지요. 제 경우에는 가령 <strong> 태그 처리된 부분을 브라우저에서는 굵은 글씨로 보여주다가 인쇄할 때는 빈 칸으로 보여준다거나 하는 스타일시트를 만들어볼까 하고 있어요. 문제/정답 파일 두 번 만드는 수고를 수업 시간에 덜 수 있을 거 같아서 원고는 하나만 만들고 인쇄할 때만 스타일시트를 바꿔가면서 활용하는 거죠… 아직 안 해봤지만.. 쩝.

/* 인쇄 시 모양 */

@media print {
#markdown-wrapper {
margin: 0 auto;
width: auto
}
#markdown-container {
margin-left: 0%;
width: 100%;
font: 12pt NanumBarunGothic, Georgia, "Times New Roman", Times, serif;
line-height: 2.2
}

혹시 제가 사용하는 스타일 파일 전부를 받고 싶으면 아래를 클릭해주세요. 나눔바른고딕, 나눔고딕을 설치한 컴퓨터에서 예쁘게 보입니다.

 
(2016년 12월)