j-Markdown

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Este componente contém apenas o parser Markdown.

Configuração:

highlight {Boolean} permite a sintaxe automática de alta luz (default: true)
charts {Boolean} permite renderização de gráficos Apex (default: false)
cdn {String} um URL CDN padrão para dependências de terceiros (default: DEF.cdn)

Marcação Settings:

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

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

opt.wrap = true retira a produção com <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' uma nova linha padrão
opt.ul = true permite listas de dados
opt.code = true permite códigos personalizados
opt.images = true permite imagens
opt.links = true permite a ligação
opt.formatting = true permite o formato de texto básico
opt.icons = true permite ícones Font-Awesome através de ou
opt.tables = true permite tabelas
opt.br = true permite novas linhas através de
As linhas opt.emptynewline = true vazias serão renderizadas como linhas vaziadas
opt.headlines = true permite títulos
opt.hr = true permite brechas de página
opt.blockquotes = true permite a quota de bloco < blockqote
opt.custom = function(line) { return line; } um parser personalizado para cada linha processada
opt.html = function(line, type) { return line; } para cada linha pós-processada
opt.sections = true permite secções > section
opt.footnotes = true permite notas de pé #1: foot note description e uso em links [link](#1)
opt.urlify = true converte endereços URL em links
opt.keywords = true parsa palavras-chave na forma keyword
opt.noredraw = true Redirecção de peças de código/vídeo/segmento/bloco (default: false)
opt.element {jQuery} elemento HTML que será usado como um elemento padrão em FUNC.markdownredraw()
opt.bookmarks {Boolean} permite/disabilita-se a criação de notas de cabeçalho id="" (default: true)
opt.prefix {String} um prefixo para marcadores de livros (default: empty)
NEW: opt.ol = true permite listas ordenadas

Bom para saber:

As imagens serão de classe img-responsive.
As imagens com serão formateadas como uma imagem inline
As imagens com serão renderizadas como uma imagem em linha com a classe gallery em vez de img-responsive.
Todos os links são com o atributo _target="_blank"
Registo de Markdown FUNC.markdownredraw(jQuery_selector, [markdown_options]) para preencher elementos dinâmicos de MarkDown, tais como highlights de código, vídeos ou gráficos
Secção secreta é definida como código com sintaxe secret
Clase markdown-small pode reduzir tamanhos de letra
O evento ON('markdown', function(el, opt) {}) é executado se a marcação for pre-renderada (el {jQuery} é o elemento <body na maioria dos casos)
Registo de componentes Thelpers.markdown([opt])
Cada linha renderizada contém a classe markdown-line e o atributo data-line="line_number"

Secção Jovem:

::: Section name
Another markdown content
:::

NEW: Utilização em linha

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

Use-o com <ui-component name="markdown">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>