Enable passing options for parsing Markdown.

Closes #1163, #1495.
main
Benjamin Tan 6 years ago
parent 2bd6b563be
commit 90b301d0a0

@ -160,6 +160,18 @@ Special syntax (in html comment) is available for adding attributes to the slide
</section>
```
#### Configuring `marked`
We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):
```javascript
Reveal.initialize({
// Options which are passed into marked
// See https://github.com/chjj/marked#options-1
markdown: {
smartypants: true
}
});
### Configuration

@ -17,18 +17,6 @@
}
}( this, function( marked ) {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( code, lang ) {
return hljs.highlightAuto( code, [lang] ).value;
}
});
}
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
DEFAULT_NOTES_SEPARATOR = 'note:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
@ -189,7 +177,7 @@
markdownSections += '<section '+ options.attributes +'>';
sectionStack[i].forEach( function( child ) {
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
} );
markdownSections += '</section>';
@ -391,6 +379,24 @@
return {
initialize: function() {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( code, lang ) {
return hljs.highlightAuto( code, [lang] ).value;
}
});
}
var options = Reveal.getConfig().markdown;
if ( options ) {
marked.setOptions( options );
}
processSlides();
convertSlides();
},

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Markdown Options</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-1.12.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section data-markdown>
<script type="text/template">
## Testing Markdown Options
This "slide" should contain 'smart' quotes.
</script>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script>
<script src="qunit-1.12.0.js"></script>
<script src="test-markdown-options.js"></script>
</body>
</html>

@ -0,0 +1,26 @@
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' );
test( 'Options are set', function() {
strictEqual( marked.defaults.smartypants, true );
});
test( 'Smart quotes are activated', function() {
var text = document.querySelector( '.reveal .slides>section>p' ).textContent;
strictEqual( /['"]/.test( text ), false );
strictEqual( /[“”‘’]/.test( text ), true );
});
} );
Reveal.initialize({
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
],
markdown: {
smartypants: true
}
});

@ -13,7 +13,7 @@
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">

Loading…
Cancel
Save