# j-MarkdownPreview

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: b57b2722ddefdc7c68a1832ff9e5c78a504355420b4a5267968aa0e026551d1a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```html 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>
```