# j-Markdown

> Este componente contiene únicamente el analizador Markdown.

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

Este componente contiene únicamente el analizador Markdown.

__Configuración__:

- `highlight {Boolean}` habilita el resaltador de sintaxis automática (predeterminado: `true`)
- `charts {Boolean}` habilita la representación de gráficos Apex (predeterminado: `false`)
- `cdn {String}` una dirección URL CDN predeterminada para dependencias de terceros (predeterminado: `DEF.cdn`)

__Configuración de rebajas__:

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

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

- `opt.wrap = true` envuelve la salida con `<div class="markdown">YOUR_MARKDOWN</div>`
- `opt.linetag = 'p'` una nueva etiqueta de línea predeterminada
- `opt.ul = true` habilita listas desordenadas
- `opt.code = true` habilita códigos personalizados
- `opt.images = true` habilita imágenes
- `opt.links = true` habilita enlaces
- `opt.formatting = true` permite el formato de texto básico
- `opt.icons = true` habilita íconos Font-Awesome a través de `:home:` o `:cog:`
- `opt.tables = true` habilita tablas
- `opt.br = true` habilita nuevas líneas a través de `<br>`
- `opt.emptynewline = true` las líneas vacías se representarán como líneas vacías
- `opt.headlines = true` habilita titulares
- `opt.hr = true` habilita saltos de página
- `opt.blockquotes = true` habilita citas en bloque `< blockqote`
- `opt.custom = function(line) { return line; }` un analizador personalizado para cada línea procesada
- `opt.html = function(line, type) { return line; }` un analizador personalizado para cada línea posprocesada
- `opt.sections = true` habilita las secciones `> section`
- `opt.footnotes = true` habilita notas a pie de página `#1: foot note description` y uso en enlaces `[link](#1)`
- `opt.urlify = true` convierte direcciones URL en enlaces
- `opt.keywords = true` analiza palabras clave en el formato `{keyword}(type)`
- `opt.noredraw = true` omite el redibujado de partes de código/vídeo/sección/bloque (predeterminado: `false`)
- Elemento HTML `opt.element {jQuery}` que se utilizará como elemento predeterminado en `FUNC.markdownredraw()`.
- `opt.bookmarks {Boolean}` habilita/deshabilita la creación de marcadores de titulares `id=""` (predeterminado: `true`)
- `opt.prefix {String}` un prefijo para marcadores (predeterminado: `empty`)
- __NUEVO__: `opt.ol = true` habilita listas ordenadas

__Es bueno saberlo__:

- las imágenes serán con la clase `img-responsive`
- las imágenes con `![+Image description](URL)` se formatearán como una imagen en línea
- las imágenes con `![-Image description](URL)` se representarán como una imagen en línea con la clase `gallery` en lugar de `img-responsive`.
- todos los enlaces tienen el atributo `_target="_blank"`
- registros de rebajas `FUNC.markdownredraw(jQuery_selector, [markdown_options])` para prerenderización de elementos dinámicos de Markdown como resaltado de código, vídeos o gráficos
- la sección secreta se define como código con sintaxis `secret`
- la clase `markdown-small` puede disminuir el tamaño de fuente
- El evento `ON('markdown', function(el, opt) {})` se ejecuta si la rebaja está renderizada previamente (`el {jQuery}` es el elemento `<body` en la mayoría de los casos)
- registros de componentes `Thelpers.markdown([opt])` ayudante
- cada línea renderizada contiene la clase `markdown-line` y el atributo `data-line="line_number"`

__Sección alternable:__

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

## __NUEVO__: uso en línea

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

Úselo con `<ui-component name="markdown">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```