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 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. ExAmplify Amplify your Markdown with . Make it live and your examples consistent with the HTML they would render or JavaScript they would run. exAmplify Server Execution can be run on a server by processing the text string before it is passed to the Markdown processor. ExAmplify : Because many Markdown processors mishandle example code about Markdown, even if ` is escaped, the examples below use ‘‘‘ in place of ```. Note 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 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 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, is just .8K compressed and gzipped. exAmplify Almost all the examples on are written using . lazui.org exAmplify Have fun, save time, be lazui, and deliver more! Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Tired Of Bad Examples in Markdown? Try exAmplify!

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

AI Empathy Across Disciplines

AI Empathy Across Disciplines

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps