j-Markdown

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

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:

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 o
opt.tables = true habilita tablas
opt.br = true habilita nuevas líneas a través de
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
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 se formatearán como una imagen en línea
las imágenes con 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:

::: Section name
Another markdown content
:::

NUEVO: uso en línea

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

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>