JavaScript ライブラリ「marked」使用してmarkdownをhtmlに変換する
- 作成日 2020.07.21
- 更新日 2022.05.30
- javascript
- javascript
JavaScriptのライブラリ「marked」使用してmarkdownをhtmlに変換するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- ブラウザ chrome 102.0.5005.63
marked使い方
下記がmarkedを利用して、markdownをhtmlに変換するサンプルとなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mebee テスト</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
document.getElementById('content').innerHTML =
marked.parse('# Markdown sample\n\n- Markdownのテキスト\n\n## 見出し -> 「#」\n\n- 「#」はタイトル \n\n - 「#」の後に、スペースを1つあけて、タイトルの文字を書く \n\n - 「#」の個数で大きさが変わる（個数が多くなるほど小さくなる）\n\n# タイトル１\n\n## タイトル２\n\n### タイトル３\n\n#### タイトル４');
</script>
</body>
</html>実行結果の通り、markdownがhtmlに変換されていることが確認できます。
node.jsで利用
markedは、node.jsでも利用できます。
まずはインストールします。
npm i markedsample.jsという名前でファイルを作成して実行してみます。
const marked = require('marked')
const markdown = '# タイトル１\n' +
'## タイトル２\n' +
'- 箇条書き **強調** \n'
console.log(marked.parse(markdown))実行します。
node sample.js実行すると、markdownがhtmlに変換されていることが確認できます。
<h1 id="タイトル１">タイトル１</h1>
<h2 id="タイトル２">タイトル２</h2>
<ul>
<li>箇条書き <strong>強調</strong> </li>
</ul>
