カテゴリー
JavaScript

[超簡単]MarkEd js を使用してmarkdownからhtmlへの変換を行う方法

超簡単です。ブラウザ側で、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

https://github.com/markedjs/marked

作成者: はるお@ライフハックITプレゼンター

仕事や生活がラクになるアプリ・ツールを開発・提案します。社内講師、開発ツール導入、自部品製造・営業購買経理システム開発経験、RPA導入。応用情報技術者、C#,TypeScript,COBOL,PL/SQL,VBAなど。全工程(要件定義〜運用保守)。海外出張経験🇲🇽🇨🇳。1児👧1匹🐱の父。

ご意見など御座いましたら、コメント欄または Twitterまで頂けると幸いです。

詳しいプロフィールはこちら。

https://usefuledge.com/profile-2

コメントを残す

メールアドレスが公開されることはありません。