markdown.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. return marked(el);
  30. };
  31. var getForwardedAttributes = function(section) {
  32. var attributes = section.attributes;
  33. var result = [];
  34. for( var i = 0, len = attributes.length; i < len; i++ ) {
  35. var name = attributes[i].name,
  36. value = attributes[i].value;
  37. // disregard attributes that are used for markdown loading/parsing
  38. if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue;
  39. if( value ) {
  40. result.push( name + '=' + value );
  41. }
  42. else {
  43. result.push( name );
  44. }
  45. }
  46. return result.join( ' ' );
  47. };
  48. var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
  49. separator = separator || '^\n---\n$';
  50. var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
  51. reHorSeparator = new RegExp(separator),
  52. matches,
  53. lastIndex = 0,
  54. isHorizontal,
  55. wasHorizontal = true,
  56. content,
  57. sectionStack = [],
  58. markdownSections = '';
  59. // iterate until all blocks between separators are stacked up
  60. while( matches = reSeparator.exec(markdown) ) {
  61. // determine direction (horizontal by default)
  62. isHorizontal = reHorSeparator.test(matches[0]);
  63. if( !isHorizontal && wasHorizontal ) {
  64. // create vertical stack
  65. sectionStack.push([]);
  66. }
  67. // pluck slide content from markdown input
  68. content = markdown.substring(lastIndex, matches.index);
  69. if( isHorizontal && wasHorizontal ) {
  70. // add to horizontal stack
  71. sectionStack.push(content);
  72. } else {
  73. // add to vertical stack
  74. sectionStack[sectionStack.length-1].push(content);
  75. }
  76. lastIndex = reSeparator.lastIndex;
  77. wasHorizontal = isHorizontal;
  78. }
  79. // add the remaining slide
  80. (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));
  81. // flatten the hierarchical stack, and insert <section data-markdown> tags
  82. for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
  83. // horizontal
  84. if( typeof sectionStack[k] === 'string' ) {
  85. markdownSections += '<section '+ attributes +'>' + twrap( sectionStack[k] ) + '</section>';
  86. }
  87. // vertical
  88. else {
  89. markdownSections += '<section '+ attributes +'>' +
  90. '<section>' + sectionStack[k].map(twrap).join('</section><section>') + '</section>' +
  91. '</section>';
  92. }
  93. }
  94. return markdownSections;
  95. };
  96. var querySlidingMarkdown = function() {
  97. var sections = document.querySelectorAll( '[data-markdown]'),
  98. section;
  99. for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
  100. section = sections[j];
  101. if( section.getAttribute('data-markdown').length ) {
  102. var xhr = new XMLHttpRequest(),
  103. url = section.getAttribute('data-markdown');
  104. datacharset = section.getAttribute('data-charset');
  105. // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
  106. if (datacharset != null && datacharset != '') {
  107. xhr.overrideMimeType('text/html; charset=' + datacharset);
  108. }
  109. xhr.onreadystatechange = function () {
  110. if( xhr.readyState === 4 ) {
  111. if (xhr.status >= 200 && xhr.status < 300) {
  112. section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
  113. } else {
  114. section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
  115. '. Check your browser\'s JavaScript console for more details.' +
  116. '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>';
  117. }
  118. }
  119. };
  120. xhr.open('GET', url, false);
  121. try {
  122. xhr.send();
  123. } catch (e) {
  124. 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);
  125. }
  126. } else if( section.getAttribute('data-separator') ) {
  127. var markdown = stripLeadingWhitespace(section);
  128. section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
  129. }
  130. }
  131. };
  132. var queryMarkdownSlides = function() {
  133. var sections = document.querySelectorAll( '[data-markdown]');
  134. for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
  135. makeHtml(sections[j]);
  136. }
  137. };
  138. var makeHtml = function(section) {
  139. var notes = section.querySelector( 'aside.notes' );
  140. var markdown = stripLeadingWhitespace(section);
  141. section.innerHTML = marked(markdown);
  142. if( notes ) {
  143. section.appendChild( notes );
  144. }
  145. };
  146. querySlidingMarkdown();
  147. queryMarkdownSlides();
  148. })();