mmyoji's diary

プログラミングとか日々のどうでもいいこととか

JSでmarkdown + Emoji対応

以下の記事の続きです!(書くの忘れてた)

mmyoji.hatenablog.com

環境

下2つ使ったら簡単に実装できます!

じっそー

import md from "markdown-it"
import mdEmoji from "markdown-it-emoji"

const markdown = md().use(mdEmoji)

const str = "## Sample Title :heart:"

markdown.render(str)
//=> "<h2>Sample Title ❤️</h2>" // すいません文字化けしちゃってますmm

上記のような形で render するとhtmlが文字列として出力されるので、それをhtmlとして解釈してくれるように扱えばおkです!

例えばVue.js使った場合だと以下のように実装しました(結構端折ってます)

<div id="app">
  <div v-html="md2html(msg)"></div>
</div>
// 上に書いたjsがある前提で見てください

new Vue({
  el: "#app",
  data: {
    msg: "## Sample Data :smiley:"
  },
  methods: {
    md2html(text) {
      return markdown.render(text)
    }
  }
})

めっちゃ簡単ですね ?