katex math rendering; fix broken 2477 delimiter, compatibility with external markdown #2559

examples/markdown.html

@@ -106,6 +106,16 @@
                     </script>
                 </section>
 
+                <!-- Math -->
+                <section data-markdown>
+					## The Lorenz Equations
+					`\[\begin{aligned}
+					\dot{x} &amp; = \sigma(y-x) \\
+					\dot{y} &amp; = \rho x - y - xz \\
+					\dot{z} &amp; = -\beta z + xy
+					\end{aligned} \]`
+                </section>
+
             </div>
 		</div>
 
@@ -113,6 +123,7 @@
         <script src="../plugin/markdown/markdown.js"></script>
         <script src="../plugin/highlight/highlight.js"></script>
         <script src="../plugin/notes/notes.js"></script>
+        <script src="../plugin/math/math.js"></script>
 
 		<script>
 
@@ -122,7 +133,7 @@
 				history: true,
 				center: true,
 
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
 			});
 
 		</script>

examples/markdown.md

@@ -31,6 +31,11 @@ Content 3.1
 Content 3.2
 
 
-## External 3.3
+## External 3.3 (Image)
 
 ![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
+
+
+## External 3.4 (Math)
+
+`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`

plugin/math/katex.js

@@ -11,8 +11,8 @@ export const KaTeX = () => {
 	let defaultOptions = {
 		version: 'latest',
 		delimiters: [
+			{left: '$$', right: '$$', display: true}, // Note: $$ has to come before $
 			{left: '$', right: '$', display: false},
-			{left: '$$', right: '$$', display: true},
 			{left: '\\(', right: '\\)', display: false},
 			{left: '\\[', right: '\\]', display: true}
 		],
@@ -73,12 +73,21 @@ export const KaTeX = () => {
 			}
 			katexScripts.push(karUrl);
 
+			const renderMath = () => {
+				renderMathInElement(reveal.getSlidesElement(), katexOptions);
+				deck.layout();
+			}
+
 			loadCss(cssUrl);
 
 			// For some reason dynamically loading with defer attribute doesn't result in the expected behavior, the below code does
 			loadScripts(katexScripts).then(() => {
-				renderMathInElement(document.body, katexOptions);
-				deck.layout();
+				if( deck.isReady() ) {
+					renderMath();
+				}
+				else {
+					deck.on( 'ready', renderMath.bind( this ) );
+				}
 			});
 
 		}