超簡単 MarkedJS を使用して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

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱