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 είναι στη μορφή 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]) για την προετοιμασία των δυναμικών στοιχείων Markdown, όπως κωδικός, βίντεο ή χάρτες
Το μυστικό τμήμα ορίζεται ως κώδικα με σύνταξη 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
:::

Ετικέτα: Inline χρήση

<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 Συγγραφέας: Peter Širka. πηγή: το 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>