2013-08-24 16:03:34 +02:00
/ * *
* The reveal . js markdown plugin . Handles parsing of
* markdown inside of presentations as well as loading
* of external markdown documents .
* /
2013-08-27 15:11:33 +02:00
( function ( root , factory ) {
if ( typeof exports === 'object' ) {
module . exports = factory ( require ( './marked' ) ) ;
}
else {
// Browser globals (root is window)
2013-09-06 14:40:43 +02:00
root . RevealMarkdown = factory ( root . marked ) ;
root . RevealMarkdown . initialize ( ) ;
2013-08-27 15:11:33 +02:00
}
} ( this , function ( marked ) {
2012-07-31 07:13:33 +02:00
2013-08-23 23:49:19 +02:00
if ( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded' ;
}
2013-06-25 13:15:22 +02:00
2013-08-23 23:49:19 +02:00
if ( typeof hljs !== 'undefined' ) {
marked . setOptions ( {
highlight : function ( lang , code ) {
return hljs . highlightAuto ( lang , code ) . value ;
}
} ) ;
}
2013-01-29 23:49:17 +01:00
2013-09-06 14:24:03 +02:00
var DEFAULT _SLIDE _SEPARATOR = '^\n---\n$' ,
DEFAULT _NOTES _SEPARATOR = 'note:' ;
2013-10-28 14:06:43 +01:00
DEFAULT _ELEMENT _ATTRIBUTES _SEPARATOR = '{_\s*?([^}]+?)}' ;
2013-09-06 14:24:03 +02:00
2013-08-24 16:39:15 +02:00
/ * *
* Retrieves the markdown contents of a slide section
* element . Normalizes leading tabs / whitespace .
* /
function getMarkdownFromSlide ( section ) {
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
var template = section . querySelector ( 'script' ) ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
// strip leading whitespace so it isn't evaluated as code
var text = ( template || section ) . textContent ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
var leadingWs = text . match ( /^\n?(\s*)/ ) [ 1 ] . length ,
leadingTabs = text . match ( /^\n?(\t*)/ ) [ 1 ] . length ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
if ( leadingTabs > 0 ) {
text = text . replace ( new RegExp ( '\\n?\\t{' + leadingTabs + '}' , 'g' ) , '\n' ) ;
}
else if ( leadingWs > 1 ) {
2013-10-31 14:02:34 +01:00
text = text . replace ( new RegExp ( '\\n? {' + leadingWs + '}' ) , '\n' ) ;
2013-08-23 23:49:19 +02:00
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
return text ;
2013-01-29 23:49:17 +01:00
2013-08-24 16:39:15 +02:00
}
2013-08-23 23:49:19 +02:00
2013-08-24 16:39:15 +02:00
/ * *
* Given a markdown slide section element , this will
* return all arguments that aren ' t related to markdown
* parsing . Used to forward any other user - defined arguments
* to the output markdown slide .
* /
2013-08-23 23:51:20 +02:00
function getForwardedAttributes ( section ) {
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
var attributes = section . attributes ;
var result = [ ] ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
for ( var i = 0 , len = attributes . length ; i < len ; i ++ ) {
var name = attributes [ i ] . name ,
value = attributes [ i ] . value ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
// disregard attributes that are used for markdown loading/parsing
if ( /data\-(markdown|separator|vertical|notes)/gi . test ( name ) ) continue ;
2013-07-23 17:31:30 +02:00
2013-08-23 23:49:19 +02:00
if ( value ) {
result . push ( name + '=' + value ) ;
}
else {
result . push ( name ) ;
}
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
return result . join ( ' ' ) ;
2013-01-29 23:49:17 +01:00
2013-08-24 16:39:15 +02:00
}
2013-09-06 14:24:03 +02:00
/ * *
* Inspects the given options and fills out default
* values for what ' s not defined .
* /
function getSlidifyOptions ( options ) {
options = options || { } ;
options . separator = options . separator || DEFAULT _SLIDE _SEPARATOR ;
options . notesSeparator = options . notesSeparator || DEFAULT _NOTES _SEPARATOR ;
options . attributes = options . attributes || '' ;
return options ;
}
2013-08-24 16:39:15 +02:00
/ * *
* Helper function for constructing a markdown slide .
* /
2013-08-24 22:13:24 +02:00
function createMarkdownSlide ( content , options ) {
2013-08-24 16:39:15 +02:00
2013-09-06 14:24:03 +02:00
options = getSlidifyOptions ( options ) ;
2013-08-24 22:13:24 +02:00
var notesMatch = content . split ( new RegExp ( options . notesSeparator , 'mgi' ) ) ;
2013-08-24 16:39:15 +02:00
2013-08-24 22:13:24 +02:00
if ( notesMatch . length === 2 ) {
content = notesMatch [ 0 ] + '<aside class="notes" data-markdown>' + notesMatch [ 1 ] . trim ( ) + '</aside>' ;
2013-08-24 16:39:15 +02:00
}
return '<script type="text/template">' + content + '</script>' ;
}
/ * *
* Parses a data string into multiple slides based
* on the passed in separator arguments .
* /
2013-08-27 15:11:33 +02:00
function slidify ( markdown , options ) {
2013-01-29 23:49:17 +01:00
2013-09-06 14:24:03 +02:00
options = getSlidifyOptions ( options ) ;
2013-01-29 23:49:17 +01:00
2013-08-24 16:39:15 +02:00
var separatorRegex = new RegExp ( options . separator + ( options . verticalSeparator ? '|' + options . verticalSeparator : '' ) , 'mg' ) ,
2013-08-24 22:13:24 +02:00
horizontalSeparatorRegex = new RegExp ( options . separator ) ;
2013-01-29 23:49:17 +01:00
2013-08-24 16:39:15 +02:00
var matches ,
2013-08-23 23:49:19 +02:00
lastIndex = 0 ,
isHorizontal ,
wasHorizontal = true ,
content ,
2013-08-24 16:39:15 +02:00
sectionStack = [ ] ;
2013-08-23 23:49:19 +02:00
// iterate until all blocks between separators are stacked up
while ( matches = separatorRegex . exec ( markdown ) ) {
2013-08-24 16:03:34 +02:00
notes = null ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
// determine direction (horizontal by default)
isHorizontal = horizontalSeparatorRegex . test ( matches [ 0 ] ) ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
if ( ! isHorizontal && wasHorizontal ) {
// create vertical stack
sectionStack . push ( [ ] ) ;
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
// pluck slide content from markdown input
content = markdown . substring ( lastIndex , matches . index ) ;
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
if ( isHorizontal && wasHorizontal ) {
// add to horizontal stack
2013-08-24 22:13:24 +02:00
sectionStack . push ( content ) ;
2013-08-24 16:39:15 +02:00
}
else {
2013-08-23 23:49:19 +02:00
// add to vertical stack
2013-08-24 22:13:24 +02:00
sectionStack [ sectionStack . length - 1 ] . push ( content ) ;
2013-08-23 23:49:19 +02:00
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
lastIndex = separatorRegex . lastIndex ;
wasHorizontal = isHorizontal ;
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
// add the remaining slide
2013-08-24 16:03:34 +02:00
( wasHorizontal ? sectionStack : sectionStack [ sectionStack . length - 1 ] ) . push ( markdown . substring ( lastIndex ) ) ;
2013-01-29 23:49:17 +01:00
2013-08-24 16:39:15 +02:00
var markdownSections = '' ;
2013-08-23 23:49:19 +02:00
// flatten the hierarchical stack, and insert <section data-markdown> tags
2013-08-24 17:06:52 +02:00
for ( var i = 0 , len = sectionStack . length ; i < len ; i ++ ) {
2013-08-23 23:49:19 +02:00
// vertical
2013-10-12 04:05:43 +02:00
if ( sectionStack [ i ] instanceof Array ) {
2013-08-24 22:13:24 +02:00
markdownSections += '<section ' + options . attributes + '>' ;
sectionStack [ i ] . forEach ( function ( child ) {
markdownSections += '<section data-markdown>' + createMarkdownSlide ( child , options ) + '</section>' ;
} ) ;
markdownSections += '</section>' ;
2013-08-24 16:39:15 +02:00
}
else {
2013-08-24 22:13:24 +02:00
markdownSections += '<section ' + options . attributes + ' data-markdown>' + createMarkdownSlide ( sectionStack [ i ] , options ) + '</section>' ;
2013-08-23 23:49:19 +02:00
}
}
2013-01-29 23:49:17 +01:00
2013-08-23 23:49:19 +02:00
return markdownSections ;
2012-11-16 15:25:26 +01:00
2013-08-24 16:39:15 +02:00
}
2013-08-27 15:11:33 +02:00
/ * *
* Parses any current data - markdown slides , splits
* multi - slide markdown into separate sections and
* handles loading of external markdown .
* /
function processSlides ( ) {
2012-07-31 07:13:33 +02:00
2013-08-23 23:49:19 +02:00
var sections = document . querySelectorAll ( '[data-markdown]' ) ,
section ;
2013-01-29 23:49:17 +01:00
2013-08-24 17:06:52 +02:00
for ( var i = 0 , len = sections . length ; i < len ; i ++ ) {
2013-01-30 00:09:02 +01:00
2013-08-24 17:06:52 +02:00
section = sections [ i ] ;
2013-08-23 23:49:19 +02:00
if ( section . getAttribute ( 'data-markdown' ) . length ) {
var xhr = new XMLHttpRequest ( ) ,
url = section . getAttribute ( 'data-markdown' ) ;
datacharset = section . getAttribute ( 'data-charset' ) ;
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if ( datacharset != null && datacharset != '' ) {
xhr . overrideMimeType ( 'text/html; charset=' + datacharset ) ;
}
xhr . onreadystatechange = function ( ) {
if ( xhr . readyState === 4 ) {
if ( xhr . status >= 200 && xhr . status < 300 ) {
2013-08-27 15:11:33 +02:00
section . outerHTML = slidify ( xhr . responseText , {
2013-08-24 16:39:15 +02:00
separator : section . getAttribute ( 'data-separator' ) ,
verticalSeparator : section . getAttribute ( 'data-vertical' ) ,
notesSeparator : section . getAttribute ( 'data-notes' ) ,
attributes : getForwardedAttributes ( section )
} ) ;
2013-08-23 23:49:19 +02:00
}
else {
2013-08-24 16:39:15 +02:00
section . outerHTML = '<section data-state="alert">' +
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr . status + '.' +
'Check your browser\'s JavaScript console for more details.' +
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
'</section>' ;
2013-08-23 23:49:19 +02:00
}
}
} ;
xhr . open ( 'GET' , url , false ) ;
try {
xhr . send ( ) ;
}
catch ( e ) {
alert ( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e ) ;
}
2013-08-24 16:39:15 +02:00
}
2013-09-06 14:24:03 +02:00
else if ( section . getAttribute ( 'data-separator' ) || section . getAttribute ( 'data-vertical' ) || section . getAttribute ( 'data-notes' ) ) {
2013-08-23 23:49:19 +02:00
2013-08-27 15:11:33 +02:00
section . outerHTML = slidify ( getMarkdownFromSlide ( section ) , {
2013-08-24 16:39:15 +02:00
separator : section . getAttribute ( 'data-separator' ) ,
verticalSeparator : section . getAttribute ( 'data-vertical' ) ,
notesSeparator : section . getAttribute ( 'data-notes' ) ,
attributes : getForwardedAttributes ( section )
} ) ;
2013-08-23 23:49:19 +02:00
}
2013-09-06 14:24:03 +02:00
else {
section . innerHTML = createMarkdownSlide ( getMarkdownFromSlide ( section ) ) ;
}
2013-08-23 23:49:19 +02:00
}
2013-08-24 16:39:15 +02:00
}
2013-08-23 23:49:19 +02:00
2013-10-26 21:34:11 +02:00
/ * *
* Check if a node value has the attributes pattern .
* If yes , extract it and add that value as one or several attributes
* the the terget element .
*
* You need Cache Killer on Chrome to see the effect on any FOM transformation
* directly on refresh ( F5 )
* http : //stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
* /
2013-10-28 14:06:43 +01:00
function addAttributeInElement ( node , elementTarget , separator ) {
2013-10-27 00:27:44 +02:00
var mardownClassesInElementsRegex = new RegExp ( separator , 'mg' ) ;
2013-10-26 21:34:11 +02:00
var mardownClassRegex = new RegExp ( "([^\"= ]+?)=\"([^\"=]+?)\"" , 'mg' ) ;
var nodeValue = node . nodeValue ;
2013-10-28 14:06:43 +01:00
if ( matches = mardownClassesInElementsRegex . exec ( nodeValue ) ) {
2013-10-26 21:34:11 +02:00
var classes = matches [ 1 ] ;
2013-10-26 22:33:43 +02:00
nodeValue = nodeValue . substring ( 0 , matches . index ) + nodeValue . substring ( mardownClassesInElementsRegex . lastIndex ) ;
2013-10-26 21:34:11 +02:00
node . nodeValue = nodeValue ;
while ( matchesClass = mardownClassRegex . exec ( classes ) ) {
2013-10-28 14:06:43 +01:00
elementTarget . setAttribute ( matchesClass [ 1 ] , matchesClass [ 2 ] ) ;
2013-10-26 21:34:11 +02:00
}
}
2013-10-28 14:06:43 +01:00
2013-10-26 21:34:11 +02:00
}
2013-10-24 22:37:55 +02:00
/ * *
2013-10-26 22:33:43 +02:00
* Add attributes to the parent element of a text node ,
* or the element of an attribute node .
2013-10-24 22:37:55 +02:00
* /
2013-10-28 14:06:43 +01:00
function addAttributes ( element , separator ) {
2013-10-24 22:37:55 +02:00
2013-10-28 14:06:43 +01:00
if ( element . childNodes . length > 0 ) {
for ( var i = 0 ; i < element . childNodes . length ; i ++ ) {
2013-10-27 00:27:44 +02:00
addAttributes ( element . childNodes [ i ] , separator ) ;
2013-10-24 22:37:55 +02:00
}
}
2013-10-28 14:06:43 +01:00
2013-10-26 21:34:11 +02:00
var nodeValue ;
var elementTarget ;
2013-10-28 14:06:43 +01:00
2013-10-26 22:33:43 +02:00
// From http://stackoverflow.com/questions/9178174/find-all-text-nodes
2013-10-28 14:06:43 +01:00
if ( element . nodeType == Node . TEXT _NODE && /\S/ . test ( element . nodeValue ) ) {
2013-10-27 00:27:44 +02:00
addAttributeInElement ( element , element . parentNode , separator ) ;
2013-10-26 21:34:11 +02:00
}
2013-10-28 14:06:43 +01:00
if ( element . nodeType == Node . ELEMENT _NODE && element . attributes . length > 0 ) {
for ( var j = 0 ; j < element . attributes . length ; j ++ ) {
var attr = element . attributes [ j ] ;
addAttributeInElement ( attr , element , separator ) ;
2013-10-24 22:37:55 +02:00
}
}
2013-10-28 14:06:43 +01:00
2013-10-24 22:37:55 +02:00
}
2013-08-27 15:11:33 +02:00
/ * *
* Converts any current data - markdown slides in the
* DOM to HTML .
* /
function convertSlides ( ) {
2013-08-23 23:49:19 +02:00
var sections = document . querySelectorAll ( '[data-markdown]' ) ;
2013-08-24 16:39:15 +02:00
for ( var i = 0 , len = sections . length ; i < len ; i ++ ) {
2013-08-23 23:49:19 +02:00
2013-08-24 16:39:15 +02:00
var section = sections [ i ] ;
2013-08-23 23:49:19 +02:00
2013-09-06 14:40:43 +02:00
// Only parse the same slide once
if ( ! section . getAttribute ( 'data-markdown-parsed' ) ) {
2013-08-23 23:49:19 +02:00
2013-09-06 14:40:43 +02:00
section . setAttribute ( 'data-markdown-parsed' , true )
var notes = section . querySelector ( 'aside.notes' ) ;
var markdown = getMarkdownFromSlide ( section ) ;
section . innerHTML = marked ( markdown ) ;
2013-10-27 00:27:44 +02:00
addAttributes ( section , section . getAttribute ( 'data-element-attributes' ) ||
section . parentNode . getAttribute ( 'data-element-attributes' ) ||
DEFAULT _ELEMENT _ATTRIBUTES _SEPARATOR ) ;
2013-09-06 14:40:43 +02:00
// If there were notes, we need to re-add them after
// having overwritten the section's HTML
if ( notes ) {
section . appendChild ( notes ) ;
}
2013-08-23 23:49:19 +02:00
2013-08-24 16:39:15 +02:00
}
2013-08-23 23:49:19 +02:00
}
2013-08-24 16:39:15 +02:00
}
2013-08-23 23:49:19 +02:00
2013-09-06 14:40:43 +02:00
// API
2013-08-27 15:11:33 +02:00
return {
2013-09-06 14:40:43 +02:00
initialize : function ( ) {
processSlides ( ) ;
convertSlides ( ) ;
} ,
// TODO: Do these belong in the API?
2013-08-27 15:11:33 +02:00
processSlides : processSlides ,
convertSlides : convertSlides ,
slidify : slidify
2013-09-06 14:40:43 +02:00
2013-08-27 15:11:33 +02:00
} ;
2013-01-29 23:49:17 +01:00
2013-08-27 15:11:33 +02:00
} ) ) ;