j-Markdown

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

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:

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 alebo
opt.tables = true umožňuje tabuľky
opt.br = true umožňuje nové linky cez
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
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 budú naformátované ako vložený obrázok
obrázky s 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:

::: Section name
Another markdown content
:::

NEW: Inline použitie

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

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>