Render Markdown Tool

index.html

<h2>Render markdown:</h2>
<div class="load-post-form">
    Link to post (busy or steemit): <input type="text" id="post-link-input">
    <button id="load-post-button">Load steem post</button>
</div>
<textarea rows="12" style="width: 100%;" id="input">
# Sample post
and some content.

Let's mention @ned
or include a tag #steem. 

https://youtu.be/B7C83L6iWJQ

        </textarea>
<p id="render-button-container"><button id="render-button">Render markdown</button></p>

<h2>Output:</h2>
<p id="output">
    ...press the button...
</p>
<br />

<h2>Generated HTML markup</h2>
<pre id="output-markup">
            ...press the button...
        </pre>

<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/steem-content-renderer@latest"></script>
<!--<script src="../dist/browser/steem-content-renderer.min.js"></script>-->

render-markdown-tool.markdown

Render Markdown Tool

Simple pure JavaScript plugin to rotate text snippets as if they were being typed.

http://schier.co/post/simple-vanilla-javascript-typing-carousel

A Pen by Bryan C Guner on CodePen.

License.

script.js

const renderer = new SteemContentRenderer.DefaultRenderer({
    baseUrl: "https://steemit.com/",
    breaks: true,
    skipSanitization: false,
    allowInsecureScriptTags: false,
    addNofollowToLinks: true,
    doNotShowImages: false,
    ipfsPrefix: "",
    assetsWidth: 640,
    assetsHeight: 480,
    imageProxyFn: (url) => url,
    usertagUrlFn: (account) => "https://steemit.com/@" + account,
    hashtagUrlFn: (hashtag) => "https://steemit.com/trending/" + hashtag,
    isLinkSafeFn: (url) => true
});

$(document).ready(() => {
    const renderMarkdownBtnElem = $("#render-button");
    const inputElem = $("#input");
    const outputElem = $("#output");
    const outputMarkupElem = $("#output-markup");
    const loadPostButton = $("#load-post-button");
    const postLinkInput = $("#post-link-input");

    function setOutput(output) {
        outputElem.html(output);
        outputMarkupElem.text(output);
    }

    function render() {
        const input = inputElem.val();
        const output = renderer.render(input);

        console.log("Rendered", output);
        setOutput(output);
    }

    function getAuthorAndPermlinkFromLink(link) {
        let author = "";
        let permlink = "";
        if (link.length > 0) {
            /* tslint:disable max-line-length */
            const regex = /^\/?(?:https?:\/\/(?:steemit\.com|busy\.org))?(?:\/?[^\/\n]*\/)?@?([^\/\n]+)\/([^\/\n]+)$/giu;
            /* tslint:disable max-line-length */
            const match = regex.exec(link);
            if (match && match.length > 1) {
                author = match[1];
                permlink = match[2];
            }
        }
        return { author, permlink };
    }

    renderMarkdownBtnElem.on("click", () => render());

    loadPostButton.on("click", () => {
        const postLink = postLinkInput.val();
        const { author, permlink } = getAuthorAndPermlinkFromLink(postLink);
        if (
            !author ||
            author.length === 0 ||
            !permlink ||
            permlink.length === 0
        ) {
            inputElem.text("Author or permlink is missing...");
            return;
        }

        inputElem.text("Loading post @" + author + "/" + permlink + " ...");
        (async () => {
            try {
                const post = await steem.api.getContentAsync(author, permlink);
                const postMarkdown = post.body;
                console.log("Content loaded", postMarkdown);
                inputElem.text(postMarkdown);
                render();
            } catch (error) {
                inputElem.text(
                    "Error while loading post @" +
                        author +
                        "/" +
                        permlink +
                        ": " +
                        error
                );
            }
        })();
    });
});

style.css

body {
    margin: 5% auto;
    padding: 0 3rem;
    background: #f2f2f2;
    color: #444444;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    text-shadow: 0 1px 0 #ffffff;
    max-width: 800px;
}
code {
    background: white;
}
a {
    border-bottom: 1px solid #444444;
    color: #444444;
    text-decoration: none;
}
a:hover {
    border-bottom: 0;
}
/**/
h1 {
    font-size: 2.2em;
}
h2,
h3,
h4,
h5 {
    margin-bottom: 0;
}
#output {
    border: 1px solid #777;
    padding: 0.5rem;
}
#output-markup {
    width: 100%;
    padding: 0.5rem;
    background: #eee;
    border: 1px solid #777;
    overflow-x: scroll;
}
#render-button-container {
    text-align: center;
}
#render-button {
    padding: 0.5rem;
    font-size: 1.2em;
    border-radius: 0.5rem 0.5rem;
}
.load-post-form {
    text-align: right;
}
header small {
    color: #999;
    font-size: 50%;
}
img {
    max-width: 100%;
}