# j-Markdown

> Diese Komponente enthält nur den Markdown-Parser.

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

Diese Komponente enthält nur den Markdown-Parser.

__Konfiguration__:

- `highlight {Boolean}` ermöglicht Auto-Syntax Highlight (Default: `true`)
- `charts {Boolean}` ermöglicht Apex-Grafen rendering (Default: `false`)
- `cdn {String}` eine Standard-CDN-URL für Abhängigkeiten von Drittanbietern (Default: `DEF.cdn`)

__Markdown Einstellungen__:

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

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

- `opt.wrap = true` entführt die Produktion mit `<div class="markdown">YOUR_MARKDOWN</div>`
- `opt.linetag = 'p'` ein Standard-Neue Zeichen
- `opt.ul = true` ermöglicht unerträgliche Listen
- `opt.code = true` ermöglicht Custom Codes
- `opt.images = true` ermöglicht Bilder
- `opt.links = true` ermöglicht Links
- `opt.formatting = true` ermöglicht die Grundtextformatung
- `opt.icons = true` ermöglicht Font-Awesome-Ikonen über `:home:` oder `:cog:`
- `opt.tables = true` ermöglicht Tabellen
- `opt.br = true` ermöglicht neue Linien über `<br>`
- `opt.emptynewline = true` leere Linien werden als leere Linien dargestellt
- `opt.headlines = true` ermöglicht Titel
- `opt.hr = true` ermöglicht Seitenbrechen
- `opt.blockquotes = true` ermöglicht Blockquotes `< blockqote`
- `opt.custom = function(line) { return line; }` - ein angepasstes Parzer für jede verarbeitete Linie
- `opt.html = function(line, type) { return line; }` - ein angepasstes Parzer für jede Post-Verarbeitungslinie
- `opt.sections = true` ermöglicht Abschnitte `> section`
- `opt.footnotes = true` Erlaubt Fußnote `#1: foot note description` Verwendung in Links `[link](#1)`
- `opt.urlify = true` konvertiert URLs in Links
- `opt.keywords = true` Parse Schlüsselwörter in der Form `{keyword}(type)`
- `opt.noredraw = true` Schiffe, um Code/Video/Sektion/Block Teile wiederzuführen (Default: `false`)
- `opt.element {jQuery}` HTML-Element, das als Standardelement in `FUNC.markdownredraw()` verwendet wird
- `opt.bookmarks {Boolean}` ermöglicht / verhindert die Erstellung von Titelbuchmarken `id=""` (Default: `true`)
- `opt.prefix {String}` ist eine Vorwahl für Buchmarken (Default: `empty`)
- __NEW__: `opt.ol = true` ermöglicht bestellte Listen

__Gut zu wissen__:

- Bilder mit `img-responsive`-Klasse
- Bilder mit `![+Image description](URL)` werden als Inline-Bild formatiert
- Bilder mit `![-Image description](URL)` werden als inline Bild mit der Klasse `gallery` statt `img-responsive` dargestellt.
- Alle Links sind mit `_target="_blank"` Attribute
- Markdown-Registern `FUNC.markdownredraw(jQuery_selector, [markdown_options])` für die Präenderung von Markdown dynamischen Elemente wie Code Highlight, Videos oder Charts
- Geheimnis ist als Code mit Syntax `secret` definiert
- Klasse `markdown-small` kann die Schriftgröße senken
- `ON('markdown', function(el, opt) {})` wird ausgeführt, wenn die Markierung vorgefertigt ist (`el {jQuery}` ist in den meisten Fällen das Element `<body`)
- Komponentenregister `Thelpers.markdown([opt])` Helper
- Jede renderierte Linie enthält die `markdown-line`-Klasse und das `data-line="line_number"` Attribute.

__Einheitliche Abschnitte:__

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

## __NEW__: Inline-Nutzung

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

Verwenden Sie es mit `<ui-component name="markdown">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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