# j-Markdown

> Ce composant contient uniquement l'analyseur Markdown.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 1b2cac528d4faf4ef7e9ac1a8d3a1deb58f228856985415758157549ce6aa9a6
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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__ :

```js
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 `:home:` ou `:cog:`
- `opt.tables = true` active les tableaux
- `opt.br = true` permet de nouvelles lignes via `<br>`
- 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}(type)`
- `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 `![+Image description](URL)` seront formatées comme une image en ligne
- les images avec `![-Image description](URL)` 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 :__

```html
::: Section name
Another markdown content
:::
```

## __NEW__ : utilisation en ligne

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

```html 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>
```