Initialize the plugin entirely via javascript. This is a variation to Basic Example 1,
where the CSS class markdown
is NOT ADDED to the textarea
element. The plugin options are
instead set via javascript as options to the plugin markdownEditor
.
This example also shows usage of other plugin options. For example, you can open the widget by default in SPLIT mode
(markdown editor and HTML preview side by side), by setting the defaultMode to split
. Notice
how the widget provides synchronized scrolling of the raw text and formatted HTML content. Note that the SPLIT mode
does the markdown conversion on the FLY as you type/edit, and can have a performance impact in updating the preview. If
you do not wish the preview to be updated on the FLY - then set enableLivePreview to false
.
Note, the demo example(s) uses:
this
as the raw input source for the markdown textarea
.
these assets loaded on the page in the order mentioned.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
Note that the /path/to
in the links below specifies the web accessible location on your server
where you have extracted and installed the
krajee-markdown-editor repo's files.
<!-- any of bootstrap 5.x, 4.x, 3.x styling is supported. Plugin auto detects bootstrap version based on bootstrap JS library loaded on the page. Else set `$.fn.markdownEditorBsVersion` explicitly before initializing the plugin --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" crossorigin="anonymous"> <!-- Font Awesome 5.x Icon library (check themes to change this) --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <!-- Krajee Markdown Editor Main Library Default Style --> <link href="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/css/markdown-editor.css" media="all" rel="stylesheet" type="text/css"/> <!-- Highlight JS style provided with plugin for code styling --> <link href="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/highlight/highlight.min.css" media="all" rel="stylesheet" type="text/css"/> <!-- jQuery JS Library --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Twitter Emojis Plugin (if you need twitter emojis) --> <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script> <!-- Include DOM purify plugin if you need to purify HTML output (needed only if markdown-it HTML input is allowed). This must be loaded before markdown-editor.js. --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/purify/purify.min.js" type="text/javascript"></script> <!-- Markdown IT Main Library --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it.min.js" type="text/javascript"></script> <!-- Markdown IT Definition List Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-deflist.min.js" type="text/javascript"></script> <!-- Markdown IT Footnote Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-footnote.min.js" type="text/javascript"></script> <!-- Markdown IT Abbreviation Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-abbr.min.js" type="text/javascript"></script> <!-- Markdown IT Subscript Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-sub.min.js" type="text/javascript"></script> <!-- Markdown IT Superscript Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-sup.min.js" type="text/javascript"></script> <!-- Markdown IT Underline/Inserted Text Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-ins.min.js" type="text/javascript"></script> <!-- Markdown IT Mark Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-mark.min.js" type="text/javascript"></script> <!-- Markdown IT SmartArrows Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-smartarrows.min.js" type="text/javascript"></script> <!-- Markdown IT Checkbox Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-checkbox.min.js" type="text/javascript"></script> <!-- Markdown IT East Asian Characters Line Break Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-cjk-breaks.min.js" type="text/javascript"></script> <!-- Markdown IT Emoji Plugin --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/markdown-it/markdown-it-emoji.min.js" type="text/javascript"></script> <!-- Highlight JS Main Plugin Library for code styling --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/plugins/highlight/highlight.min.js" type="text/javascript"></script> <!-- Bootstrap Complete Bundle Library (including Popper) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> <!-- Krajee Markdown Editor Main Library --> <script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/markdown-editor.js" type="text/javascript"></script> <!-- Optionally include theme.js script or theme.css for a different theme if needed --> <!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/themes/fa5/theme.js" type="text/javascript"></script --> <!-- Optionally include localization script for your language if needed --> <!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/krajee-markdown-editor@1.0.0/js/locales/en.js" type="text/javascript"></script>
<textarea id="editor-b3" name="editor-b3" class="form-control" rows="15"> {RAW MARKDOWN DATA} </textarea> <script type="text/javascript"> $('#editor-b3').markdownEditor({ bsVersion: '4.1.1', defaultMode: 'split' }); </script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.