Style display math elements

aura-website · Mar 11, 2015 · 8873c7a · 8873c7a
1 parent 099b496
commit 8873c7a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/_sass/base/_global.scss b/_sass/base/_global.scss
@@ -72,10 +72,14 @@ dt {
 dd {
     margin-left: 2em;
 }
-p, ol, ul, dl {
+p, ol, ul, dl, .math-display {
   line-height: 1.5;
   margin-bottom: 1em;
 }
+.math-display {
+  display: inline-block;
+  width: 100%;
+}
 ol, ul {
   list-style-position: inside;
 }

diff --git a/js/main.js b/js/main.js
@@ -5,16 +5,18 @@ Array.prototype.forEach.call(elements, function(element) {
      // Extract math markdown
      var textToRender = element.innerText || element.textContent;
 
-     // Support inline math
+    // Create span for KaTeX
+     var katexElement = document.createElement('span');
+
+     // Support inline and display math
      if (element.type.indexOf('mode=display') != -1){
+       katexElement.className += "math-display";
        textToRender = '\\displaystyle {' + textToRender + '}';
+     } else {
+       katexElement.className += "math-inline";
      }
-
-     // Create span for KaTeX
-     var katexElement = document.createElement('span');
+
      katex.render(textToRender, katexElement);
-
-     // Insert KaTeX span
      element.parentNode.insertBefore(katexElement, element);
   }
 });