markedとは
マークダウンをHTMLに変換するライブラリです(マークダウンパーサー)。JavaScriptで書かれており、ブラウザ上でも動作します。
markedのユースケース
ユーザーが入力したテキストをマークダウン形式で受け取り、HTMLに変換するときにmarkedを活用します。サイトの記事作成、ドキュメント作成、メモ作成などに使用されます。
markedの特徴
非常にシンプルなAPIなので、簡単に利用できます。さらに、オプションを指定して変換されるHTMLの形式をカスタマイズできます。注意点として、marked自体には、セキュリティ上の脆弱性が報告されたことがあるため、最新版を利用することが推奨されます。
使用方法
インストール
npm
$ npm i marked --save-dev
$ npm i @types/marked --save-dev
marked.js
const marked = require('marked');
const markdownText = 'Hello, world!';
const htmlText = marked(markdownText);
console.log(htmlText); // Hello, world!
以下、ドキュメントより↓
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('content').innerHTML =
marked.parse('# Marked in the browser\n\nRendered by **marked**.');
</script>
</body>
</html>
CDNからmarked.min.jsを取得。
document.getElementById('content').innerHTMLで、
<div id="content"></div>マークダウンのテキストをHTMLに変換。
この場合、marked.parse関数を使用して、# Marked in the browser\n\nRendered by **marked**.というマークダウンのテキストをHTMLに変換しています。
ブラウザで開くと...
ドキュメント