j-Markdown

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Ce composant contient uniquement l'analyseur Markdown.

Configuration :

highlight {Boolean} active le surligneur de syntaxe automatique (par défaut : true)
charts {Boolean} active le rendu des graphiques Apex (par défaut : false)
cdn {String} une adresse URL CDN par défaut pour les dépendances tierces (par défaut : DEF.cdn)

Paramètres de démarque :

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

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

opt.wrap = true enveloppe la sortie avec <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' une nouvelle balise de ligne par défaut
opt.ul = true active les listes non ordonnées
opt.code = true permet des codes personnalisés
opt.images = true active les images
opt.links = true active les liens
opt.formatting = true permet le formatage de texte de base
opt.icons = true active les icônes Font-Awesome via ou
opt.tables = true active les tableaux
opt.br = true permet de nouvelles lignes via
Les lignes vides opt.emptynewline = true seront rendues sous forme de lignes vides
opt.headlines = true active les titres
opt.hr = true permet les sauts de page
opt.blockquotes = true active les guillemets < blockqote
opt.custom = function(line) { return line; } un analyseur personnalisé pour chaque ligne traitée
opt.html = function(line, type) { return line; } un analyseur personnalisé pour chaque ligne post-traitée
opt.sections = true active les sections > section
opt.footnotes = true permet les notes de bas de page #1: foot note description et l'utilisation dans les liens [link](#1)
opt.urlify = true convertit les adresses URL en liens
opt.keywords = true analyse les mots-clés sous la forme keyword
opt.noredraw = true ignore le redessin des parties de code/vidéo/section/bloc (par défaut : false)
Elément HTML opt.element {jQuery} qui sera utilisé comme élément par défaut dans FUNC.markdownredraw()
opt.bookmarks {Boolean} active/désactive la création de signets de titres id="" (par défaut : true)
opt.prefix {String} un préfixe pour les signets (par défaut : empty)
NOUVEAU : opt.ol = true permet les listes ordonnées

Bon à savoir :

les images seront avec la classe img-responsive
les images avec seront formatées comme une image en ligne
les images avec seront rendues sous forme d'image en ligne avec la classe gallery au lieu de img-responsive
tous les liens sont avec l'attribut _target="_blank"
Markdown enregistre FUNC.markdownredraw(jQuery_selector, [markdown_options]) pour le prérendu d'éléments dynamiques Markdown comme la surbrillance du code, des vidéos ou des graphiques
la section secrète est définie comme le code avec la syntaxe secret
la classe markdown-small peut diminuer la taille des polices
l'événement ON('markdown', function(el, opt) {}) est exécuté si la démarque est pré-rendue (el {jQuery} est l'élément <body dans la plupart des cas)
registres de composants assistant Thelpers.markdown([opt])
chaque ligne rendue contient la classe markdown-line et l'attribut data-line="line_number"

Section modifiable :

::: Section name
Another markdown content
:::

NEW : utilisation en ligne

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

Utilisez-le avec <ui-component name="markdown">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>