j-Markdown

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent innehåller endast Markdown parser.

Konfigurera:

highlight {Boolean} möjliggör auto-syntax högljus (default: true)
charts {Boolean} möjliggör Apex diagram rendering (default: false)
cdn {String} en standard CDN URL för tredjepartsberoende (default: DEF.cdn)

Markdown inställningar:

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

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

opt.wrap = true hämtar produktionen med <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' en standard ny linje tag
opt.ul = true möjliggör utformade listor
opt.code = true möjliggör anpassade koder
opt.images = true möjliggör bilder
opt.links = true möjliggör länkar
opt.formatting = true möjliggör grundläggande textformatering
opt.icons = true möjliggör Font-Awesome-ikoner via eller
opt.tables = true möjliggör tabeller
opt.br = true möjliggör nya linjer via
opt.emptynewline = true tomma linjer kommer att återges som tomma
opt.headlines = true möjliggör rubriker
opt.hr = true möjliggör sida bråk
opt.blockquotes = true möjliggör blockkvoter < blockqote
opt.custom = function(line) { return line; } en anpassad parser för varje bearbetad linje
opt.html = function(line, type) { return line; } en anpassad parser för varje postprocesserad linje
opt.sections = true aktiverar sektioner > section
opt.footnotes = true möjliggör fotnoter #1: foot note description och användning i länkar [link](#1)
opt.urlify = true konverterar URL till länkar
opt.keywords = true parserar nyckelord i form keyword
opt.noredraw = true skips redigering av kod/video/sektion/blockdelar (default: false)
opt.element {jQuery} HTML-element som kommer att användas som standardelement i FUNC.markdownredraw()
opt.bookmarks {Boolean} möjliggör/förhindrar skapandet av rubrikbokmärken id="" (default: true)
opt.prefix {String} en prefix för bokmärken (default: empty)
NEW: opt.ol = true möjliggör beställda listor

Bra att veta:

Bilderna kommer att vara med img-responsive-klassen
Bilder med kommer att formateras som en inline-bild
Bilder med kommer att renderas som en inline-bild med klass gallery istället för img-responsive.
Alla länkar är med _target="_blank" attribut
Markdown-registrar FUNC.markdownredraw(jQuery_selector, [markdown_options]) för förhandsvisning av markdown-dynamiska element som kodhögtalare, videor eller diagram
Hemlig sektion definieras som kod med syntax secret
Klassen markdown-small kan minska fontstorleken
händelse ON('markdown', function(el, opt) {}) utförs om marknadsföringen är förutlämnad (el {jQuery} är elementet <body i de flesta fall)
komponenter register Thelpers.markdown([opt]) hjälpar
Varje rad innehåller markdown-line-klass och data-line="line_number"-attribut

Sammanställbar avsnitt:

::: Section name
Another markdown content
:::

_NEW__: Inline användning

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

Använd den med <ui-component name="markdown">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>