Tired Of Bad Examples in Markdown? Try exAmplify!

I was tired of reading examples in Markdown that did not match reality, even in my own Markdown files.

I was tired of updating Markdown with examples when writing new code, particularly if I wanted to show the code in Markdown and what it resulted in. I was so tired of it that I wrote fewer examples. Good for me. Bad for users.

That’s where exAmplify comes in.

ExAmplify takes any ```!html or ```!javascript block in Markdown and automatically inserts its contents immediately after the marked block. As a result, the code is rendered or run by the browser and the user gets to see the output.

Amplify your Markdown with exAmplify. Make it live and your examples consistent with the HTML they would render or JavaScript they would run.

Server Execution

ExAmplify can be run on a server by processing the text string before it is passed to the Markdown processor.

Note: Because many Markdown processors mishandle example code about Markdown, even if ` is escaped, the examples below use ‘‘‘ in place of ```.

import { examplify } from 'examplify';
import {default as MarkdownIt} from "markdown-it";

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: false
})

const string = "'''!html\n<script>console.log('Hello, World!');</script>\n'''";

const examplified = examplify(string);

const markedDown = md.render(examplified);

This Markdown:

'''!html
<form><input type="text" value="Hello, World!"></form>
'''

Will produce this output:

'''!html
<form><input type="text" value="Hello, World!"></form>
'''
<form><input type="text" value="Hello, World!"></form>

You can even run scripts:

'''!html
<script>console.log('Hello, World!');
</script>;
'''

Will be turned into this:

'''html
<script>console.log('Hello, World!');</script>;
'''
<script>console.log('Hello, World!')</script>;

And, you can spice things up by updating the final DOM:

<div id="message">
'''!javascript
const el = document.getElementById('message');
    el.innerHTML = 'Hello, World!';
'''

Will produce this HTML:

<div id="message">
'''!javascript
const el = document.getElementById('message');
    el.innerHTML = 'Hello, World!';
'''
<script>
const el = document.getElementById('message');
    el.innerHTML = 'Hello, World!';
</script>

Which will render as:

Hello, World!

const el = document.getElementById('message');
    el.innerHTML = 'Hello, World!';

Browser Execution

ExAmplify will also process code blocks after the Markdown has been parsed and transformed into HTML. You can use this in the browser if your server does not support exAmplify.

import { examplify } from "examplify";

examplify(document);

This Markdown:

'''!html
<script>console.log('Hello, World!');</script>;
'''

Will generate this HTML:

<code class="language-!html">
    <span class="hljs-tag">
        &lt;<span class="hljs-name">script</span>&gt;
    </span>
    <span class="language-javascript">
        <span class="hljs-variable language_">console</span>.
        <span class="hljs-title function_">log</span>
        (<span class="hljs-string">"Hello, World!"</span>)
    </span>
    <span class="hljs-tag">&lt;/
        <span class="hljs-name">script</span>&gt;
    </span>
</code>

Which will be converted to this:

<code class="language-html">
    <span class="hljs-tag">
        &lt;<span class="hljs-name">script</span>&gt;
    </span>
    <span class="language-javascript">
        <span class="hljs-variable language_">console</span>.
        <span class="hljs-title function_">log</span>
        (<span class="hljs-string">"Hello, World!"</span>)
    </span>
    <span class="hljs-tag">&lt;/
        <span class="hljs-name">script</span>&gt;
    </span>
</code>
<script>console.log('Hello, World!');</script>

And BTW, exAmplify is just .8K compressed and gzipped.

Almost all the examples on lazui.org are written using exAmplify.

Have fun, save time, be lazui, and deliver more!