j-Markdown

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez az összetevő csak Markdown parseret tartalmaz.

konfiguráció:

highlight {Boolean} lehetővé teszi az automatikus szintézis magasabb fényt (default: true)
charts {Boolean} lehetővé teszi az Apex grafikonok renderelését (default: false)
cdn {String} egy alapértelmezett CDN URL-cím a harmadik fél függőségekhez (alapértelmezés: DEF.cdn)

Markdown beállítások:

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

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

A opt.wrap = true a <div class="markdown">YOUR_MARKDOWN</div>-vel szűkíti kiadását
opt.linetag = 'p' egy új szabványos címke
A opt.ul = true lehetővé teszi a nem megfelelő listákat
A opt.code = true szabványos kódok
opt.images = true képek
A opt.links = true linket használja
A opt.formatting = true lehetővé teszi az alapvető szöveges formázást
A opt.icons = true a vagy a által használt Font-Awesome ikonokat teszi lehetővé
A opt.tables = true lehetővé teszi az asztalok
A opt.br = true új vonalakat engedélyez a
A opt.emptynewline = true üres vonalak üresek lesznek
A opt.headlines = true címkével rendelkezik
A opt.hr = true lehetővé teszi az oldalszakításokat
opt.blockquotes = true blokkláncok engedélyezése < blockqote
opt.custom = function(line) { return line; } egyéni parser minden feldolgozott vonalhoz
opt.html = function(line, type) { return line; } egy személyre szabott parser minden feldolgozott vonalhoz
A opt.sections = true lehetővé teszi a > section részeket
A opt.footnotes = true lehetővé teszi a #1: foot note description lábjegyzeteket és a [link](#1) linkek használatát
A opt.urlify = true URL-címeket átalakítja a linkekhez
A opt.keywords = true kulcsszavak a keyword formában
opt.noredraw = true hajók kód / videó / szakasz / blokk részek átirányítása (default: false)
opt.element {jQuery} HTML elem, amelyet alapértelmezett elemként használnak a FUNC.markdownredraw()
A opt.bookmarks {Boolean} lehetővé teszi / megakadályozza a id="" címjegyek létrehozását (előzetes: true)
opt.prefix {String} a könyvjelzők előzetes beállítása (például: empty)
NEW: opt.ol = true lehetővé teszi a megrendelt listákat

Jó tudni:

A képek a img-responsive osztályúak.
A -es képek inline képként formázhatók
A -es képeket a gallery osztályú, a img-responsive-es képként jelentik meg.
Az összes link a _target="_blank" attribútummal rendelkezik
FUNC.markdownredraw(jQuery_selector, [markdown_options]) markdown nyilvántartások a Markdown dinamikus elemek, mint például a kód hangsúlyozás, videók vagy grafikonok előterjesztéséhez
A titkos szakasz a secret szintax kódjaként van meghatározva
osztály markdown-small Csökkenti a font méretét
esemény ON('markdown', function(el, opt) {}) fut, ha a jelölés előre szállított (el {jQuery} a legtöbb esetben <body elem)
Az összetevők regisztrációja Thelpers.markdown([opt])
Minden rendelt vonal tartalmazza a markdown-line osztály és a data-line="line_number" attribútumot

Összefogható rész:

::: Section name
Another markdown content
:::

• Inline használata

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

Használja a <ui-component name="markdown">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>