title: superscript not shown in katex css
body: <p>superscripts generated by katex are not shown properly. The style, while saved correctly in the database, is not shown in the show page but it is shown correctly in the edit action. In the simple function 3^5 the 5 in the show page is not 'superscript'</p>
  
  <p>what is saved in the db:</p>
  
  <pre><code>&lt;p&gt;&lt;span class=\"ql-formula\" data-value=\"3^5\" contenteditable=\"false\"&gt;&lt;span class=\"katex\"&gt;&lt;span class=\"katex-mathml\"&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;annotation encoding=\"application/x-tex\"&gt;3^5&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class=\"katex-html\" aria-hidden=\"true\"&gt;&lt;span class=\"strut\" style=\"height: 0.814108em;\"&gt;&lt;/span&gt;&lt;span class=\"strut bottom\" style=\"height: 0.814108em; vertical-align: 0em;\"&gt;&lt;/span&gt;&lt;span class=\"base textstyle uncramped\"&gt;&lt;span class=\"mord\"&gt;&lt;span class=\"mord mathrm\"&gt;3&lt;/span&gt;&lt;span class=\"msupsub\"&gt;&lt;span class=\"vlist\"&gt;&lt;span class=\"\" style=\"top: -0.363em; margin-right: 0.05em;\"&gt;&lt;span class=\"fontsize-ensurer reset-size5 size5\"&gt;&lt;span class=\"\" style=\"font-size: 0em;\"&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class=\"reset-textstyle scriptstyle uncramped mtight\"&gt;&lt;span class=\"mord mathrm mtight\"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=\"baseline-fix\"&gt;&lt;span class=\"fontsize-ensurer reset-size5 size5\"&gt;&lt;span class=\"\" style=\"font-size: 0em;\"&gt;​&lt;/span&gt;&lt;/span&gt;​&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;"
  </code></pre>
  
  <p>What is shown in the edit page</p>
  
  <pre><code>&lt;span class="ql-formula" data-value="3^5" contenteditable="false"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;3^5&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="strut" style="height: 0.814108em;"&gt;&lt;/span&gt;&lt;span class="strut bottom" style="height: 0.814108em; vertical-align: 0em;"&gt;&lt;/span&gt;&lt;span class="base textstyle uncramped"&gt;&lt;span class="mord"&gt;&lt;span class="mord mathrm"&gt;3&lt;/span&gt;&lt;span class="msupsub"&gt;&lt;span class="vlist"&gt;&lt;span class="" style="top: -0.363em; margin-right: 0.05em;"&gt;&lt;span class="fontsize-ensurer reset-size5 size5"&gt;&lt;span class="" style="font-size: 0em;"&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&lt;span class="reset-textstyle scriptstyle uncramped mtight"&gt;&lt;span class="mord mathrm mtight"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="baseline-fix"&gt;&lt;span class="fontsize-ensurer reset-size5 size5"&gt;&lt;span class="" style="font-size: 0em;"&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>what is shown in the show page</p>
  
  <pre><code>&lt;span class="ql-formula" data-value="3^5" contenteditable="false"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;msup&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;mn&gt;5&lt;/mn&gt;&lt;/msup&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;3^5&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="strut" style="height: 0.814108em;"&gt;&lt;/span&gt;&lt;span class="strut bottom" style="height: 0.814108em; vertical-align: 0em;"&gt;&lt;/span&gt;&lt;span class="base textstyle uncramped"&gt;&lt;span class="mord"&gt;&lt;span class="mord mathrm"&gt;3&lt;/span&gt;&lt;span class="msupsub"&gt;&lt;span class="vlist"&gt;&lt;span class="" style=""&gt;&lt;span class="fontsize-ensurer reset-size5 size5"&gt;&lt;span class="" style="font-size: 0em;"&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&lt;span class="reset-textstyle scriptstyle uncramped mtight"&gt;&lt;span class="mord mathrm mtight"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="baseline-fix"&gt;&lt;span class="fontsize-ensurer reset-size5 size5"&gt;&lt;span class="" style="font-size: 0em;"&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&amp;#8203;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The only difference seems to be <code>style="top: -0.363em; margin-right: 0.05em</code> which does not appear in the show page.</p>
  
  <p>I tried adding top and margin right as allowed attribute but it didn't help.</p>
  
  <p>My santizing function for the edit action:</p>
  
  <pre><code>&lt;%= raw sanitize @post.description, tags: %w(strong em span div a p br ul ol li math semantics mi mo mrow msup mn), attributes: %w(href class style data-value contenteditable) %&gt;
  </code></pre>
  
  <p>My santizing function for the show action:</p>
  
  <pre><code>&lt;%= raw sanitize @post.description, tags: %w(strong em span div a p br ul ol li math semantics mi mo mrow msup annotation mn), attributes: %w(href class style data-value contenteditable encoding aria-hidden top margin-right ) %&gt;
  </code></pre>