# j-Markdown

> Tento komponent obsahuje iba analyzátor Markdown.

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

Tento komponent obsahuje iba analyzátor Markdown.

__Konfigurácia__:

- `highlight {Boolean}` umožňuje automatické zvýrazňovanie syntaxe (predvolené: `true`)
- `charts {Boolean}` umožňuje vykresľovanie Apex grafov (predvolené: `false`)
- `cdn {String}` predvolená adresa URL CDN pre závislosti tretích strán (predvolená: `DEF.cdn`)

__Nastavenia markdown__:

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

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

- `opt.wrap = true` zabalí výstup do `<div class="markdown">YOUR_MARKDOWN</div>`
- `opt.linetag = 'p'` predvolená značka nového riadku
- `opt.ul = true` umožňuje neusporiadané zoznamy
- `opt.code = true` umožňuje vlastné kódy
- `opt.images = true` umožňuje obrázky
- `opt.links = true` umožňuje prepojenia
- `opt.formatting = true` umožňuje základné formátovanie textu
- `opt.icons = true` umožňuje ikony typu Font-Awesome cez `:home:` alebo `:cog:`
- `opt.tables = true` umožňuje tabuľky
- `opt.br = true` umožňuje nové linky cez `<br>`
- Prázdne riadky `opt.emptynewline = true` budú vykreslené ako prázdne riadky
- `opt.headlines = true` umožňuje nadpisy
- `opt.hr = true` umožňuje zlomy strán
- `opt.blockquotes = true` umožňuje blokové úvodzovky `< blockqote`
- `opt.custom = function(line) { return line; }` vlastný syntaktický analyzátor pre každý spracovaný riadok
- `opt.html = function(line, type) { return line; }` vlastný syntaktický analyzátor pre každý riadok s dodatočným spracovaním
- `opt.sections = true` umožňuje sekcie `> section`
- `opt.footnotes = true` umožňuje poznámky pod čiarou `#1: foot note description` a použitie v odkazoch `[link](#1)`
- `opt.urlify = true` konvertuje adresy URL na odkazy
- `opt.keywords = true` analyzuje kľúčové slová v tvare `{keyword}(type)`
- `opt.noredraw = true` preskočí prekresľovanie častí kódu/videa/sekcie/bloku (predvolené: `false`)
- Prvok HTML `opt.element {jQuery}`, ktorý sa použije ako predvolený prvok v `FUNC.markdownredraw()`
- `opt.bookmarks {Boolean}` umožňuje/deaktivuje vytváranie záložiek titulkov `id=""` (predvolené: `true`)
- `opt.prefix {String}` predpona pre záložky (predvolené: `empty`)
- __NOVINKA__: `opt.ol = true` umožňuje zoradené zoznamy

__Je dobré vedieť__:

- obrázky budú s triedou `img-responsive`
- obrázky so `![+Image description](URL)` budú naformátované ako vložený obrázok
- obrázky s `![-Image description](URL)` budú vykreslené ako vložený obrázok s triedou `gallery` namiesto `img-responsive`
- všetky odkazy sú s atribútom `_target="_blank"`
- registre markdown `FUNC.markdownredraw(jQuery_selector, [markdown_options])` na predbežné vykresľovanie dynamických prvkov Markdown, ako sú zvýraznenie kódu, videá alebo grafy
- tajná sekcia je definovaná ako kód so syntaxou `secret`
- trieda `markdown-small` môže zmenšiť veľkosť písma
- udalosť `ON('markdown', function(el, opt) {})` sa vykoná, ak je označenie vopred vykreslené (`el {jQuery}` je vo väčšine prípadov prvok `<body`)
- pomocník registrov komponentov `Thelpers.markdown([opt])`
- každý vykreslený riadok obsahuje triedu `markdown-line` a atribút `data-line="line_number"`

__Prepínateľná sekcia:__

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

## __NEW__: Inline použitie

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

Použite ho so `<ui-component name="markdown">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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