超簡単です。ブラウザ側で、Markdown から HTML に変換して、表示します。
1. ソースコード
- HTML
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="IDDivHtmlArea"></div>
- JavaScript
var IDDivHtmlArea = document.getElementById("IDDivHtmlArea");
IDDivHtmlArea.innerHTML = marked(’# This is Markdown Header’);
これだけです。これだけで、「# This is Markdown Header」がHTML に変換されて表示されます。
2. まず、変換後のHTMLを表示するDivエリアを作成する
まず、HTML で 「IDDivHtmlArea」というID でDivタグを作成します。この中に、Markdown から変換されたHTML文章が表示されます。
3. CDN からライブラリを読み込み
https://cdn.jsdelivr.net/npm/marked/marked.min.js ここから取得します。
4. marked 関数を使用して、MarkdownからHTMLに変換する
marked(’# This is Markdown Header’);
これだけですね。これをIDDivHtmlAreaにセットすれば、完了です。
5. 公式URL
GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.
A markdown parser and compiler. Built for speed. Contribute to markedjs/marked development by creating an account on GitHub.
コメント