Custom markdown formatting of code element

[kylecesmat]

Basically creating custom markup based on the language provided. If it's a playground, we will nest the code inside a named <span>. This will allow developers to define custom code renderers that ecology can still interpret.

Here is an example for a loading state I intend to use inside the victory-docs:

if (lang === "playground" || lang === "playground_norender") {
      return (
        `<pre style="line-height: 0">
            <div class="lang-${escape(lang)}">
                <span class="ecologyCode" style="display:none;">${escape(code)}</span>
                <div class="Interactive">
                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: stretch;justify-content: space-between;margin-left: -20px;padding: 0;">
                        <div style="min-height:300px;display: flex;flex: 1 2 45%;margin: 0;">
                        </div>
                        <div style="min-height:300px;display: flex;flex: 3 2 55%;margin: 0;padding: 0;">
                            <div class="ReactCodeMirror playgroundStage"></div>
                        </div>
                    </div>
                </div>
            </div>
        </pre>`
      );
    }

Open to suggestions on how this might be improved. I'm a little shaky on using .getElementsByClassName("ecologyCode")[0] to get the DOM node with the code in it, but it seems like one solution.

cc @paulathevalley

[alexlande]

This seems like a solid approach. The getElementsByClassName thing feels weird, but this module is already doing the same thing elsewhere so :shrug:

[kylecesmat]

Awesome - thanks for giving it a look!