VS Code에서 Markdown 사용법! 나의 경험담 2018.04.15 18:23

나에게 마크다운 Markdown 엄청나게 편리하고 유용한 문법이다. Stackoverflow에 글을 쓸때나 블로그에 글을 올릴때 아주 편하게 구조화된 문서를 작성할 수 있도록 해준다. 별도의 편집기 없이도 텍스트 만으로 간단하게 구조화된 문서를 빠르게 만들 수 있다는 점은 엄청난 생산성을 제공한다! 그럼에도 불구하고 아직도 주변 사람들은 반응이 미적지근한 편인데, 아무래도 Stackoverflow이외에 다른곳에서 .md 문서를 편하게 사용하기 힘들기 때문인 듯 하다.


내가 제안하는 방법은, 일단 글을 쓸 때 마크다운 문법을 사용해서 글을 작성한다. 그리고 그것을 공유하거나 게시 할 때 html 으로 변환하거나 VS Code의 미리보기에서 내용을 복사해서 사용하면 좋다! 마크다운 문법을 지원하는 StackoverflowGithub에는 원본을 그대로 사용할 수 있다.

VS Code에서 Markdown을 HTML로 변환하는 방법 - 1

우선, html로 변환하여 복사하는 방법이 있다. Copy Markdown as HTML 라는 플러그인을 설치하여 간단하게 변환 & 복사 할 수 있다. 자세한 내용은 아래 글을 참조.

Visual studio code 를 markdown 에디터로 사용해 보자

VS Code에서 Markdown을 HTML로 변환하는 방법 - 2

두번째 방법은 마크다운 문서를 바탕으로 html 파일을 생헝하는 방법이다. nodejsmarkdown-it의 설치가 필요하다. 자세한 내용은 아래 글을 참조.

Compiling Markdown into HTML

task.json에서 자신이 원하는 대로 설정할 수 있다. VS Code의 이런 부분이 정말 놀라웠다. 내가 알고 있는 마소스럽지 않아서...ㅋ

아래는 내가 사용하는 task.json 파일인데, 동일 위치에 .md 파일로 .html을 생성한다.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "Compile Markdown",
            "type": "shell",
            "command": "markdown-it ${fileDirname}\\${fileBasename} -o ${fileDirname}\\${fileBasename}.html",

            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

Github 에서 Github Pages 기능을 사용해서 각각의 folder를 만든 다음 index.html로 만들어주면 브라우저에서 바로 확인 가능한데, .md 파일을 빌드하고 최소한의 <head>내용을 추가해서 index.html을 만들어서도 쓴다.

Jekyll를 사용하면 별도로 html파일을 안만들어줘도 블로그처럼 사용할 수도 있는데, 나는 블로그까지는 필요없고 내가 정리한 걸 가끔 사내에 특정인에게 전달할 때만 사용할 거라 private git.md 파일로 글을 쓰고, 필요한 것만 폴더를 만들고, index.html을 만들어서 공유하기도 한다.

VS CodeTask를 좀 더 자세히 알고 싶다면 다음 글을!

Integrate with External Tools via Tasks

Variables Reference

티스토리 툴바