# j-Markdown

> Deze component bevat alleen Markdown parser.

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

Deze component bevat alleen Markdown parser.

__Configuratie__:

- `highlight {Boolean}` zorgt voor een auto-syntax hoger licht (default: `true`)
- `charts {Boolean}` maakt Apex-grafiek rendering mogelijk (default: `false`)
- `cdn {String}` een standaard CDN-URL voor afhankelijkheid van derde partijen (de standaard: `DEF.cdn`)

__Markdown instellingen__:

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

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

- `opt.wrap = true` vernietigt de uitkomst met `<div class="markdown">YOUR_MARKDOWN</div>`
- `opt.linetag = 'p'` een standaard nieuwe lijn
- `opt.ul = true` maakt een onbeperkte lijst mogelijk
- `opt.code = true` maakt gebruik van codes
- `opt.images = true` maakt foto's mogelijk
- `opt.links = true` maakt links mogelijk
- `opt.formatting = true` maakt het mogelijk om tekst te formateren
- `opt.icons = true` maakt Font-Awesome iconen mogelijk via `:home:` of `:cog:`
- `opt.tables = true` maakt tabellen mogelijk
- `opt.br = true` maakt nieuwe lijnen mogelijk via `<br>`
- De `opt.emptynewline = true` lege lijnen worden als leeg gepresenteerd.
- `opt.headlines = true` geeft de titel
- `opt.hr = true` maakt pagina breaks mogelijk
- `opt.blockquotes = true` Blockquotes mogelijk maken `< blockqote`
- `opt.custom = function(line) { return line; }` een aangepaste parser voor elke verwerkte lijn
- `opt.html = function(line, type) { return line; }` een aangepaste parser voor elke post-verwerkte lijn
- `opt.sections = true` toelaat secties `> section`
- `opt.footnotes = true` maakt gebruik van `#1: foot note description` en `[link](#1)`
- `opt.urlify = true` converteert URL's naar links
- `opt.keywords = true` parse keywords in het formulier `{keyword}(type)`
- `opt.noredraw = true` schips redrawing van code/video/sectie/blokken (default: `false`)
- `opt.element {jQuery}` HTML-element dat als standaard element in `FUNC.markdownredraw()` wordt gebruikt
- `opt.bookmarks {Boolean}` maakt het mogelijk om de headerbeelden van `id=""` te creëren (default: `true`)
- `opt.prefix {String}` een voorbeeld voor boekmarken (default: `empty`)
- __NEW__: `opt.ol = true` maakt bestelde lijsten mogelijk

__Goed om te weten__:

- De foto's zijn in de `img-responsive`-klasse.
- Afbeeldingen met `![+Image description](URL)` worden als inline afbeelding geformateerd
- Afbeeldingen met `![-Image description](URL)` worden gepresenteerd als een inline afbeelding met klasse `gallery` in plaats van `img-responsive`.
- Alle links zijn met `_target="_blank"` attribute
- Markdown registers `FUNC.markdownredraw(jQuery_selector, [markdown_options])` voor de pre-rendering van Markdown dynamische elementen zoals code highlight, video's of grafieken
- Geheime sectie wordt gedefinieerd als code met syntax `secret`
- Klassen `markdown-small` kunnen de lettergrootte verlagen
- evenement `ON('markdown', function(el, opt) {})` wordt uitgevoerd als de markering is vooraf verkocht (`el {jQuery}` is in de meeste gevallen het element `<body`)
- De componenten registers van de `Thelpers.markdown([opt])` helper
- Elke gerenoveerde lijn bevat de `markdown-line`-klasse en het `data-line="line_number"`-attribuut.

__Samenvattend gedeelte:__

```html
::: Section name
Another markdown content
:::
```

## Nieuw: Inline gebruik

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

Gebruik het met `<ui-component name="markdown">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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