j-Markdown

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente enthält nur den Markdown-Parser.

Konfiguration:

highlight {Boolean} ermöglicht Auto-Syntax Highlight (Default: true)
charts {Boolean} ermöglicht Apex-Grafen rendering (Default: false)
cdn {String} eine Standard-CDN-URL für Abhängigkeiten von Drittanbietern (Default: DEF.cdn)

Markdown Einstellungen:

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

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

opt.wrap = true entführt die Produktion mit <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' ein Standard-Neue Zeichen
opt.ul = true ermöglicht unerträgliche Listen
opt.code = true ermöglicht Custom Codes
opt.images = true ermöglicht Bilder
opt.links = true ermöglicht Links
opt.formatting = true ermöglicht die Grundtextformatung
opt.icons = true ermöglicht Font-Awesome-Ikonen über oder
opt.tables = true ermöglicht Tabellen
opt.br = true ermöglicht neue Linien über
opt.emptynewline = true leere Linien werden als leere Linien dargestellt
opt.headlines = true ermöglicht Titel
opt.hr = true ermöglicht Seitenbrechen
opt.blockquotes = true ermöglicht Blockquotes < blockqote
opt.custom = function(line) { return line; } - ein angepasstes Parzer für jede verarbeitete Linie
opt.html = function(line, type) { return line; } - ein angepasstes Parzer für jede Post-Verarbeitungslinie
opt.sections = true ermöglicht Abschnitte > section
opt.footnotes = true Erlaubt Fußnote #1: foot note description Verwendung in Links [link](#1)
opt.urlify = true konvertiert URLs in Links
opt.keywords = true Parse Schlüsselwörter in der Form keyword
opt.noredraw = true Schiffe, um Code/Video/Sektion/Block Teile wiederzuführen (Default: false)
opt.element {jQuery} HTML-Element, das als Standardelement in FUNC.markdownredraw() verwendet wird
opt.bookmarks {Boolean} ermöglicht / verhindert die Erstellung von Titelbuchmarken id="" (Default: true)
opt.prefix {String} ist eine Vorwahl für Buchmarken (Default: empty)
NEW: opt.ol = true ermöglicht bestellte Listen

Gut zu wissen:

Bilder mit img-responsive-Klasse
Bilder mit werden als Inline-Bild formatiert
Bilder mit werden als inline Bild mit der Klasse gallery statt img-responsive dargestellt.
Alle Links sind mit _target="_blank" Attribute
Markdown-Registern FUNC.markdownredraw(jQuery_selector, [markdown_options]) für die Präenderung von Markdown dynamischen Elemente wie Code Highlight, Videos oder Charts
Geheimnis ist als Code mit Syntax secret definiert
Klasse markdown-small kann die Schriftgröße senken
ON('markdown', function(el, opt) {}) wird ausgeführt, wenn die Markierung vorgefertigt ist (el {jQuery} ist in den meisten Fällen das Element <body)
Komponentenregister Thelpers.markdown([opt]) Helper
Jede renderierte Linie enthält die markdown-line-Klasse und das data-line="line_number" Attribute.

Einheitliche Abschnitte:

::: Section name
Another markdown content
:::

NEW: Inline-Nutzung

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

Verwenden Sie es mit <ui-component name="markdown">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>