markdown.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. // From https://gist.github.com/1343518
  2. // Modified by Hakim to handle Markdown indented with tabs
  3. (function(){
  4. if( typeof marked === 'undefined' ) {
  5. throw 'The reveal.js Markdown plugin requires marked to be loaded';
  6. }
  7. if( typeof hljs !== 'undefined' ) {
  8. marked.setOptions({
  9. highlight: function( lang, code ) {
  10. return hljs.highlightAuto( lang, code ).value;
  11. }
  12. });
  13. }
  14. var stripLeadingWhitespace = function( section ) {
  15. var template = section.querySelector( 'script' );
  16. // strip leading whitespace so it isn't evaluated as code
  17. var text = ( template || section ).textContent;
  18. var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
  19. leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
  20. if( leadingTabs > 0 ) {
  21. text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
  22. }
  23. else if( leadingWs > 1 ) {
  24. text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
  25. }
  26. return text;
  27. };
  28. var twrap = function( el ) {
  29. var content = el.content || el;
  30. if( el.asideContent ) {
  31. content += '<aside class="notes" data-markdown>' + el.asideContent + '</aside>';
  32. }
  33. return '<script type="text/template">' + content + '</script>';
  34. };
  35. var getForwardedAttributes = function( section ) {
  36. var attributes = section.attributes;
  37. var result = [];
  38. for( var i = 0, len = attributes.length; i < len; i++ ) {
  39. var name = attributes[i].name,
  40. value = attributes[i].value;
  41. // disregard attributes that are used for markdown loading/parsing
  42. if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
  43. if( value ) {
  44. result.push( name + '=' + value );
  45. }
  46. else {
  47. result.push( name );
  48. }
  49. }
  50. return result.join( ' ' );
  51. };
  52. var slidifyMarkdown = function( markdown, separator, vertical, notes, attributes ) {
  53. separator = separator || '^\n---\n$';
  54. notes = notes || 'note:';
  55. var separatorRegex = new RegExp( separator + ( vertical ? '|' + vertical : '' ), 'mg' ),
  56. horizontalSeparatorRegex = new RegExp( separator ),
  57. notesSeparatorRegex = new RegExp( notes, 'mgi' ),
  58. matches,
  59. noteMatch,
  60. lastIndex = 0,
  61. isHorizontal,
  62. wasHorizontal = true,
  63. content,
  64. asideContent,
  65. slide,
  66. sectionStack = [],
  67. markdownSections = '';
  68. // iterate until all blocks between separators are stacked up
  69. while( matches = separatorRegex.exec( markdown ) ) {
  70. asideContent = null;
  71. // determine direction (horizontal by default)
  72. isHorizontal = horizontalSeparatorRegex.test( matches[0] );
  73. if( !isHorizontal && wasHorizontal ) {
  74. // create vertical stack
  75. sectionStack.push( [] );
  76. }
  77. // pluck slide content from markdown input
  78. content = markdown.substring( lastIndex, matches.index );
  79. noteMatch = content.split( notesSeparatorRegex );
  80. if( noteMatch.length === 2 ) {
  81. content = noteMatch[0];
  82. asideContent = noteMatch[1].trim();
  83. }
  84. slide = {
  85. content: content,
  86. asideContent: asideContent || ''
  87. };
  88. if( isHorizontal && wasHorizontal ) {
  89. // add to horizontal stack
  90. sectionStack.push(slide);
  91. } else {
  92. // add to vertical stack
  93. sectionStack[sectionStack.length-1].push(slide);
  94. }
  95. lastIndex = separatorRegex.lastIndex;
  96. wasHorizontal = isHorizontal;
  97. }
  98. // add the remaining slide
  99. (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));
  100. // flatten the hierarchical stack, and insert <section data-markdown> tags
  101. for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
  102. // vertical
  103. if( sectionStack[k].propertyIsEnumerable( length ) && typeof sectionStack[k].splice === 'function' ) {
  104. markdownSections += '<section '+ attributes +'>' +
  105. '<section data-markdown>' + sectionStack[k].map( twrap ).join( '</section><section data-markdown>' ) + '</section>' +
  106. '</section>';
  107. } else {
  108. markdownSections += '<section '+ attributes +' data-markdown>' + twrap( sectionStack[k] ) + '</section>';
  109. }
  110. }
  111. return markdownSections;
  112. };
  113. var queryExternalMarkdown = function() {
  114. var sections = document.querySelectorAll( '[data-markdown]'),
  115. section;
  116. for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
  117. section = sections[j];
  118. if( section.getAttribute( 'data-markdown' ).length ) {
  119. var xhr = new XMLHttpRequest(),
  120. url = section.getAttribute( 'data-markdown' );
  121. datacharset = section.getAttribute( 'data-charset' );
  122. // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
  123. if( datacharset != null && datacharset != '' ) {
  124. xhr.overrideMimeType( 'text/html; charset=' + datacharset );
  125. }
  126. xhr.onreadystatechange = function() {
  127. if( xhr.readyState === 4 ) {
  128. if ( xhr.status >= 200 && xhr.status < 300 ) {
  129. section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute( 'data-separator' ), section.getAttribute( 'data-vertical' ), section.getAttribute( 'data-notes' ), getForwardedAttributes( section ) );
  130. }
  131. else {
  132. section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
  133. '. Check your browser\'s JavaScript console for more details.' +
  134. '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>';
  135. }
  136. }
  137. };
  138. xhr.open( 'GET', url, false );
  139. try {
  140. xhr.send();
  141. }
  142. catch ( e ) {
  143. 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 );
  144. }
  145. } else if( section.getAttribute( 'data-separator' ) ) {
  146. var markdown = stripLeadingWhitespace( section );
  147. section.outerHTML = slidifyMarkdown( markdown, section.getAttribute( 'data-separator' ), section.getAttribute( 'data-vertical' ), section.getAttribute( 'data-notes' ), getForwardedAttributes( section ) );
  148. }
  149. }
  150. };
  151. var queryMarkdownSlides = function() {
  152. var sections = document.querySelectorAll( '[data-markdown]');
  153. for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
  154. makeHtml( sections[j] );
  155. }
  156. };
  157. var makeHtml = function( section ) {
  158. var notes = section.querySelector( 'aside.notes' );
  159. var markdown = stripLeadingWhitespace( section );
  160. section.innerHTML = marked( markdown );
  161. if( notes ) {
  162. section.appendChild( notes );
  163. }
  164. };
  165. queryExternalMarkdown();
  166. queryMarkdownSlides();
  167. })();