Visual Studio Code에서 Markdown을 이용해 보기

개요

Visual Studio Code(이하 VSC)는 개발 기간이 오래된 에디터는 아니기 때문에 아직 여타 경쟁 에디터에 비해서 마크다운 관련된 기능이 많은 편은 아닌 것 같습니다. 그러나 Sublime Text처럼 한글 입력에 대한 스트레스가 없고¹, 기본적으로 제공되는 GIT 연동 기능을 이용하여 바로 GitHub에 글을 동기화할 수 있는 등 장점도 많은 편입니다.

VSC에서 마크다운 관련하여 어떤 기능들을 제공하고 있는지 정리해 보았습니다.

 

VSC 공식 마크다운 지원 기능 소개

마크다운 관련하여 VSC에서 어떤 기능을 제공하고 있는지 공식 홈페이지에 소개 자료가 있습니다. 아래 내용은 대부분 이 글을 참고 내지 번역하여 만든 것입니다.

 

마크다운 미리보기

Ctrl+Shift+V 혹은 Ctrl+K V 단축키를 눌러 화면 우측 혹은 새 탭으로 미리보기 화면을 볼 수 있습니다. 마크다운을 입력할 때 실시간으로 미리보기가 됩니다. 단축키 설정은 Preferences: Open Keyboard Shortcuts에서 변경할 수 있습니다.

 

미리보기에 사용할 CSS 커스터마이징

마크다운 문서를 미리보기할 때 사용되는 CSS를 마음대로 변경할 수 있습니다. File > Preferences > Workspace Settings을 열고 settings.json 파일에서 "markdown.styles": [] 부분에 원하는 CSS 파일 위치를 입력합니다.

// Place your settings in this file to overwrite default and user settings.
{
    "markdown.styles": [
        "Style.css"
    ]
}

Workspace 뿐만 아니라, User Settings에서도 설정할 수 있습니다.
특정 Workplace의 하위 폴더에 css 파일을 둔 경우에는 ./폴더명/style.css와 같은 형태로 폴더를 지정할 수도 있습니다.

 

마크다운 코드 제안

마크다운 입력 중 Ctrl+Space 키를 누르면 적합한 키워드를 제안해 줍니다.

 

마크다운을 HTML로 변환하기

task runner로 마크다운 파일을 쉽게 HTML 파일로 변경할 수 있습니다.

1. 마크다운 컴파일러 설치

먼저 Node.js 모듈인 markdown-it을 설치합니다. Node.js가 설치되어 있다면 터미널에 아래와 같이 입력합니다.

npm install -g markdown-it

2. 변환할 MD 파일을 만들기

변환할 마크다운 파일을 sample.md라고 만들어 봅니다.

3. task.json 만들기

명령어 팔레트를 Ctrl+Shift+P로 실행한 후 Configuration Task Runner를 선택합니다.

여러 tasks.json리스트가 표시될텐데요, 외부 명령어를 실행할 것이기 때문에 Others를 선택합니다. 이렇게하면 현재 작업 영역에 .vscode 폴더가 생성되고 그 안에 아래와 같은 코드의 tasks.json 파일이 생성됩니다.

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": ["Hello World"],
    "showOutput": "always"
}

위 코드를 아래와 같이 변경합니다.

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "markdown-it",
    "isShellCommand": true,
    "args": ["sample.md", "-o", "sample.html"],
    "showOutput": "always"
}

위 코드를 해석하자면 markdown-it을 이용해 sample.md 파일을 sample.html 파일로 변환하겠다는 내용입니다.

4. Task 실행

위 태스크를 만들었다면 Ctrl+Shift+B(Run Build Task) 키를 눌러 실행합니다. 태스크가 정상적으로 실행되었다면 현재 작업 영역에 sample.html 파일이 추가돼 있는 것을 확인하실 수 있습니다.

 

자동으로 마크다운을 HTML로 변환하기

위 과정을 자동으로 실행하여 md 파일이 새로 만들어지거나 변경될 때마다 자동으로 html 파일이 생성되는 태스크를 만들 수 있습니다.

1. Gulp와 플러그인 설치

터미널에 아래와 같이 입력하여 Gulp와 플러그인을 설치합니다.

npm install -g gulp
npm install gulp gulp-markdown-it

gulp가 정상적으로 설치됐는지 확인해보고 싶다면 gulp -v를 입력해 봅니다. global(CLI)과 local 설치 버전이 표시되어야 합니다.

2. Gulp 태스크 만들기

아까 전에 태스크를 만들었던 작업 영역의 root에 gulpfile.js 라는 파일을 만들고 아래 코드를 입력합니다.

var gulp = require('gulp');
var markdown = require('gulp-markdown-it');

gulp.task('markdown', function() {
    return gulp.src('**/*.md')
        .pipe(markdown())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }));
});

gulp.task('default', ['markdown'], function() {
    gulp.watch('**/*.md', ['markdown']);
});

html이 생성되는 폴더의 위치를 변경하고 싶다면 .pipe(gulp.dest(function(f) {return f.base;} 부분을 .pipe(gulp.dest('원하는위치'));로 변경해 보시기 바랍니다.

위 코드는 현재 작업 영역에서 새로운 마크다운 파일이 생성되거나 변경된 것을 주시하고 있다가 자동으로 같은 이름의 html 파일을 생성한다는 내용입니다.

3. tasks.json에 상시 감시하도록 태스크 등록

위에서 만든 Gulp 태스크가 작업 영역을 잘 감시하도록 tasks.json 파일을 아래와 같이 만듭니다.

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}

4. gulp 태스크 실행

Ctrl+Shift+B(Run Build Task) 키를 눌러 실행하면 감시를 시작합니다. 만약 태스크 실행을 중지하고 싶다면 명령어 팔레트(Ctrl+Shift+P)를 실행하여 Tasks: Terminate Running Task를 선택합니다.

 

참고

• gulp-markdown