Marked.js

Marked.js는 자바스크립트로 작성된 마크다운 파서/컴파일러 입니다. 확장이 쉽고 서버와 클라이언트 어디서든 사용할 수 있습니다. 현재 보고있는 이 글도 Marked.js로 컴파일된 문서입니다.

사용법

Marked는 브라우저와 서버에서 모두 사용 가능합니다. 브라우저에서 사용할 때는 아래와 같이 Marked 스크립트를 포함해주면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marked</title>
</head>
<body>
    <div id="markdown-container"></div>
    <script src="{{{Marked script src here}}}"></script>
    <script>
        document.getElementById("markdown-container").innerHTML = marked("Markdown here.")
    </script>
</body>
</html>

Node.js에서 사용하기 위해서는 우선 npm으로 설치해줘야 합니다.

npm install --save marked

이후 require로 사용할 수 있습니다.

const marked = require('marked');

console.log(marked("# Title"));

옵션

marked.setOptions(<options>)함수로 앱 레벨의 옵션을 설정하거나 marked()함수의 두 번째 매개변수로 옵션을 넘겨줄 수 있습니다. 옵션은 자바스크립트 객체입니다.

아래는 옵션중 일부입니다. 전체 옵션은 공식 문서에서 확인할 수 있습니다.

이름	타입	기본 값	설명
baseURL	`string`	`null`	상대 url의 베이스 url입니다.
breaks	`boolean`	`false`	`true`인 경우 한 개의 줄바꿈에 `<br>`을 추가한다. `gfm`이 `true`여야 한다.
gfm	`boolean`	`true`	`true`인 경우 GitHub Flavored Markdown스펙을 사용한다.
headerIds	`boolean`	`true`	`true`인 경우 headings에 `id` 속성을 추가한다.
headerPrefix	`string`	`''`	heading에 `id`속성을 추가할 때 붙일 접두사.
highlight	`function`	`null`	구문강조(Syntax Highlight)를 수행할 함수.
langPrefix	`string`	`'language-'`	`<code>`블럭의 `class`속성의 접두사. 구문 강조에 주로 사용됩니다.
renderer	`object`	`new Renderer()`	토큰을 렌더링 할 때 필요한 함수들을 가지고 있는 객체입니다.
silent	`boolean`	`false`	`true`인 경우 에러를 `throw`하지 않는다.
tokenizer	`object`	`new Tokenizer()`	토큰을 생성하는 함수를 가지고 있는 객체입니다.

확장

Marked.js는 Tokenizer로 token을 만든 후 Renderer가 token을 html로 변환해 줍니다. 위의 renderer와 tokenizer옵션을 이용해 marked를 확장할 수 있습니다. 이 글에서 renderer와 tokenizer를 확장해서 구문강조와 KaTeX를 적용하는 방법을 확인할 수 있습니다.