j-Markdown

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент съдържа само Markdown parser.

Конфигуриране:

highlight {Boolean} позволява автосинтезиране на високата светлина (предварително: true)
charts {Boolean} позволява Apex графики (предварително: false)
cdn {String} е стандартна URL адреса на CDN за зависимост от трета страна (предварително: DEF.cdn)

Маркиране на настройките:

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

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

opt.wrap = true отвлича производството с <div class="markdown">YOUR_MARKDOWN</div>
opt.linetag = 'p' е дефолтната нова линия
opt.ul = true дава възможност за изчислени списъци
opt.code = true позволява персонализирани кодове
opt.images = true позволява изображения
opt.links = true позволява връзки
opt.formatting = true дава възможност за основен текст форматиране
opt.icons = true позволява икони на Font-Awesome чрез или
opt.tables = true позволява таблици
opt.br = true позволява нови линии чрез
opt.emptynewline = true Празни линии ще бъдат представени като празни линии
opt.headlines = true позволява заглавия
opt.hr = true позволява прекъсване на страницата
opt.blockquotes = true позволява блок квоти < blockqote
opt.custom = function(line) { return line; } - персонализиран парсер за всяка обработена линия
opt.html = function(line, type) { return line; } - персонализиран парсер за всяка следпроцесирана линия
opt.sections = true позволява разделите на > section
opt.footnotes = true позволява нотифициране на #1: foot note description и използване в връзки на [link](#1)
opt.urlify = true преобразува URL адресите в връзки
opt.keywords = true Parse ключови думи във формата на keyword
opt.noredraw = true Скип пренасочване на кода / видео / секция / блокови части (предварително: false)
opt.element {jQuery} HTML елемент, който ще бъде използван като подразбиране в FUNC.markdownredraw()
opt.bookmarks {Boolean} позволява/невъзможни за създаване на букмейкъри заглавие id="" (предварително: true)
opt.prefix {String} е префикс за букмейкъри (предварително: empty)
NEW: opt.ol = true позволява поръчани списъци

Добре е да се знае:

Снимките ще бъдат с клас img-responsive
Снимките с ще бъдат форматирани като инлайн
Снимките с ще бъдат представени като инлайн изображение с клас gallery вместо img-responsive
Всички връзки са с _target="_blank" атрибут
Регистриране на маркировките FUNC.markdownredraw(jQuery_selector, [markdown_options]) за пренасочване на динамични елементи като код, видеоклипове или графики
Секретната секция е дефинирана като код с синтез secret
Класа markdown-small може да намали размера на шрифта
събитие ON('markdown', function(el, opt) {}) се изпълнява, ако марката е предварително предадена (el {jQuery} е елемент <body в повечето случаи)
Комплектът за регистрация на Thelpers.markdown([opt])
Всяка рендерирана линия съдържа клас markdown-line и атрибут data-line="line_number"

Съвместими секции:

::: Section name
Another markdown content
:::

НОВА: Връзка с използване

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

Използвайте го с <ui-component name="markdown">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>