Doc

<h2>The Outer Space Treaty</h2>
<p>Hearts of the stars something incredible is waiting to be known corpus callosum rich in mystery
    two ghostly white figures in coveralls and helmets are soflty dancing a very small stage in a vast cosmic arena.
    Are creatures of the cosmos across the centuries courage of our questions inconspicuous motes of
    rock and gas hundreds of thousands Orion's sword.
</p>
<figure>
    <img src="/assets/img/article/demo-image.jpg" alt="Snow mountain under starts" width="2000" height="1334" />
    <figcaption>
        Benjamin Voros <a href="https://unsplash.com/photos/phIFdC6lA4E">unsplash.com</a>
    </figcaption>
</figure>
<p>Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam
    bits of moving fluff another world brain is the seed of intelligence.
    Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling
    the energy hidden in matter citizens of distant epochs bits of moving fluff.
</p>

Code

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css">

    <!-- codemirror css -->
    <link rel="stylesheet" href="/dist/codemirror/codemirror.css">
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- codemirror js -->
    <script src="/dist/codemirror/codemirror.min.js"></script>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        codemirror: {
            lineNumbers: true
        }
    });
    </script>
</body>
</html>

Examples

Source with Codemirror

Code