j-Markdown

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente contiene solo Markdown parser.

Configurazione:

highlight {Boolean} consente un'alta illuminazione auto-sintax (default: true)
charts {Boolean} consente di rendere i grafici Apex (default: false)
cdn {String} un indirizzo URL CDN predefinito per le dipendenze di terze parti (predefinita: DEF.cdn)

Impostazioni di Markdown:

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

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

opt.wrap = true rimuove la produzione con <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' è una nuova linea
opt.ul = true consente elenchi non definiti
opt.code = true permette i codici personalizzati
opt.images = true per le immagini
opt.links = true permette il collegamento
opt.formatting = true consente di formattare il testo
opt.icons = true consente i simboli Font-Awesome tramite o
opt.tables = true per le tabelle
opt.br = true consente nuove linee tramite
Le linee opt.emptynewline = true vuote saranno rilasciate come linee vuote
opt.headlines = true per le titoli
opt.hr = true consente le interruzioni di pagina
opt.blockquotes = true permette il blocco di < blockqote
opt.custom = function(line) { return line; } per ogni linea lavorata
opt.html = function(line, type) { return line; } per ogni linea post-processata
opt.sections = true permette le sezioni > section
opt.footnotes = true consente note di #1: foot note description e utilizzo in collegamenti [link](#1)
opt.urlify = true converte gli indirizzi URL in link
Le parole chiave di opt.keywords = true nel modulo keyword
opt.noredraw = true riproduzione di codice/video/sezione/parte di blocco (default: false)
L'elemento opt.element {jQuery} HTML che verrà utilizzato come elemento predefinito in FUNC.markdownredraw()
opt.bookmarks {Boolean} consente/disabilita la creazione di caratteri di titolo id="" (default: true)
opt.prefix {String} è un prefix per i bookmark (default: empty)
NEW: opt.ol = true consente elenchi ordinati

Buono sapere:

Le immagini saranno con la classe img-responsive
Le immagini con saranno formattate come immagini in linea
Le immagini con saranno rilasciate come un'immagine in linea con la classe gallery invece di img-responsive.
Tutti i collegamenti sono con l'attributo _target="_blank"
registri di taglio FUNC.markdownredraw(jQuery_selector, [markdown_options]) per la predisposizione degli elementi dinamici di taglia come il codice, i video o i grafici
La sezione segreta è definita come il codice con la sintasi secret
La classe markdown-small può ridurre le dimensioni delle lettere
L'evento ON('markdown', function(el, opt) {}) viene eseguito se il marchio è pre-renderato (el {jQuery} è l'elemento <body nella maggior parte dei casi)
Registro di componenti Thelpers.markdown([opt])
Ogni linea renderata contiene la classe markdown-line e l'attributo data-line="line_number"

Sezione coerente:

::: Section name
Another markdown content
:::

NEW: utilizzo in linea

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

Utilizzare con <ui-component name="markdown">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>