마크다운 확장 프로그램

Markdown 확장을 사용하면 Visual Studio Code의 내장 Markdown 미리 보기를 확장하고 향상시킬 수 있습니다. 여기에는 미리 보기 모양 변경 또는 새 Markdown 구문 지원 추가가 포함됩니다.

CSS로 Markdown 미리 보기 모양 변경

확장은 CSS를 기여하여 Markdown 미리 보기의 모양 또는 레이아웃을 변경할 수 있습니다. 스타일시트는 확장 기능의 package.json에 있는 markdown.previewStyles 기여 지점을 사용하여 등록됩니다.

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

"markdown.previewStyles"는 확장 기능의 루트 폴더에 상대적인 파일 목록입니다.

기여된 스타일은 내장 Markdown 미리 보기 스타일 뒤에, 사용자 정의 "markdown.styles" 전에 추가됩니다.

Markdown Preview GitHub Styling 확장은 스타일시트를 사용하여 Markdown 미리 보기를 GitHub 렌더링 Markdown과 동일하게 보이도록 하는 좋은 예입니다. 확장 기능의 소스 코드는 GitHub에서 검토할 수 있습니다.

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

VS Code Markdown 미리 보기는 CommonMark 사양을 지원합니다. 확장은 markdown-it 플러그인을 기여하여 추가 Markdown 구문에 대한 지원을 추가할 수 있습니다.

markdown-it 플러그인을 기여하려면 먼저 확장 기능의 package.json에 "markdown.markdownItPlugins" 기여를 추가하세요.

"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 미리 보기가 처음 표시될 때 지연 로드됩니다.

markdown-emoji 확장은 markdown-it 플러그인을 사용하여 markdown 미리 보기에 이모티콘 지원을 추가하는 것을 보여줍니다. 이모티콘 확장 기능의 소스 코드는 GitHub에서 검토할 수 있습니다.

다음도 검토해 볼 수 있습니다.

markdown-it 플러그인 개발자 가이드라인
기존 markdown-it 플러그인

스크립트로 고급 기능 추가

고급 기능을 위해 확장은 Markdown 미리 보기 내에서 실행되는 스크립트를 기여할 수 있습니다.

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

기여된 스크립트는 비동기적으로 로드되며 콘텐츠가 변경될 때마다 다시 로드됩니다.

Markdown Preview Mermaid Support 확장은 스크립트를 사용하여 markdown 미리 보기에 Mermaid 다이어그램 및 순서도 지원을 추가하는 것을 보여줍니다. Mermaid 확장 기능의 소스 코드는 GitHub에서 검토할 수 있습니다.

12/10/2025