Showdownを拡張して画像、動画、highlight.jsに対応する

インストール

npm install --save-dev @types/showdown showdown

拡張

default export がシングルトンになっていて、そこに自作の拡張を登録できます。

import showdown from 'showdown'

showdown.extension('myext', [拡張])

video 対応

?[alt](href) をカスタムブロックとして使う。
なぜかregexにRegExpいれると怒られるのでstringにしています。

showdown.extension('video', {
    type: 'lang',
    regex: /\n\?\[(.*)\]\((.*)\)\n/.source,
    replace: `<p><video src="$2" controls>$1</video></p>`
})

highlight.js 対応

showdown.extension('hljs', {
    type: 'lang',
    regex: /`{3}.+\n[^]+?\n`{3}/.source,
    replace: (code: string) => {
        const re = /^`{3}(.+)\n([^]+)\n`{3}$/
        const match = re.exec(code)
        if (! match || match.length < 3)
            throw new Error('FAILED TO HIGHLIGHT CODE FENCE')
        const [, lang, raw] = match
        const { value } = hljs.highlight(lang, raw)

        return `<pre class="hljs"><code>${value}</code></pre>`
    }
})

登録した拡張を使用

import { Converter } from 'showdown'

const converter = new Converter({
    extensions: ['video', 'hljs'],
    simpleLineBreaks: true
})

const html = converter.makeHtml(markdown)

simpleLineBreaks は改行を勝手に<br>に処理してくれるやつ。