j-Markdown

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

This component contains only Markdown parser.

Configuration:

highlight {Boolean} enables auto-syntax highlighter (default: true)
charts {Boolean} enables Apex charts rendering (default: false)
cdn {String} a default CDN URL address for 3rd party dependencies (default: DEF.cdn)

Markdown settings:

var opt = {};
var text = 'YOUR_MARKDOWN_STRING';

console.log(text.markdown(opt));

opt.wrap = true wraps the output with <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' a default new line tag
opt.ul = true enables unordered lists
opt.code = true enables custom codes
opt.images = true enables images
opt.links = true enables links
opt.formatting = true enables basic text formatting
opt.icons = true enables Font-Awesome icons via or
opt.tables = true enables tables
opt.br = true enables new lines via
opt.emptynewline = true empty lines will be rendered as empty lines
opt.headlines = true enables headlines
opt.hr = true enables page breaks
opt.blockquotes = true enables blockquotes < blockqote
opt.custom = function(line) { return line; } a custom parser for each processed line
opt.html = function(line, type) { return line; } a custom parser for each post-processed line
opt.sections = true enables sections > section
opt.footnotes = true enables footnotes #1: foot note description and usage in links [link](#1)
opt.urlify = true converts URL addresses to links
opt.keywords = true parses keywords in the form keyword
opt.noredraw = true skips redrawing of code/video/section/block parts (default: false)
opt.element {jQuery} HTML element that will be used as a default element in FUNC.markdownredraw()
opt.bookmarks {Boolean} enables/disables creating headline bookmarks id="" (default: true)
opt.prefix {String} a prefix for bookmarks (default: empty)
NEW: opt.ol = true enables ordered lists

Good to know:

images will be with img-responsive class
images with will be formatted as an inline image
images with will be rendered as an inline image with class gallery instead of img-responsive
all links are with _target="_blank" attribute
markdown registers FUNC.markdownredraw(jQuery_selector, [markdown_options]) for prerendering of Markdown dynamic elements like code highlight, videos or charts
secret section is defined like code with syntax secret
class markdown-small can decrease font sizes
event ON('markdown', function(el, opt) {}) is executed if the markdown is pre-rendered (el {jQuery} is <body element in most cases)
components registers Thelpers.markdown([opt]) helper
every rendered line contain markdown-line class and data-line="line_number" attribute

Toggleable section:

::: Section name
Another markdown content
:::

NEW: Inline usage

<ui-markdown config="code:true|false (default);small:true|false (default)">
	<script type="text/plain">
		YOUR MARKDOWN CONTENT
	</script>
</ui-markdown>

Use it with <ui-component name="markdown">. 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="info"></ui-component>
<ui-component name="markdown" config="highlight:false"></ui-component>

<ui-bind path="markdown" config="html:Thelpers.markdown(value)" class="block"></ui-bind>

<hr />

<ui-markdown>
	<script type="text/plain">
# Hello world!

Inline markdown defined in `<ui-markdown>` element.
	</script>
</ui-markdown>

<script>
	var markdown = '# Hello `world`\nLorem ipsum dolor sit amet, **consectetur** adipisicing elit. Eius [1](#1), ~~illo~~.\n\n> This is a simple blockquote\n\n< And this one is section\n\n```javascript \nalert(\'Markdown Preview\');\n```\n\n::: Toggleable section\nHello world!\n:::\n\n```secret\nHello world\n```\n\n#1: footnote';

	$(document).on('mouseenter mouseleave click', '.markdown-footnote', function(e) {
		if (e.type === 'mouseenter' || e.type === 'click') {
			var el = $(this);
			var opt = {};
			opt.element = this;
			opt.offsetX = 10;
			opt.html = $('.markdown-footnotebody[data-id="{0}"]'.format(el.attrd('id'))).html();
			SETTER('info/show', opt);
		} else
			SETTER('!info/hide', true);
	});

</script>