Markdown 익스텐션

Markdown 익스텐션은 여러분이 Visual Studio Code의 빌트인 Markdown 미리보기를 확장하고 개량 할 수 있게 합니다. 이는 미리보기의 모양을 바꾸거나 새로운 Markdown 표현을 더하는 것을 포함합니다.

CSS로 Markdown 미리보기 모양 변경

익스텐션은 CSS를 이용하여 Markdown 미리보기의 모양이나 레이아웃을 변경 할 수 있습니다. 익스텐션의 package.json안에 있는 markdown.previewStylesContribution Point를 이용하여 스타일시트를 등록 할 수 있습니다.

"contributes": {
    "markdown.previewStyles": [
        "./style.css"
    ]
}

"markdown.previewStyles"는 익스텐션의 루트 폴더에 있는 파일들의 목록입니다.

사용된 스타일은 빌트인 Markdown 미리보기 스타일 보다는 나중에, 사용자의 "markdown.styles"보다는 먼저 적용 됩니다.

Markdown Preview GitHub Styling 익스텐션은 스타일 시트를 사용하여 Markdown 미리보기 모양을 Github의 Markdown 처럼 바꾸는 좋은 예시 입니다. 여러분은 익스텐션의 소스 코드를 GitHub에서 검토 할 수 있습니다.

Markdown-it 플러그인으로 새로운 구문 지원 추가

VS Code Markdown 미리보기는 CommonMark specification를 지원합니다. 익스텐션은 markdown-it plugin.를 작성하는 것으로 추가 Markdown 구문을 지원 할 수있습니다.

markdown-it 플러그인을 사용하기 위해서, 먼저 "markdown.markdownItPlugins" contribution을 여러분 익스텐션의 package.json에 추가하십시오:

"contributes": {
    "markdown.markdownItPlugins": true
}

그 다음, 익스텐션의 메인 activation함수에서, extendMarkdownIt라는 이름을 가진 함수를 포함한 오브젝트를 리턴하십시오. 이 함수는 현재 markdown-it 인스턴스를 받아 새로운 markdown-it 인스턴스를 리턴 해야 합니다.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: any) {
      return md.use(require('markdown-it-emoji'));
    }
  };
}

여러개의 markdown-it 플러그인을 사용하기 위해서는, 단순히 여러개의 연속된 use 표현을 사용하십시오:

return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));

markdown-it 플러그인을 사용하는 익스텐션은 Markdown 미리보기가 처음으로 보이는 때에 lazy하게 활성화 됩니다.

markdown–emoji 익스텐션은 markdown-it 플러그인을 사용하여 markdown 미리보기에 이모티콘 지원을 추가합니다. 여러분은 이 익스텐션의 소스 코드를 GitHub에서 검토 할 수 있습니다.

다음을 검토하는것도 좋습니다:

• Guidelines for markdown-it plugin developers
• Existing markdown-it plugins

스크립트로 고급 기능 추가

고급 기능을 위해서, 익스텐션은 Markdown 미리보기 내부에서 실행되는 스크립트를 사용할 수 있습니다.

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}

사용된 스크립트는 비동기 적으로 로드되고, 컨텐츠가 바뀔 때 마다 다시 로드 됩니다.

Markdown Preview Mermaid Support 익스텐션은 스크립트를 사용하여 mermaid 다이어그램과 flowchart를 markdown 미리보기에 추가 합니다. Mermaid 익스텐션의 소스 코드를 GitHub에서 확인하십시오.