To render existing Markdown content as HTML without providing editing capabilities, use the markdownToHTML method. This approach is suitable for displaying formated articles or documentation pages.

<div id="markdown-viewer">
    <textarea style="display:none;">
### Introduction to Editor.md

**Editor.md** is an open-source, embeddable Markdown online editor component built upon CodeMirror, jQuery, and Marked libraries.
    </textarea>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/lib/raphael.min.js"></script>
<script src="editormd/lib/underscore.min.js"></script>
<script src="editormd/lib/sequence-diagram.min.js"></script>
<script src="editormd/lib/flowchart.min.js"></script>
<script src="editormd/lib/jquery.flowchart.min.js"></script>
<script src="editormd/js/editormd.min.js"></script>

<script type="text/javascript">
    let mdViewer;

    $(function() {
        mdViewer = editormd.markdownToHTML("markdown-viewer", {
            htmlDecode      : "style,script,iframe",
            emoji           : true,
            taskList        : true,
            tex             : true,
            flowChart       : true,
            sequenceDiagram : true
        });
    });
</script>

For scenarios requiring real-time editing and preview, initialize the full editor component with the editormd() function. This creates a split-view interface with synchrnoization between the editor and preview panes.

<div style="min-height: 700px;" class="container-fluid">
    <div id="markdown-editor">
        <textarea style="display:none;">
### Introduction to Editor.md

**Editor.md** is an open-source, embeddable Markdown online editor component built upon CodeMirror, jQuery, and Marked libraries.
        </textarea>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="editormd/lib/marked.min.js"></script>
    <script src="editormd/lib/prettify.min.js"></script>
    <script src="editormd/lib/raphael.min.js"></script>
    <script src="editormd/lib/underscore.min.js"></script>
    <script src="editormd/lib/sequence-diagram.min.js"></script>
    <script src="editormd/lib/flowchart.min.js"></script>
    <script src="editormd/lib/jquery.flowchart.min.js"></script>
    <script src="editormd/js/editormd.min.js"></script>

    <script type="text/javascript">
        let mdEditor;

        $(function() {
            mdEditor = editormd("markdown-editor", {
                placeholder       : 'Markdown supported: edit on the left, preview on the right',
                width             : "90%",
                height            : 640,
                syncScrolling     : "single",
                path              : "editormd/lib/",
                theme             : "dark",
                previewTheme      : "dark",
                editorTheme       : "pastel-on-dark",
                htmlDecode        : "style,script,iframe",
                saveHTMLToTextarea: true,
                emoji             : false,
                taskList          : true,
                tocm              : true,
                tex               : true,
                flowChart         : true,
                sequenceDiagram   : true,
                toolbarIcons      : function() {
                    return editormd.toolbarModes['simple'];
                }
            });
        });
    </script>
</div>

Always enable the htmlDecode option when handling user-generated content. Without this configuration, embedded HTML tags such as <script> may be executed, creating potential cross-site scripting (XSS) vulnerabilities. Additionally, implement server-side sanitization and escaping to ensure comprehensive security against malicious input.