【marked.js】マークダウンコンテンツをHTMLに変換して表示してみよう

マークダウン記法、使ってますか？

githubではマークダウンがデフォルトの書式ですし、最近はメモアプリとかでもエンジニア向けになるとマークダウンでかけるようになっています。

僕のメモアプリでマークダウンを使ってますし、この記事もマークダウンで書いてます。

ただ、ブログ等に投稿する際マークダウンで書いたものをそのまま反映しても表示されないです。

単純に# hogehogeとか出るだけです…

なので今回は、マークダウンをHTMLに変換するライブラリである「marked.js」を使ってみたいと思います。

↓githubリポジトリはこちら。 Embedded content: https://github.com/markedjs/marked

インストール

まずは毎度おなじみですが、インストールを行います。

プロジェクトルートに移動して以下のコマンド

yarn add marked

インポート

インポートもJSであればいつも通りです。

import marked from 'marked'

使用方法

上記の形でインポートしてあればmarked()として引数に変換したいマークダウンテキストを渡してあげればOKです。

marked('# Marked in the browser\n\nRendered by **marked**.')

と、まあこれだけで表示されることもなく、あとはJSで挿入したい要素を選択してあげましょう。

<!--今回はこの#contentに挿入したい-->
<div id="content"></div>

import marked from 'marked'
 
const content = `
 # Marked in the browser
 Rendered by **marked**.
`
 
document.getElementById('content').innerHTML = marked(content);

こんな感じで書いてあげれば表示されます。

今回はPure jsでしたが、Vue.js等でも使用できますので簡易的なマークダウンエディタを作ってみても面白いですね。

他にもマークダウンをHTMLに変換するライブラリはいくつかあるのでまた触ることがあったら紹介しようと思います。

このような感じでこのブログでは日々自分が学んだ技術やライブラリ等を投稿しています。

興味を持たれた方はぜひ、他の記事もご覧になっていただけると幸いです。