j-MarkdownPreview

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component depends on j-Markdown component. It uses highlight.js library for syntax highlight.

supports syntax highlighting
supports YouTube, Vimeo and custom iframes
supports barchart and linechart rendering via ApexCharts

Configuration:

showsecret {String} a label for displaying of secret (default: Show secret data)
hidesecret {String} a label to hide of secret (default: Hide secret data)
html {Boolean} prepares inner HTML (it expects rendered Markdown) with Markdown utilities (syntax, secrets, links, etc.)
headlines {String} a link to method method(headlines) will be executed when the headlines will be parsed as quick bookmarks

Custom methods:

component.readingtime() returns approximate reading time in minutes
component.redraw(jquery_el) applies syntax highlighting, iframes and charts for the el element

Use it with <ui-component name="markdownpreview">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="markdown"></ui-component>
<ui-component name="markdownpreview" path="markdown"></ui-component>

<script>
	var markdown = '# Hello world\n\Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, illo.\n\n```javascript\nalert(\'Markdown Preview\');\n```';
</script>