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월)

7 thoughts on “Notepad ++ 과 크롬 마크다운 프리뷰 확장 사용”

  1. 서울비 님 덕분에 라이트몽키 3을 잘 쓰고 있는 사람입니다.
    라이트몽키에서 한글폰트가 잘 나오지 않는다고 하셨는데, 저는 그런 경우가 없었습니다.
    다만 라이트몽키 2와는 달리 3에서는 theme에 있는 css 파일에 폰트명을 직접 써줘야 하는 불편이 있죠.
    그것도 한글폰트 이름은 보통 알고 있는 이름이 아니라 라이트몽키가 인식하는 한글폰트 이름으로 써줘야 나온다는 걸 알게 되었습니다.
    예를 들면 폰트 이름 내에 띄어쓰기라든가……
    라이트몽키 2를 더욱 버릴 수 없는 이유가 됐죠.
    2에서는 나열된 한글폰트를 그냥 고르기만 하면 되니까요.

    마크다운도 저는 처음에 아래아한글 대신에 쓰라는 건 줄 알았습니다.
    멀쩡히 잘 쓰고 있는 아래아한글을 왜 안 쓸까?
    그게 아니고 html 대신에 쓰라는 건데.
    이제는 마크다운도 즐겨 쓰게 되었습니다.
    다시 한 번 고맙다는 말씀을 드립니다.

    1. ‘플레인 텍스트’ 환경에 익숙해지셨단 이야기로 들립니다.

      말씀하신대로 라이트몽키3에서 개선된 것도 있지만 이전의 장점이 사라진 느낌이 드네요.

      참고로 CSS에서 폰트이름 정도는 쉽게 수정 가능하니까 라이트몽키2에서도 자신의 스타일시트를 제작해서 백업해두는 걸 추천드립니다.

  2. chrome web store에서 markview라고 검색하면 서울비 님이 말씀하신, Shane Weng이 만든 게 아니라 다른 markview가 나오네요.
    Shane Weng이 만든 markview도 분명히 있는데 검색에는 나오지 않고.
    그것 참.

    typora에도 full screen mode가 있는데 그래도 저는 라이트몽키에 글을 쓰는 게 더 좋습니다.
    글이라고 해야 일기뿐이지만요.

    1. 저도 잘 검색이 안 되네요. 일단 거부되어 내려간 것 같지는 않아요.
      아래 링크로 접속해보세요.

      설치링크: https://chrome.google.com/webstore/detail/markview/ehnambpmkdhopilaccgfmojilolcglhn
      제작자Shane Weng의 블로그: http://shaneweng.com/2017/09/27/an-introdcution-to-markView/


      typora 많이 쓰시는데 저는 요즘 사실 그냥 Notepad++ 로 작성 후 크롬으로 미리보기해서 MarkView로 최종 인쇄하거나 PDF 변환하는 일이 더 많은 거 같습니다.

  3. 라이트몽키 3에 대해서 서울비 님이 불만을 가질 만도 하네요.
    어쩌다 보면 글 내용이 파일에서 없어지기도 하고, 백업파일이 갑자기 생기기도 하고.

    제가 theme css 파일을 내 입맛대로 바꾸는 데 재미가 들어서는 막 바꿨죠.
    그런데 default-dark.css 파일의 background-color만 바뀌지가 않더군요.
    다른 건 다 바뀌는데.
    바탕이 검은 색이 싫어서 바꾸려는데 아무리 해도 바뀌지가 않아요.
    베타 버전이라서 그런가, 또 구글링을 해 봐도 별다른 것도 없고.
    결국은 싹 지우고 다시 깔았더니 그제야 바뀌더군요.
    저처럼 일기나 쓰면 모를까 전문적으로 쓰기에는 많이 헷갈리는 것 같아요.

    또 chrome의 markview는 toc(table of contents)가 글을 딱 가리더군요.
    움직이지도 않고.
    그래서 저는 markdown preview plus로 바꿨습니다.

    1. 라이트몽키3로 개발자가 버전업을 예고한 이후 저는 라이트몽키로 더 이상 글을 작성하지 않고 있네요.
      현재는 notepad++ 를 조금 고쳐서 그런대로 쓰고 있습니다.
      빠르고 에러가 없다는 면에서 만족하고 있지만, 아무래도 라이트몽키가 주는 집중감은 떨어지는 게 사실입니다.

      1) 먼저 내용 유실에 대해 말씀하셨는데, 제가 DB 기반 서비스를 싫어하는 이유 중 하나입니다.
      내 컴퓨터에 .txt 파일이 있고, 그걸 드롭박스에서 열든, 노트작성 소프트웨어에서 열든 … 나중에 해당 프로그램이 마음에 안 들거나 서비스가 종료되어도
      다른 대안을 찾기가 쉬워야 한다고 생각하고 그래서 라이트몽키를 사용했는데 …
      자체적인 DB 덩어리를 만들어 관리하기 시작하면 호환성에 큰 문제가 생기게 됩니다.
      제작자는 파일시스템도 병렬로 지원한다고 하지만 프로그램이 더 복잡해지고 이용자도 헷갈리기 시작할 거 같습니다.

      2) 제작자는 프레임워크 관련 호환성 때문에 특히 아이안 언어계 사용자들이 큰 불편을 겪는다는 걸 알면서도 적극 지원해주지 않았습니다.
      가볍고 아름다운 기본 텍스트 에디터의 기조는 유지하면서 속도, 안정성, 버그잡기를 바랐는데 … 현실은 이상한 버전 3 런칭이었네요.

      3) 기본 테마 스타일시트에서 배경이 안 바뀐다니… ㅠㅠ …
      여튼 이런 문제도 표준 텍스트 에디터 + CSS 기본 문법을 그대로 적용가능한 프로그램에서는 발생해서는 안 되는 상황이겠죠.
      이런 작은 불편 —-> 초기 세팅에 많은 시간이 들어감 —-> 점점 스트레스 … 가 되는 거 같습니다..

      4) 크롬 markview의 TOC가 본문을 가리나요?
      저는 사실 크롬 markview는 마크다운 문서 작성 후 종이나 PDF 인쇄를 위해서 거의 사용하고 있어서 TOC 기능을 제거한 화면을 출력하고 있어서 몰랐어요.

      markdown preview plus 도 충분히 좋은 거 같습니다. (실시간 스타일 변경은 왜인지 저는 안 되네요..)

  4. 크롬의 markdown preview plus에서는 옵션에 들어가서 스타일을 바꿔야 하네요.

댓글 남기기