Merge branch 'jivl-update-katex' into 'master'

Updated katex library

Closes #43032

See merge request gitlab-org/gitlab-ce!15864

app/assets/javascripts/render_math.js

-/* global katex */
+import { __ } from './locale';
+import flash from './flash';
 
 // Renders math using KaTeX in any element with the
 // `js-render-math` class
@@ -8,15 +9,8 @@
 //   <code class="js-render-math"></div>
 //
 
-import { __ } from './locale';
-import axios from './lib/utils/axios_utils';
-import flash from './flash';
-
-// Only load once
-let katexLoaded = false;
-
 // Loop over all math elements and render math
-function renderWithKaTeX(elements) {
+function renderWithKaTeX(elements, katex) {
   elements.each(function katexElementsLoop() {
     const mathNode = $('<span></span>');
     const $this = $(this);
@@ -34,30 +28,10 @@ function renderWithKaTeX(elements) {
 
 export default function renderMath($els) {
   if (!$els.length) return;
-
-  if (katexLoaded) {
-    renderWithKaTeX($els);
-  } else {
-    axios.get(gon.katex_css_url)
-      .then(() => {
-        const css = $('<link>', {
-          rel: 'stylesheet',
-          type: 'text/css',
-          href: gon.katex_css_url,
-        });
-        css.appendTo('head');
-      })
-      .then(() => axios.get(gon.katex_js_url, {
-        responseType: 'text',
-      }))
-      .then(({ data }) => {
-        // Add katex js to our document
-        $.globalEval(data);
-      })
-      .then(() => {
-        katexLoaded = true;
-        renderWithKaTeX($els); // Run KaTeX
-      })
-      .catch(() => flash(__('An error occurred while rendering KaTeX')));
-  }
+  Promise.all([
+    import(/* webpackChunkName: 'katex' */ 'katex'),
+    import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.css'),
+  ]).then(([katex]) => {
+    renderWithKaTeX($els, katex);
+  }).catch(() => flash(__('An error occurred while rendering KaTeX')));
 }

changelogs/unreleased/jivl-update-katex.yml

+---
+title: Updated the katex library
+merge_request: 15864
+author:
+type: other

config/application.rb

@@ -108,8 +108,6 @@ module Gitlab
     config.assets.precompile << "print.css"
     config.assets.precompile << "notify.css"
     config.assets.precompile << "mailers/*.css"
-    config.assets.precompile << "katex.css"
-    config.assets.precompile << "katex.js"
     config.assets.precompile << "xterm/xterm.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "lib/ace.js"

config/webpack.config.js

@@ -153,6 +153,27 @@ var config = {
           name: '[name].[hash].[ext]',
         }
       },
+      {
+        test: /katex.css$/,
+        include: /node_modules\/katex\/dist/,
+        use: [
+          { loader: 'style-loader' },
+          { 
+            loader: 'css-loader',
+            options: {
+              name: '[name].[hash].[ext]'
+            }
+          },
+        ],
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
+        include: /node_modules\/katex\/dist\/fonts/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash].[ext]',
+        }
+      },
       {
         test: /monaco-editor\/\w+\/vs\/loader\.js$/,
         use: [

lib/gitlab/gon_helper.rb

@@ -13,8 +13,6 @@ module Gitlab
       gon.relative_url_root      = Gitlab.config.gitlab.relative_url_root
       gon.shortcuts_path         = help_page_path('shortcuts')
       gon.user_color_scheme      = Gitlab::ColorSchemes.for_user(current_user).css_class
-      gon.katex_css_url          = ActionController::Base.helpers.asset_path('katex.css')
-      gon.katex_js_url           = ActionController::Base.helpers.asset_path('katex.js')
       gon.sentry_dsn             = Gitlab::CurrentSettings.clientside_sentry_dsn if Gitlab::CurrentSettings.clientside_sentry_enabled
       gon.gitlab_url             = Gitlab.config.gitlab.url
       gon.revision               = Gitlab::REVISION

package.json

@@ -56,6 +56,7 @@
     "js-cookie": "^2.1.3",
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",
+    "katex": "^0.8.3",
     "marked": "^0.3.12",
     "monaco-editor": "0.10.0",
     "mousetrap": "^1.4.6",
@@ -69,6 +70,7 @@
     "sanitize-html": "^1.16.1",
     "select2": "3.5.2-browserify",
     "sql.js": "^0.4.0",
+    "style-loader": "^0.19.1",
     "svg4everybody": "2.1.9",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",

spec/javascripts/notebook/cells/markdown_spec.js

 import Vue from 'vue';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
-import katex from 'vendor/katex';
+import katex from 'katex';
 
 const Component = Vue.extend(MarkdownComponent);
 

vendor/assets/stylesheets/katex.scss

-/*
-The MIT License (MIT)
-
-Copyright (c) 2015 Khan Academy
-
-This software also uses portions of the underscore.js project, which is
-MIT licensed with the following copyright:
-
-Copyright (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative
-Reporters & Editors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-/*
- Here is how to build a version of KaTeX that works with gitlab.
-
- The problem is that the standard procedure for changing font location doesn't work for the empty string.
-
- 1. Clone KaTeX. Anything later than 4fb9445a9 (is merged into master) will do.
- 2. make (requires node)
- 3. sed -e 's,fonts/,,' -e 's/url\(([^)]*)\)/url(font-path\1)/g' build/katex.css > build/katex.scss
- 4. Copy build/katex.js to gitlab/vendor/assets/javascripts/katex.js,
-    build/katex.scss to gitlab/vendor/assets/stylesheets/katex.scss and
-    fonts/* to gitlab/vendor/assets/fonts/.
-*/
-
-@font-face {
-  font-family: 'KaTeX_AMS';
-  src: url(font-path('KaTeX_AMS-Regular.eot'));
-  src: url(font-path('KaTeX_AMS-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_AMS-Regular.woff2')) format('woff2'), url(font-path('KaTeX_AMS-Regular.woff')) format('woff'), url(font-path('KaTeX_AMS-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Caligraphic';
-  src: url(font-path('KaTeX_Caligraphic-Bold.eot'));
-  src: url(font-path('KaTeX_Caligraphic-Bold.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Caligraphic-Bold.woff2')) format('woff2'), url(font-path('KaTeX_Caligraphic-Bold.woff')) format('woff'), url(font-path('KaTeX_Caligraphic-Bold.ttf')) format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Caligraphic';
-  src: url(font-path('KaTeX_Caligraphic-Regular.eot'));
-  src: url(font-path('KaTeX_Caligraphic-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Caligraphic-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Caligraphic-Regular.woff')) format('woff'), url(font-path('KaTeX_Caligraphic-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Fraktur';
-  src: url(font-path('KaTeX_Fraktur-Bold.eot'));
-  src: url(font-path('KaTeX_Fraktur-Bold.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Fraktur-Bold.woff2')) format('woff2'), url(font-path('KaTeX_Fraktur-Bold.woff')) format('woff'), url(font-path('KaTeX_Fraktur-Bold.ttf')) format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Fraktur';
-  src: url(font-path('KaTeX_Fraktur-Regular.eot'));
-  src: url(font-path('KaTeX_Fraktur-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Fraktur-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Fraktur-Regular.woff')) format('woff'), url(font-path('KaTeX_Fraktur-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Main';
-  src: url(font-path('KaTeX_Main-Bold.eot'));
-  src: url(font-path('KaTeX_Main-Bold.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Main-Bold.woff2')) format('woff2'), url(font-path('KaTeX_Main-Bold.woff')) format('woff'), url(font-path('KaTeX_Main-Bold.ttf')) format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Main';
-  src: url(font-path('KaTeX_Main-Italic.eot'));
-  src: url(font-path('KaTeX_Main-Italic.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Main-Italic.woff2')) format('woff2'), url(font-path('KaTeX_Main-Italic.woff')) format('woff'), url(font-path('KaTeX_Main-Italic.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'KaTeX_Main';
-  src: url(font-path('KaTeX_Main-Regular.eot'));
-  src: url(font-path('KaTeX_Main-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Main-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Main-Regular.woff')) format('woff'), url(font-path('KaTeX_Main-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Math';
-  src: url(font-path('KaTeX_Math-Italic.eot'));
-  src: url(font-path('KaTeX_Math-Italic.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Math-Italic.woff2')) format('woff2'), url(font-path('KaTeX_Math-Italic.woff')) format('woff'), url(font-path('KaTeX_Math-Italic.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-@font-face {
-  font-family: 'KaTeX_SansSerif';
-  src: url(font-path('KaTeX_SansSerif-Regular.eot'));
-  src: url(font-path('KaTeX_SansSerif-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_SansSerif-Regular.woff2')) format('woff2'), url(font-path('KaTeX_SansSerif-Regular.woff')) format('woff'), url(font-path('KaTeX_SansSerif-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Script';
-  src: url(font-path('KaTeX_Script-Regular.eot'));
-  src: url(font-path('KaTeX_Script-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Script-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Script-Regular.woff')) format('woff'), url(font-path('KaTeX_Script-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Size1';
-  src: url(font-path('KaTeX_Size1-Regular.eot'));
-  src: url(font-path('KaTeX_Size1-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Size1-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Size1-Regular.woff')) format('woff'), url(font-path('KaTeX_Size1-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Size2';
-  src: url(font-path('KaTeX_Size2-Regular.eot'));
-  src: url(font-path('KaTeX_Size2-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Size2-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Size2-Regular.woff')) format('woff'), url(font-path('KaTeX_Size2-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Size3';
-  src: url(font-path('KaTeX_Size3-Regular.eot'));
-  src: url(font-path('KaTeX_Size3-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Size3-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Size3-Regular.woff')) format('woff'), url(font-path('KaTeX_Size3-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Size4';
-  src: url(font-path('KaTeX_Size4-Regular.eot'));
-  src: url(font-path('KaTeX_Size4-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Size4-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Size4-Regular.woff')) format('woff'), url(font-path('KaTeX_Size4-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'KaTeX_Typewriter';
-  src: url(font-path('KaTeX_Typewriter-Regular.eot'));
-  src: url(font-path('KaTeX_Typewriter-Regular.eot#iefix')) format('embedded-opentype'), url(font-path('KaTeX_Typewriter-Regular.woff2')) format('woff2'), url(font-path('KaTeX_Typewriter-Regular.woff')) format('woff'), url(font-path('KaTeX_Typewriter-Regular.ttf')) format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-.katex-display {
-  display: block;
-  margin: 1em 0;
-  text-align: center;
-}
-.katex-display > .katex {
-  display: inline-block;
-  text-align: initial;
-}
-.katex {
-  font: normal 1.21em KaTeX_Main, Times New Roman, serif;
-  line-height: 1.2;
-  white-space: nowrap;
-  text-indent: 0;
-}
-.katex .katex-html {
-  display: inline-block;
-}
-.katex .katex-mathml {
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-  padding: 0;
-  border: 0;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-}
-.katex .base {
-  display: inline-block;
-}
-.katex .strut {
-  display: inline-block;
-}
-.katex .mathit {
-  font-family: KaTeX_Math;
-  font-style: italic;
-}
-.katex .mathbf {
-  font-family: KaTeX_Main;
-  font-weight: 600;
-}
-.katex .amsrm {
-  font-family: KaTeX_AMS;
-}
-.katex .mathbb {
-  font-family: KaTeX_AMS;
-}
-.katex .mathcal {
-  font-family: KaTeX_Caligraphic;
-}
-.katex .mathfrak {
-  font-family: KaTeX_Fraktur;
-}
-.katex .mathtt {
-  font-family: KaTeX_Typewriter;
-}
-.katex .mathscr {
-  font-family: KaTeX_Script;
-}
-.katex .mathsf {
-  font-family: KaTeX_SansSerif;
-}
-.katex .mainit {
-  font-family: KaTeX_Main;
-  font-style: italic;
-}
-.katex .textstyle > .mord + .mop {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mord + .mbin {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mord + .mrel {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mord + .minner {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mop + .mord {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mop + .mop {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mop + .mrel {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mop + .minner {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mbin + .mord {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mbin + .mop {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mbin + .mopen {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mbin + .minner {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mrel + .mord {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mrel + .mop {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mrel + .mopen {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mrel + .minner {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mclose + .mop {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mclose + .mbin {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .mclose + .mrel {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .mclose + .minner {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mord {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mop {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mrel {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mopen {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mclose {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .mpunct {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .mpunct + .minner {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .minner + .mord {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .minner + .mop {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .minner + .mbin {
-  margin-left: 0.22222em;
-}
-.katex .textstyle > .minner + .mrel {
-  margin-left: 0.27778em;
-}
-.katex .textstyle > .minner + .mopen {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .minner + .mpunct {
-  margin-left: 0.16667em;
-}
-.katex .textstyle > .minner + .minner {
-  margin-left: 0.16667em;
-}
-.katex .mord + .mop {
-  margin-left: 0.16667em;
-}
-.katex .mop + .mord {
-  margin-left: 0.16667em;
-}
-.katex .mop + .mop {
-  margin-left: 0.16667em;
-}
-.katex .mclose + .mop {
-  margin-left: 0.16667em;
-}
-.katex .minner + .mop {
-  margin-left: 0.16667em;
-}
-.katex .reset-textstyle.textstyle {
-  font-size: 1em;
-}
-.katex .reset-textstyle.scriptstyle {
-  font-size: 0.7em;
-}
-.katex .reset-textstyle.scriptscriptstyle {
-  font-size: 0.5em;
-}
-.katex .reset-scriptstyle.textstyle {
-  font-size: 1.42857em;
-}
-.katex .reset-scriptstyle.scriptstyle {
-  font-size: 1em;
-}
-.katex .reset-scriptstyle.scriptscriptstyle {
-  font-size: 0.71429em;
-}
-.katex .reset-scriptscriptstyle.textstyle {
-  font-size: 2em;
-}
-.katex .reset-scriptscriptstyle.scriptstyle {
-  font-size: 1.4em;
-}
-.katex .reset-scriptscriptstyle.scriptscriptstyle {
-  font-size: 1em;
-}
-.katex .style-wrap {
-  position: relative;
-}
-.katex .vlist {
-  display: inline-block;
-}
-.katex .vlist > span {
-  display: block;
-  height: 0;
-  position: relative;
-}
-.katex .vlist > span > span {
-  display: inline-block;
-}
-.katex .vlist .baseline-fix {
-  display: inline-table;
-  table-layout: fixed;
-}
-.katex .msupsub {
-  text-align: left;
-}
-.katex .mfrac > span > span {
-  text-align: center;
-}
-.katex .mfrac .frac-line {
-  width: 100%;
-}
-.katex .mfrac .frac-line:before {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  content: "";
-  display: block;
-}
-.katex .mfrac .frac-line:after {
-  border-bottom-style: solid;
-  border-bottom-width: 0.04em;
-  content: "";
-  display: block;
-  margin-top: -1px;
-}
-.katex .mspace {
-  display: inline-block;
-}
-.katex .mspace.negativethinspace {
-  margin-left: -0.16667em;
-}
-.katex .mspace.thinspace {
-  width: 0.16667em;
-}
-.katex .mspace.mediumspace {
-  width: 0.22222em;
-}
-.katex .mspace.thickspace {
-  width: 0.27778em;
-}
-.katex .mspace.enspace {
-  width: 0.5em;
-}
-.katex .mspace.quad {
-  width: 1em;
-}
-.katex .mspace.qquad {
-  width: 2em;
-}
-.katex .llap,
-.katex .rlap {
-  width: 0;
-  position: relative;
-}
-.katex .llap > .inner,
-.katex .rlap > .inner {
-  position: absolute;
-}
-.katex .llap > .fix,
-.katex .rlap > .fix {
-  display: inline-block;
-}
-.katex .llap > .inner {
-  right: 0;
-}
-.katex .rlap > .inner {
-  left: 0;
-}
-.katex .katex-logo .a {
-  font-size: 0.75em;
-  margin-left: -0.32em;
-  position: relative;
-  top: -0.2em;
-}
-.katex .katex-logo .t {
-  margin-left: -0.23em;
-}
-.katex .katex-logo .e {
-  margin-left: -0.1667em;
-  position: relative;
-  top: 0.2155em;
-}
-.katex .katex-logo .x {
-  margin-left: -0.125em;
-}
-.katex .rule {
-  display: inline-block;
-  border: solid 0;
-  position: relative;
-}
-.katex .overline .overline-line,
-.katex .underline .underline-line {
-  width: 100%;
-}
-.katex .overline .overline-line:before,
-.katex .underline .underline-line:before {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  content: "";
-  display: block;
-}
-.katex .overline .overline-line:after,
-.katex .underline .underline-line:after {
-  border-bottom-style: solid;
-  border-bottom-width: 0.04em;
-  content: "";
-  display: block;
-  margin-top: -1px;
-}
-.katex .sqrt > .sqrt-sign {
-  position: relative;
-}
-.katex .sqrt .sqrt-line {
-  width: 100%;
-}
-.katex .sqrt .sqrt-line:before {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  content: "";
-  display: block;
-}
-.katex .sqrt .sqrt-line:after {
-  border-bottom-style: solid;
-  border-bottom-width: 0.04em;
-  content: "";
-  display: block;
-  margin-top: -1px;
-}
-.katex .sqrt > .root {
-  margin-left: 0.27777778em;
-  margin-right: -0.55555556em;
-}
-.katex .sizing,
-.katex .fontsize-ensurer {
-  display: inline-block;
-}
-.katex .sizing.reset-size1.size1,
-.katex .fontsize-ensurer.reset-size1.size1 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size1.size2,
-.katex .fontsize-ensurer.reset-size1.size2 {
-  font-size: 1.4em;
-}
-.katex .sizing.reset-size1.size3,
-.katex .fontsize-ensurer.reset-size1.size3 {
-  font-size: 1.6em;
-}
-.katex .sizing.reset-size1.size4,
-.katex .fontsize-ensurer.reset-size1.size4 {
-  font-size: 1.8em;
-}
-.katex .sizing.reset-size1.size5,
-.katex .fontsize-ensurer.reset-size1.size5 {
-  font-size: 2em;
-}
-.katex .sizing.reset-size1.size6,
-.katex .fontsize-ensurer.reset-size1.size6 {
-  font-size: 2.4em;
-}
-.katex .sizing.reset-size1.size7,
-.katex .fontsize-ensurer.reset-size1.size7 {
-  font-size: 2.88em;
-}
-.katex .sizing.reset-size1.size8,
-.katex .fontsize-ensurer.reset-size1.size8 {
-  font-size: 3.46em;
-}
-.katex .sizing.reset-size1.size9,
-.katex .fontsize-ensurer.reset-size1.size9 {
-  font-size: 4.14em;
-}
-.katex .sizing.reset-size1.size10,
-.katex .fontsize-ensurer.reset-size1.size10 {
-  font-size: 4.98em;
-}
-.katex .sizing.reset-size2.size1,
-.katex .fontsize-ensurer.reset-size2.size1 {
-  font-size: 0.71428571em;
-}
-.katex .sizing.reset-size2.size2,
-.katex .fontsize-ensurer.reset-size2.size2 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size2.size3,
-.katex .fontsize-ensurer.reset-size2.size3 {
-  font-size: 1.14285714em;
-}
-.katex .sizing.reset-size2.size4,
-.katex .fontsize-ensurer.reset-size2.size4 {
-  font-size: 1.28571429em;
-}
-.katex .sizing.reset-size2.size5,
-.katex .fontsize-ensurer.reset-size2.size5 {
-  font-size: 1.42857143em;
-}
-.katex .sizing.reset-size2.size6,
-.katex .fontsize-ensurer.reset-size2.size6 {
-  font-size: 1.71428571em;
-}
-.katex .sizing.reset-size2.size7,
-.katex .fontsize-ensurer.reset-size2.size7 {
-  font-size: 2.05714286em;
-}
-.katex .sizing.reset-size2.size8,
-.katex .fontsize-ensurer.reset-size2.size8 {
-  font-size: 2.47142857em;
-}
-.katex .sizing.reset-size2.size9,
-.katex .fontsize-ensurer.reset-size2.size9 {
-  font-size: 2.95714286em;
-}
-.katex .sizing.reset-size2.size10,
-.katex .fontsize-ensurer.reset-size2.size10 {
-  font-size: 3.55714286em;
-}
-.katex .sizing.reset-size3.size1,
-.katex .fontsize-ensurer.reset-size3.size1 {
-  font-size: 0.625em;
-}
-.katex .sizing.reset-size3.size2,
-.katex .fontsize-ensurer.reset-size3.size2 {
-  font-size: 0.875em;
-}
-.katex .sizing.reset-size3.size3,
-.katex .fontsize-ensurer.reset-size3.size3 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size3.size4,
-.katex .fontsize-ensurer.reset-size3.size4 {
-  font-size: 1.125em;
-}
-.katex .sizing.reset-size3.size5,
-.katex .fontsize-ensurer.reset-size3.size5 {
-  font-size: 1.25em;
-}
-.katex .sizing.reset-size3.size6,
-.katex .fontsize-ensurer.reset-size3.size6 {
-  font-size: 1.5em;
-}
-.katex .sizing.reset-size3.size7,
-.katex .fontsize-ensurer.reset-size3.size7 {
-  font-size: 1.8em;
-}
-.katex .sizing.reset-size3.size8,
-.katex .fontsize-ensurer.reset-size3.size8 {
-  font-size: 2.1625em;
-}
-.katex .sizing.reset-size3.size9,
-.katex .fontsize-ensurer.reset-size3.size9 {
-  font-size: 2.5875em;
-}
-.katex .sizing.reset-size3.size10,
-.katex .fontsize-ensurer.reset-size3.size10 {
-  font-size: 3.1125em;
-}
-.katex .sizing.reset-size4.size1,
-.katex .fontsize-ensurer.reset-size4.size1 {
-  font-size: 0.55555556em;
-}
-.katex .sizing.reset-size4.size2,
-.katex .fontsize-ensurer.reset-size4.size2 {
-  font-size: 0.77777778em;
-}
-.katex .sizing.reset-size4.size3,
-.katex .fontsize-ensurer.reset-size4.size3 {
-  font-size: 0.88888889em;
-}
-.katex .sizing.reset-size4.size4,
-.katex .fontsize-ensurer.reset-size4.size4 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size4.size5,
-.katex .fontsize-ensurer.reset-size4.size5 {
-  font-size: 1.11111111em;
-}
-.katex .sizing.reset-size4.size6,
-.katex .fontsize-ensurer.reset-size4.size6 {
-  font-size: 1.33333333em;
-}
-.katex .sizing.reset-size4.size7,
-.katex .fontsize-ensurer.reset-size4.size7 {
-  font-size: 1.6em;
-}
-.katex .sizing.reset-size4.size8,
-.katex .fontsize-ensurer.reset-size4.size8 {
-  font-size: 1.92222222em;
-}
-.katex .sizing.reset-size4.size9,
-.katex .fontsize-ensurer.reset-size4.size9 {
-  font-size: 2.3em;
-}
-.katex .sizing.reset-size4.size10,
-.katex .fontsize-ensurer.reset-size4.size10 {
-  font-size: 2.76666667em;
-}
-.katex .sizing.reset-size5.size1,
-.katex .fontsize-ensurer.reset-size5.size1 {
-  font-size: 0.5em;
-}
-.katex .sizing.reset-size5.size2,
-.katex .fontsize-ensurer.reset-size5.size2 {
-  font-size: 0.7em;
-}
-.katex .sizing.reset-size5.size3,
-.katex .fontsize-ensurer.reset-size5.size3 {
-  font-size: 0.8em;
-}
-.katex .sizing.reset-size5.size4,
-.katex .fontsize-ensurer.reset-size5.size4 {
-  font-size: 0.9em;
-}
-.katex .sizing.reset-size5.size5,
-.katex .fontsize-ensurer.reset-size5.size5 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size5.size6,
-.katex .fontsize-ensurer.reset-size5.size6 {
-  font-size: 1.2em;
-}
-.katex .sizing.reset-size5.size7,
-.katex .fontsize-ensurer.reset-size5.size7 {
-  font-size: 1.44em;
-}
-.katex .sizing.reset-size5.size8,
-.katex .fontsize-ensurer.reset-size5.size8 {
-  font-size: 1.73em;
-}
-.katex .sizing.reset-size5.size9,
-.katex .fontsize-ensurer.reset-size5.size9 {
-  font-size: 2.07em;
-}
-.katex .sizing.reset-size5.size10,
-.katex .fontsize-ensurer.reset-size5.size10 {
-  font-size: 2.49em;
-}
-.katex .sizing.reset-size6.size1,
-.katex .fontsize-ensurer.reset-size6.size1 {
-  font-size: 0.41666667em;
-}
-.katex .sizing.reset-size6.size2,
-.katex .fontsize-ensurer.reset-size6.size2 {
-  font-size: 0.58333333em;
-}
-.katex .sizing.reset-size6.size3,
-.katex .fontsize-ensurer.reset-size6.size3 {
-  font-size: 0.66666667em;
-}
-.katex .sizing.reset-size6.size4,
-.katex .fontsize-ensurer.reset-size6.size4 {
-  font-size: 0.75em;
-}
-.katex .sizing.reset-size6.size5,
-.katex .fontsize-ensurer.reset-size6.size5 {
-  font-size: 0.83333333em;
-}
-.katex .sizing.reset-size6.size6,
-.katex .fontsize-ensurer.reset-size6.size6 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size6.size7,
-.katex .fontsize-ensurer.reset-size6.size7 {
-  font-size: 1.2em;
-}
-.katex .sizing.reset-size6.size8,
-.katex .fontsize-ensurer.reset-size6.size8 {
-  font-size: 1.44166667em;
-}
-.katex .sizing.reset-size6.size9,
-.katex .fontsize-ensurer.reset-size6.size9 {
-  font-size: 1.725em;
-}
-.katex .sizing.reset-size6.size10,
-.katex .fontsize-ensurer.reset-size6.size10 {
-  font-size: 2.075em;
-}
-.katex .sizing.reset-size7.size1,
-.katex .fontsize-ensurer.reset-size7.size1 {
-  font-size: 0.34722222em;
-}
-.katex .sizing.reset-size7.size2,
-.katex .fontsize-ensurer.reset-size7.size2 {
-  font-size: 0.48611111em;
-}
-.katex .sizing.reset-size7.size3,
-.katex .fontsize-ensurer.reset-size7.size3 {
-  font-size: 0.55555556em;
-}
-.katex .sizing.reset-size7.size4,
-.katex .fontsize-ensurer.reset-size7.size4 {
-  font-size: 0.625em;
-}
-.katex .sizing.reset-size7.size5,
-.katex .fontsize-ensurer.reset-size7.size5 {
-  font-size: 0.69444444em;
-}
-.katex .sizing.reset-size7.size6,
-.katex .fontsize-ensurer.reset-size7.size6 {
-  font-size: 0.83333333em;
-}
-.katex .sizing.reset-size7.size7,
-.katex .fontsize-ensurer.reset-size7.size7 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size7.size8,
-.katex .fontsize-ensurer.reset-size7.size8 {
-  font-size: 1.20138889em;
-}
-.katex .sizing.reset-size7.size9,
-.katex .fontsize-ensurer.reset-size7.size9 {
-  font-size: 1.4375em;
-}
-.katex .sizing.reset-size7.size10,
-.katex .fontsize-ensurer.reset-size7.size10 {
-  font-size: 1.72916667em;
-}
-.katex .sizing.reset-size8.size1,
-.katex .fontsize-ensurer.reset-size8.size1 {
-  font-size: 0.28901734em;
-}
-.katex .sizing.reset-size8.size2,
-.katex .fontsize-ensurer.reset-size8.size2 {
-  font-size: 0.40462428em;
-}
-.katex .sizing.reset-size8.size3,
-.katex .fontsize-ensurer.reset-size8.size3 {
-  font-size: 0.46242775em;
-}
-.katex .sizing.reset-size8.size4,
-.katex .fontsize-ensurer.reset-size8.size4 {
-  font-size: 0.52023121em;
-}
-.katex .sizing.reset-size8.size5,
-.katex .fontsize-ensurer.reset-size8.size5 {
-  font-size: 0.57803468em;
-}
-.katex .sizing.reset-size8.size6,
-.katex .fontsize-ensurer.reset-size8.size6 {
-  font-size: 0.69364162em;
-}
-.katex .sizing.reset-size8.size7,
-.katex .fontsize-ensurer.reset-size8.size7 {
-  font-size: 0.83236994em;
-}
-.katex .sizing.reset-size8.size8,
-.katex .fontsize-ensurer.reset-size8.size8 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size8.size9,
-.katex .fontsize-ensurer.reset-size8.size9 {
-  font-size: 1.19653179em;
-}
-.katex .sizing.reset-size8.size10,
-.katex .fontsize-ensurer.reset-size8.size10 {
-  font-size: 1.43930636em;
-}
-.katex .sizing.reset-size9.size1,
-.katex .fontsize-ensurer.reset-size9.size1 {
-  font-size: 0.24154589em;
-}
-.katex .sizing.reset-size9.size2,
-.katex .fontsize-ensurer.reset-size9.size2 {
-  font-size: 0.33816425em;
-}
-.katex .sizing.reset-size9.size3,
-.katex .fontsize-ensurer.reset-size9.size3 {
-  font-size: 0.38647343em;
-}
-.katex .sizing.reset-size9.size4,
-.katex .fontsize-ensurer.reset-size9.size4 {
-  font-size: 0.43478261em;
-}
-.katex .sizing.reset-size9.size5,
-.katex .fontsize-ensurer.reset-size9.size5 {
-  font-size: 0.48309179em;
-}
-.katex .sizing.reset-size9.size6,
-.katex .fontsize-ensurer.reset-size9.size6 {
-  font-size: 0.57971014em;
-}
-.katex .sizing.reset-size9.size7,
-.katex .fontsize-ensurer.reset-size9.size7 {
-  font-size: 0.69565217em;
-}
-.katex .sizing.reset-size9.size8,
-.katex .fontsize-ensurer.reset-size9.size8 {
-  font-size: 0.83574879em;
-}
-.katex .sizing.reset-size9.size9,
-.katex .fontsize-ensurer.reset-size9.size9 {
-  font-size: 1em;
-}
-.katex .sizing.reset-size9.size10,
-.katex .fontsize-ensurer.reset-size9.size10 {
-  font-size: 1.20289855em;
-}
-.katex .sizing.reset-size10.size1,
-.katex .fontsize-ensurer.reset-size10.size1 {
-  font-size: 0.20080321em;
-}
-.katex .sizing.reset-size10.size2,
-.katex .fontsize-ensurer.reset-size10.size2 {
-  font-size: 0.2811245em;
-}
-.katex .sizing.reset-size10.size3,
-.katex .fontsize-ensurer.reset-size10.size3 {
-  font-size: 0.32128514em;
-}
-.katex .sizing.reset-size10.size4,
-.katex .fontsize-ensurer.reset-size10.size4 {
-  font-size: 0.36144578em;
-}
-.katex .sizing.reset-size10.size5,
-.katex .fontsize-ensurer.reset-size10.size5 {
-  font-size: 0.40160643em;
-}
-.katex .sizing.reset-size10.size6,
-.katex .fontsize-ensurer.reset-size10.size6 {
-  font-size: 0.48192771em;
-}
-.katex .sizing.reset-size10.size7,
-.katex .fontsize-ensurer.reset-size10.size7 {
-  font-size: 0.57831325em;
-}
-.katex .sizing.reset-size10.size8,
-.katex .fontsize-ensurer.reset-size10.size8 {
-  font-size: 0.69477912em;
-}
-.katex .sizing.reset-size10.size9,
-.katex .fontsize-ensurer.reset-size10.size9 {
-  font-size: 0.8313253em;
-}
-.katex .sizing.reset-size10.size10,
-.katex .fontsize-ensurer.reset-size10.size10 {
-  font-size: 1em;
-}
-.katex .delimsizing.size1 {
-  font-family: KaTeX_Size1;
-}
-.katex .delimsizing.size2 {
-  font-family: KaTeX_Size2;
-}
-.katex .delimsizing.size3 {
-  font-family: KaTeX_Size3;
-}
-.katex .delimsizing.size4 {
-  font-family: KaTeX_Size4;
-}
-.katex .delimsizing.mult .delim-size1 > span {
-  font-family: KaTeX_Size1;
-}
-.katex .delimsizing.mult .delim-size4 > span {
-  font-family: KaTeX_Size4;
-}
-.katex .nulldelimiter {
-  display: inline-block;
-  width: 0.12em;
-}
-.katex .op-symbol {
-  position: relative;
-}
-.katex .op-symbol.small-op {
-  font-family: KaTeX_Size1;
-}
-.katex .op-symbol.large-op {
-  font-family: KaTeX_Size2;
-}
-.katex .op-limits > .vlist > span {
-  text-align: center;
-}
-.katex .accent > .vlist > span {
-  text-align: center;
-}
-.katex .accent .accent-body > span {
-  width: 0;
-}
-.katex .accent .accent-body.accent-vec > span {
-  position: relative;
-  left: 0.326em;
-}
-.katex .mtable .vertical-separator {
-  display: inline-block;
-  margin: 0 -0.025em;
-  border-right: 0.05em solid black;
-}
-.katex .mtable .arraycolsep {
-  display: inline-block;
-}
-.katex .mtable .col-align-c > .vlist {
-  text-align: center;
-}
-.katex .mtable .col-align-l > .vlist {
-  text-align: left;
-}
-.katex .mtable .col-align-r > .vlist {
-  text-align: right;
-}

yarn.lock

@@ -4401,6 +4401,12 @@ karma@^2.0.0:
     tmp "0.0.33"
     useragent "^2.1.12"
 
+katex@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.8.3.tgz#909d99864baf964c3ccae39c4a99a8e0fb9a1bd0"
+  dependencies:
+    match-at "^0.1.0"
+
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -4791,6 +4797,10 @@ marked@^0.3.12:
   version "0.3.12"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
 
+match-at@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.16"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
@@ -7083,6 +7093,13 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+style-loader@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"