j-Markdown

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

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:

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 of
opt.tables = true maakt tabellen mogelijk
opt.br = true maakt nieuwe lijnen mogelijk via
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
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 worden als inline afbeelding geformateerd
Afbeeldingen met 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:

::: Section name
Another markdown content
:::

Nieuw: Inline gebruik

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

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>