# j-Markdown

> Este componente contém apenas o parser Markdown.

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

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

```js
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 `:home:` ou `:cog:`
- `opt.tables = true` permite tabelas
- `opt.br = true` permite novas linhas através de `<br>`
- 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}(type)`
- `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 `![+Image description](URL)` serão formateadas como uma imagem inline
- As imagens com `![-Image description](URL)` 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:__

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

## __NEW__: Utilização em linha

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

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