j-Markdown

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component conține doar Markdown parser.

Configurarea:

highlight {Boolean} permite o lumină auto-syntax (default: true)
charts {Boolean} permite renderizarea graficelor Apex (default: false)
cdn {String} este o adresă URL CDN de bază pentru dependențele terțe (default: DEF.cdn)

Setări de marcat:

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

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

opt.wrap = true îndepărtează producția cu <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' este o nouă etichetă
opt.ul = true permite listele neconformate
opt.code = true permite coduri personalizate
opt.images = true permite imagini
opt.links = true permite legătura
opt.formatting = true permite formatul de text
opt.icons = true permite icoanele Font-Awesome prin sau
opt.tables = true permite tablouri
opt.br = true permite noi linii prin
Liniile opt.emptynewline = true goale vor fi prezentate ca linii goale
opt.headlines = true permite titluri
opt.hr = true permite pauzele de pagină
opt.blockquotes = true permite cote de blocuri < blockqote
opt.custom = function(line) { return line; } un parser personalizat pentru fiecare linie procesată
opt.html = function(line, type) { return line; } un parser personalizat pentru fiecare linie post-procesată
opt.sections = true permite secțiunile > section
opt.footnotes = true permite utilizarea notelor #1: foot note description și a legăturilor [link](#1)
opt.urlify = true convertează adresele URL în link-uri
opt.keywords = true parseaza cuvinte cheie in formularul keyword
opt.noredraw = true redragere cod / video / secțiune / blocuri (defață: false)
Elementul opt.element {jQuery} HTML care va fi folosit ca element de bază în FUNC.markdownredraw()
opt.bookmarks {Boolean} permite/disabilizează crearea de semne de titlu id="" (default: true)
opt.prefix {String} este un prefix pentru marcajele de carte (default: empty)
NEW: opt.ol = true permite listele comandate

bine să știi:

Imaginile vor fi cu clasa img-responsive
Imaginile cu vor fi formatate ca imagini inline
Imaginile cu vor fi prezentate ca imagini inline cu clasa gallery în loc de img-responsive.
Toate link-urile sunt cu atributul _target="_blank"
înregistrări de marcat FUNC.markdownredraw(jQuery_selector, [markdown_options]) pentru prelinderea elementelor dinamice de marcare, cum ar fi evidența codului, videoclipurile sau graficele
Secțiunea secretă este definită ca cod cu sintaxul secret
Clasa markdown-small poate reduce dimensiunea fontului
Evenimentul ON('markdown', function(el, opt) {}) este executat dacă marcajul este pre-renderat (el {jQuery} este elementul <body în majoritatea cazurilor)
Registerul de componente Thelpers.markdown([opt])
Fiecare linie renderată conține clasa markdown-line și atributul data-line="line_number"

Secțiunea de coordonare:

::: Section name
Another markdown content
:::

Cuvânt cheie: Inline utilizare

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

Utilizați-l cu <ui-component name="markdown">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>