Add DOT/GraphViz support

[Giacomo Manzoli]

It would be nice to directly add a DOT graph inside a post, something like https://github.com/geeklearningio/graphviz-markdown-preview.

To produce an SVG element from the graph definition there is http://viz-js.com/

[Chris Diana]

Very cool. Yeah this would be great to have available @GiacomoManzoli. Let me dig into this a bit deeper and I'll check back in.

[Chris Diana]

So I did a little digging @GiacomoManzoli and couldn't find any current JavaScript markdown parsers (such as snarkdown, marked, etc) that support GraphViz yet. I might just not be aware so feel free to take a look around and let me know if you find one.

There is a Python library that does here. I'd suggest maybe requesting a port for GraphViz support to one of the more active JavaScript Markdown libraries such as marked or snarkdown (or others here) since CMS.js only has a minimal Markdown parser built-in and is not really meant to be a super robust engine. Better suited for those libraries that do it really well. If one of those Markdown libraries ends up supporting it, then you can easily plug any markdown parser into CMS.js using the config like:

// Markdown settings
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});

var config = {
  markdownEngine: marked,
};

var blog = CMS(config);

[Giacomo Manzoli]

Ok!
And what about a change on the default renderer?

I took a quick look to the markdown.js file and i've seen that with a small change it could improved to extract the language type of a code area and the use the language information to parse the block in a different way, based on the language type:

// block code
            {
                regex: /```([a-z]*)\n([\s\S]*?)\n```/g, replacement: (text) => {
                    let res = /```([a-z]*)\n([\s\S]*?)\n```/g.exec(text) // this duplication it's horrible, it's just to give the idea
                    console.log(res);
                    let lang = res[1];
                    let content = res[2];
                    text = text.replace(/```/gm, '');
                    return '<pre class=".'+lang+'">' + content + '</pre>';
                }
            },

So, if lang it's graphviz it could be rendered as an SVG, while if it's normal code it can be rendered inside a syntax highligher or just a <pre> block.
What do you think?