Using shortcodes with marked

markdownify.js

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import marked from 'marked';
import _ from 'lodash';

import withPrefix from './withPrefix';


const ShortCodes = {
    figure: function(attrs) {
        let imgAttrs = '';
        let caption = '';
        if (_.has(attrs, 'src')) {
            imgAttrs += ` src="${withPrefix(attrs.src)}"`;
        }
        if (_.has(attrs, 'alt')) {
            imgAttrs += ` alt="${attrs.alt}"`;
        }
        if (_.has(attrs, 'caption')) {
            caption = `<span class="figure-caption">${attrs.caption}</span>`;
        }
        return `<div class="figure"><img${imgAttrs}/>${caption}</div>`;
    }
};

marked.use({
    renderer: {
        paragraph: function(text) {
            const shortCodeRegExp = /\{<(?<shortcode>\w+)(?<attributes>\s+[\s\S]+?)?>}/g;
            const attributesRegExp = /(?<attrName>\w+)(?:=(['"])(?<attrValue>.+?)\2)?/g;
            let match = shortCodeRegExp.exec(text);

            // if shortcode not found, run default paragraph
            if (!match) {
                return marked.Renderer.prototype.paragraph.call(this, text);
            }

            let result = '';
            let lastIndex = 0;
            while (match !== null) {
                result += text.substring(lastIndex, match.index);
                lastIndex = shortCodeRegExp.lastIndex;
                const shortcode = _.get(match, 'groups.shortcode');
                console.log(shortcode);
                if (!_.has(ShortCodes, shortcode)) {
                    result += text.substring(match.index, lastIndex);
                    match = shortCodeRegExp.exec(text);
                    continue;
                }
                const rawAttributes = _.get(match, 'groups.attributes');
                let attrMatch;
                const attributes = {};
                while ((attrMatch = attributesRegExp.exec(rawAttributes)) !== null) {
                    const attrName = _.get(attrMatch, 'groups.attrName');
                    attributes[attrName] = _.get(attrMatch, 'groups.attrValue', null);
                }
                result += ShortCodes[shortcode](attributes);
                match = shortCodeRegExp.exec(text);
            }
            result += text.substring(lastIndex);
            return result;
        }
    }
});

const markdown = `
# Hello world

This is a paragraph

{<figure src="image.jpg" alt="alt text" caption="image caption">}

Another paragraph
`;

const html = marked(markdown);
const react = ReactHtmlParser(html);