FIX: don't wrap inline math (#17)

* adds CSS classes for styling

* don't wrap inline-math

* adds comment about selectors

assets/javascripts/initializers/discourse-math-katex.js.es6

@@ -21,8 +21,10 @@ function decorate(elem) {
   $elem.data("applied-katex", true);
 
   if ($elem.hasClass("math")) {
+    const tag = elem.tagName === "DIV" ? "div" : "span";
+    const displayClass = tag === "div" ? "block-math" : "inline-math";
     const text = $elem.text();
-    $elem.addClass("math-container").text("");
+    $elem.addClass(`math-container ${displayClass} katex-math`).text("");
     window.katex.render(text, elem, { displayMode });
   }
 }

assets/javascripts/initializers/discourse-math-mathjax.js.es6

@@ -48,16 +48,30 @@ function decorate(elem, isPreview) {
   if ($elem.hasClass("math")) {
     const tag = elem.tagName === "DIV" ? "div" : "span";
     const display = tag === "div" ? "; mode=display" : "";
+    const displayClass = tag === "div" ? "block-math" : "inline-math";
+    const type = `math/tex${display}`;
+    const classList = `math-container ${displayClass} mathjax-math`;
+
     $mathWrapper = $(
-      `<${tag} class="math-container" style="display: none;"><script type="math/tex${display}"></script></${tag}>`
+      `<${tag} class="${classList}" style="display: none;">
+         <script type="${type}"></script>
+       </${tag}>`
     );
+
     $math = $mathWrapper.children();
     $math.text($elem.text());
     $elem.after($mathWrapper);
   } else if ($elem.hasClass("asciimath")) {
+    // asciimath is always inline
+    const classList = `math-container inline-math ascii-math`;
+    const type = `math/asciimath`;
+
     $mathWrapper = $(
-      `<span class="math-container" style="display: none;"><script type="math/asciimath"></script></span>`
+      `<span class="${classList}" style="display: none;">
+         <script type="${type}"></script>
+       </span>`
     );
+
     $math = $mathWrapper.children();
     $math.text($elem.text());
     $elem.after($mathWrapper);

assets/stylesheets/common/discourse-math.scss

@@ -1,16 +1,27 @@
 .math-container {
+  &.block-math,
+  &.ascii-math {
     display: block;
 
-  > div:nth-child(2),
-  > span:nth-child(2),
-  > .katex-display {
+    // we use tag selectors because MathJax does not provide helpfull classes
+    // and the possible combinations a bit absurd. The styles are scoped by the
+    // parent selector. So they don't affect any other elements.
+    > {
+      div,
+      span {
         // Mathjax ships with !important inline;
         display: block !important;
         max-width: 100%;
         margin-bottom: 1em;
 
         // Inner containers for all renderers
-    > :first-child:not(.katex),
+        // mathjax generic
+        [id*="-Frame"],
+        > nobr,
+        > span,
+        // special handeling for SVG
+        &.MathJax_SVG,
+        // special handeling for katex
         .katex-html {
           display: block;
           overflow: auto hidden;
@@ -19,6 +30,7 @@
           box-sizing: border-box;
         }
       }
+    }
 
     // On mobile we add a slight fade on either side to indicate that the user can
     // scroll. However, this should not be added to the composer since mathjax does
@@ -26,6 +38,7 @@
     .cooked & {
       .mobile-view & {
         position: relative;
+
         &:before {
           content: "";
           position: absolute;
@@ -54,6 +67,12 @@
             rgba($secondary, 1) 100%
           );
         }
+
+        .MJXp-mtable,
+        .MJXp-mstyle {
+          padding: 0 0.75em;
+        }
+      }
     }
   }
 }