marked.jsを拡張して動画に対応する

2018/10/29 00:04#js

Markdownパーサーのmarked.js拡張して<video>対応します。

ルールの追加

画像は![alt](link)なので?[alt](link)動画に対応させます。
関数を上書きして?ルールに追加します。

ソースコードを拡張

const marked = require('marked')

marked.Parser.prototype.parse = function(src) {
    this.inline = new marked.InlineLexer(src.links, this.options)
    this.inlineText = new marked.InlineLexer(
        src.links,
        Object.assign({}, this.options, { renderer: new marked.TextRenderer() })
    )

    let link = this.inline.rules.link.source
    let text = this.inline.rules.text.source

    this.inline.rules.link = new RegExp(link.replace(/\^!\?/, '^[!?]?'))
    this.inline.rules.text = new RegExp(text.replace(/<!\\\[/, '<!?\\['))

    this.tokens = src.reverse()

    let out = ''
    while (this.next()) out += this.tok()

    return out
}

marked.InlineLexer.prototype.outputLink = function(cap, link) {
    const href = link.href
    const title = link.title ? escape(link.title) : null

    switch (cap[0].charAt(0)) {
    case '?':
        return this.renderer.video(href, escape(cap[1]))
    case '!':
        return this.renderer.image(href, title, escape(cap[1]))
    default:
        return this.renderer.link(href, title, this.output(cap[1]))
    }
}

marked.Renderer.prototype.video = function (href, alt) {
    return `<video src="${href}" controls>${alt}</video>`
}

module.exports = marked