j-Markdown

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten element zawiera tylko markdown parser.

Konfiguracja:

highlight {Boolean} umożliwia automatyczne syntazy (default: true)
charts {Boolean} umożliwia renderowanie wykresów Apex (default: false)
cdn {String} domyślny adres URL CDN dla zależności trzeciej strony (domyślnie: DEF.cdn)

Ustawienia Markdown:

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

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

opt.wrap = true wyciąga produkcję z <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' - standardowy znak linii
opt.ul = true umożliwia listy niepodzielne
opt.code = true umożliwia kodowanie
opt.images = true umożliwia obrazy
opt.links = true umożliwia linki
opt.formatting = true umożliwia podstawowe formatowanie tekstu
opt.icons = true umożliwia ikonę Font-Awesome za pośrednictwem lub
opt.tables = true umożliwia tablicy
opt.br = true umożliwia nowe linie poprzez
Puste linie opt.emptynewline = true zostaną przekazane jako puste
opt.headlines = true umożliwia nagłówki
opt.hr = true umożliwia przerwy strony
opt.blockquotes = true umożliwia kwoty blokowe < blockqote
opt.custom = function(line) { return line; } - indywidualny parzer dla każdej linii przetworzonej
opt.html = function(line, type) { return line; } dla każdej linii postprocesowanej
opt.sections = true umożliwia sekcje > section
opt.footnotes = true umożliwia notatki #1: foot note description i wykorzystanie w linkach [link](#1)
opt.urlify = true konwertuje adresy URL do linków
opt.keywords = true Słowa kluczowe w formie keyword
opt.noredraw = true skips odtwarzania kodów / filmów / sekcji / części blokowych (default: false)
Element opt.element {jQuery} HTML, który będzie używany jako element domyślny w FUNC.markdownredraw()
opt.bookmarks {Boolean} umożliwia tworzenie znaków głównych id="" (default: true)
opt.prefix {String} jest prefixem dla znaków książkowych (default: empty)
NEW: opt.ol = true umożliwia zamówione listy

Dobrze wiedzieć:

Zdjęcia będą w klasie img-responsive
Zdjęcia z zostaną sformułowane jako wtyczka
Zdjęcia z zostaną wyświetlone jako wtyczka z klasą gallery zamiast img-responsive.
Wszystkie linki są z atrybutem _target="_blank"
rejestry markdown FUNC.markdownredraw(jQuery_selector, [markdown_options]) do preendingu elementów dynamicznych Markdown, takich jak kody, filmy lub wykresy
Sekcja tajna jest zdefiniowana jako kod z syntaxem secret
Klasa markdown-small może zmniejszyć rozmiar czcionki
Wydarzenie ON('markdown', function(el, opt) {}) jest wykonane, jeśli znakowanie jest wstępnie przeniesione (el {jQuery} jest elementem <body w większości przypadków)
Składniki Thelpers.markdown([opt]) Helper
Każda linia zawiera klasę markdown-line i atrybut data-line="line_number".

Wspólna sekcja:

::: Section name
Another markdown content
:::

NOWOŚĆ: Wstępne użycie

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

Użyj go z <ui-component name="markdown">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>