Markdown 플러그인 생태계

Markdown의 진정한 힘은 확장성에 있습니다. 플러그인을 통해 새로운 기능을 추가하고, 구문을 사용자 정의하며, 다양한 도구 및 서비스와 통합할 수 있습니다.

인기있는 Markdown 프로세서

Marked.js

빠른 JavaScript Markdown 파서입니다.

설치

npm install marked

기본 사용법

const marked = require('marked');

const markdown = '# Hello World';
const html = marked.parse(markdown);

Marked 확장

const marked = require('marked');

// 사용자 정의 렌더러
const renderer = {
  heading(text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
  },
  link(href, title, text) {
    return `<a href="${href}" target="_blank">${text}</a>`;
  }
};

marked.use({ renderer });

Markdown-it

플러그 가능한 Markdown 파서로, 빠르고 확장하기 쉽습니다.

설치

npm install markdown-it

기본 사용법

const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

const result = md.render('# Hello World');

플러그인 사용

const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

// 플러그인 추가
md.use(require('markdown-it-emoji'));
md.use(require('markdown-it-footnote'));
md.use(require('markdown-it-anchor'));

const result = md.render('# 제목 :smile:');

필수 플러그인 카테고리

1. 구문 확장 플러그인

GitHub Flavored Markdown (GFM)

npm install remark-gfm

const remark = require('remark');
const gfm = require('remark-gfm');

remark()
  .use(gfm)
  .process('~~취소선~~ 및 작업 목록 [x]');

이모지

npm install markdown-it-emoji

const md = require('markdown-it')();
md.use(require('markdown-it-emoji'));

md.render('안녕하세요 :smile:');  // 안녕하세요 😄

2. 목차 (TOC) 플러그인

Remark TOC

npm install remark-toc

const remark = require('remark');
const toc = require('remark-toc');

remark()
  .use(toc, { heading: '목차' })
  .process(markdown);

3. 코드 구문 강조 플러그인

Highlight.js

npm install highlight.js

const marked = require('marked');
const hljs = require('highlight.js');

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return code;
  }
});

사용자 정의 플러그인 만들기

Markdown-it 플러그인

간단한 플러그인

function myPlugin(md) {
  const defaultRender = md.renderer.rules.paragraph_open || 
    function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

  md.renderer.rules.paragraph_open = function(tokens, idx, options, env, self) {
    tokens[idx].attrSet('class', 'custom-paragraph');
    return defaultRender(tokens, idx, options, env, self);
  };
}

const md = require('markdown-it')();
md.use(myPlugin);

결론

Markdown 플러그인 생태계는 매우 풍부하여 거의 모든 요구 사항을 충족할 수 있습니다. 적절한 프로세서와 플러그인을 선택하면 Markdown의 기능을 크게 향상시킬 수 있습니다.

추가 리소스

• Awesome Markdown - Markdown 리소스 모음
• Markdown-it 플러그인 목록
• Remark 플러그인 목록