Markdown area

Create a rich markdown editor with an immediate preview and support for HTML syntax highlighting.

The Markdown area allows you to write in Markdown and HTML while it generates a real-time preview. It includes a toolbar that helps you to change text appearences and add links, pictures, blockquotes and lists without having to write code. The editor provides syntax highlighting for both Markdown and HTML and you can even toggle to fullscreen mode, so that you can work undisturbed on your content.


To apply this component, you firstly need to include the necessary CodeMirror and marked dependencies. To do so, just add the appropriate script to the header of your project.

<!DOCTYPE html>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>

        <!-- Codemirror and marked dependencies -->
        <link rel="stylesheet" href="codemirror/lib/codemirror.css">
        <script src="codemirror/lib/codemirror.js"></script>
        <script src="codemirror/mode/markdown/markdown.js"></script>
        <script src="codemirror/addon/mode/overlay.js"></script>
        <script src="codemirror/mode/xml/xml.js"></script>
        <script src="codemirror/mode/gfm/gfm.js"></script>
        <script src="marked.js"></script>

        <!-- Markdown Area JavaScript and CSS -->
        <script src="markdownarea.js"></script>
        <link rel="stylesheet" href="markdownarea.css">

Afterwards, just add the data-uk-markdownarea attribute to a <textarea> element.



<textarea data-uk-markdownarea>...</textarea>

Tab mode

You can also switch between Markdown and Preview mode. Just add the data-uk-markdownarea="{mode:'tab'} attribute.



<textarea data-uk-markdownarea="{mode:'tab'}">...</textarea>

JavaScript options

This is an example of how to set options via attribute:

data-uk-markdownarea="{mode:'split', maxsplitsize:600}"
Option Possible value Default Description
mode 'split', 'tab' 'split' View mode
toolbar Array [ "bold", "italic", "strike", "link", "picture", ... ] Button list to appear in the toolbar
maxsplitsize integer 1000 Min. browser width when to switch to responsive tab mode when in split mode
lblPreview any string 'Preview' Label string for preview mode
lblCodeview any string 'Markdown' Label string for code mode