Improve markdown support. (#817)

1. Support `marked`, you can using it instead. #811
2. Auto trim the indentation, so it can be indent like regular HTML.
   #812

examples/markdown/index.html

@@ -182,6 +182,7 @@ toggle the CSS style:</p>
 <script type="text/javascript" src="../../extras/highlight/highlight.pack.js"></script>
 <script type="text/javascript" src="../../extras/mermaid/mermaid.min.js"></script>
 <script type="text/javascript" src="../../extras/markdown/markdown.js"></script>
+<!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
 
 <!--
     To make all described above really work, you need to include impress.js in the page.

js/impress.js

@@ -2023,48 +2023,95 @@
  * Copyright 2016 Henrik Ingo (@henrikingo)
  * Released under the MIT license.
  */
-/* global markdown, hljs, mermaid, impress, document, window */
+/* global markdown, marked, hljs, mermaid, impress */
 
 ( function( document, window ) {
     "use strict";
 
-    var preInit = function() {
+    const SLIDE_SEPARATOR = /^-----$/m;
-        if ( window.markdown ) {
 
-            // Unlike the other extras, Markdown.js doesn't by default do anything in
+    const getMarkdownParser = function( ) {
-            // particular. We do it ourselves here.
+        if ( window.hasOwnProperty( "marked" ) ) {
-            // In addition, we use "-----" as a delimiter for new slide.
 
-            // Query all .markdown elements and translate to HTML
+            // Using marked
-            var markdownDivs = document.querySelectorAll( ".markdown" );
+            return function( elem, src ) {
-            for ( var idx = 0; idx < markdownDivs.length; idx++ ) {
+                return marked.parse( src );
-              var element = markdownDivs[ idx ];
+            };
-              var dialect = element.dataset.markdownDialect;
+        } else if ( window.hasOwnProperty( "markdown" ) ) {
 
-              var slides = element.textContent.split( /^-----$/m );
+            // Using builtin markdown engine
-              var i = slides.length - 1;
+            return function( elem, src ) {
-              element.innerHTML = markdown.toHTML( slides[ i ], dialect );
+                var dialect = elem.dataset.markdownDialect;
+                return markdown.toHTML( src, dialect );
+            };
+        }
 
-              // If there's an id, unset it for last, and all other, elements,
+        return null;
-              // and then set it for the first.
+    };
-              var id = null;
+
-              if ( element.id ) {
+    const getMarkdownSlides = function( elem ) {
-                id = element.id;
+        var text = elem.textContent;
-                element.id = "";
+
-              }
+        // Using first not blank line to detect leading whitespaces.
-              i--;
+        // can't properly handle the mixing of space and tabs
-              while ( i >= 0 ) {
+        var m = text.match( /^([ \t]*)\S/m );
-                var newElement = element.cloneNode( false );
+        if ( m !== null ) {
-                newElement.innerHTML = markdown.toHTML( slides[ i ], dialect );
+            text = text.replace( new RegExp( "^" + m[ 1 ], "mg" ), "" );
-                element.parentNode.insertBefore( newElement, element );
+        }
-                element = newElement;
+
-                i--;
+        return text.split( SLIDE_SEPARATOR );
-              }
+    };
-              if ( id !== null ) {
+
-                element.id = id;
+    const convertMarkdowns = function( selector ) {
-              }
+
+        // Detect markdown engine
+        var parseMarkdown = getMarkdownParser();
+        if ( !parseMarkdown ) {
+            return;
+        }
+
+        for ( var elem of document.querySelectorAll( selector ) ) {
+            var id = null;
+            if ( elem.id ) {
+                id = elem.id;
+                elem.id = "";
             }
-        } // Markdown
+
+            var origTitle = null;
+            if ( elem.title ) {
+                origTitle = elem.title;
+                elem.title = "";
+            }
+
+            var slides = getMarkdownSlides( elem );
+            var slideElems = [ elem ];
+
+            for ( var j = 1; j < slides.length; ++j ) {
+                var newElem = elem.cloneNode( false );
+                newElem.id = "";
+                elem.parentNode.insertBefore( newElem, slideElems[ 0 ] );
+                slideElems.splice( 0, 0, newElem );
+            }
+
+            if ( id ) {
+                slideElems[ 0 ].id = id;
+            }
+
+            for ( var i = 0; i < slides.length; ++i ) {
+                slideElems[ i ].innerHTML =
+                    parseMarkdown( slideElems[ i ], slides[ i ] );
+
+                if ( origTitle && ( i === 0 ) ) {
+                    slideElems[ i ].title = origTitle;
+                }
+            }
+        }
+    };
+
+    var preInit = function() {
+
+        // Query all .markdown elements and translate to HTML
+        convertMarkdowns( ".markdown" );
 
         if ( window.hljs ) {
             hljs.initHighlightingOnLoad();

src/plugins/extras/extras.js

@@ -9,48 +9,95 @@
  * Copyright 2016 Henrik Ingo (@henrikingo)
  * Released under the MIT license.
  */
-/* global markdown, hljs, mermaid, impress, document, window */
+/* global markdown, marked, hljs, mermaid, impress */
 
 ( function( document, window ) {
     "use strict";
 
-    var preInit = function() {
+    const SLIDE_SEPARATOR = /^-----$/m;
-        if ( window.markdown ) {
 
-            // Unlike the other extras, Markdown.js doesn't by default do anything in
+    const getMarkdownParser = function( ) {
-            // particular. We do it ourselves here.
+        if ( window.hasOwnProperty( "marked" ) ) {
-            // In addition, we use "-----" as a delimiter for new slide.
 
-            // Query all .markdown elements and translate to HTML
+            // Using marked
-            var markdownDivs = document.querySelectorAll( ".markdown" );
+            return function( elem, src ) {
-            for ( var idx = 0; idx < markdownDivs.length; idx++ ) {
+                return marked.parse( src );
-              var element = markdownDivs[ idx ];
+            };
-              var dialect = element.dataset.markdownDialect;
+        } else if ( window.hasOwnProperty( "markdown" ) ) {
 
-              var slides = element.textContent.split( /^-----$/m );
+            // Using builtin markdown engine
-              var i = slides.length - 1;
+            return function( elem, src ) {
-              element.innerHTML = markdown.toHTML( slides[ i ], dialect );
+                var dialect = elem.dataset.markdownDialect;
+                return markdown.toHTML( src, dialect );
+            };
+        }
 
-              // If there's an id, unset it for last, and all other, elements,
+        return null;
-              // and then set it for the first.
+    };
-              var id = null;
+
-              if ( element.id ) {
+    const getMarkdownSlides = function( elem ) {
-                id = element.id;
+        var text = elem.textContent;
-                element.id = "";
+
-              }
+        // Using first not blank line to detect leading whitespaces.
-              i--;
+        // can't properly handle the mixing of space and tabs
-              while ( i >= 0 ) {
+        var m = text.match( /^([ \t]*)\S/m );
-                var newElement = element.cloneNode( false );
+        if ( m !== null ) {
-                newElement.innerHTML = markdown.toHTML( slides[ i ], dialect );
+            text = text.replace( new RegExp( "^" + m[ 1 ], "mg" ), "" );
-                element.parentNode.insertBefore( newElement, element );
+        }
-                element = newElement;
+
-                i--;
+        return text.split( SLIDE_SEPARATOR );
-              }
+    };
-              if ( id !== null ) {
+
-                element.id = id;
+    const convertMarkdowns = function( selector ) {
-              }
+
+        // Detect markdown engine
+        var parseMarkdown = getMarkdownParser();
+        if ( !parseMarkdown ) {
+            return;
+        }
+
+        for ( var elem of document.querySelectorAll( selector ) ) {
+            var id = null;
+            if ( elem.id ) {
+                id = elem.id;
+                elem.id = "";
             }
-        } // Markdown
+
+            var origTitle = null;
+            if ( elem.title ) {
+                origTitle = elem.title;
+                elem.title = "";
+            }
+
+            var slides = getMarkdownSlides( elem );
+            var slideElems = [ elem ];
+
+            for ( var j = 1; j < slides.length; ++j ) {
+                var newElem = elem.cloneNode( false );
+                newElem.id = "";
+                elem.parentNode.insertBefore( newElem, slideElems[ 0 ] );
+                slideElems.splice( 0, 0, newElem );
+            }
+
+            if ( id ) {
+                slideElems[ 0 ].id = id;
+            }
+
+            for ( var i = 0; i < slides.length; ++i ) {
+                slideElems[ i ].innerHTML =
+                    parseMarkdown( slideElems[ i ], slides[ i ] );
+
+                if ( origTitle && ( i === 0 ) ) {
+                    slideElems[ i ].title = origTitle;
+                }
+            }
+        }
+    };
+
+    var preInit = function() {
+
+        // Query all .markdown elements and translate to HTML
+        convertMarkdowns( ".markdown" );
 
         if ( window.hljs ) {
             hljs.initHighlightingOnLoad();