added katex.js and load it via webpack

app/assets/javascripts/render_math.js

-/* global katex */
+// import katex from 'katex';
+import Flash from './flash';
 
 // Renders math using KaTeX in any element with the
 // `js-render-math` class
@@ -7,11 +8,9 @@
 //
 //   <code class="js-render-math"></div>
 //
-  // 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);
@@ -30,9 +29,7 @@ function renderWithKaTeX(elements) {
 export default function renderMath($els) {
   if (!$els.length) return;
 
-  if (katexLoaded) {
-    renderWithKaTeX($els);
-  } else {
+  import(/* webpackChunkName: 'katex' */ 'katex').then((katex) => {
     $.get(gon.katex_css_url, () => {
       const css = $('<link>', {
         rel: 'stylesheet',
@@ -40,12 +37,9 @@ export default function renderMath($els) {
         href: gon.katex_css_url,
       });
       css.appendTo('head');
-
-      // Load KaTeX js
-      $.getScript(gon.katex_js_url, () => {
-        katexLoaded = true;
-        renderWithKaTeX($els); // Run KaTeX
-      });
+      renderWithKaTeX($els, katex);
     });
-  }
+  }).catch((err) => {
+    Flash(`Can't load katex module: ${err}`);
+  });
 }

lib/gitlab/gon_helper.rb

@@ -15,7 +15,6 @@ module Gitlab
       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             = current_application_settings.clientside_sentry_dsn if current_application_settings.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.9.0-alpha2",
     "marked": "^0.3.6",
     "monaco-editor": "0.10.0",
     "mousetrap": "^1.4.6",

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);
 

yarn.lock

@@ -3872,6 +3872,12 @@ karma@^1.7.0:
     tmp "0.0.31"
     useragent "^2.1.12"
 
+katex@^0.9.0-alpha2:
+  version "0.9.0-alpha2"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.9.0-alpha2.tgz#f559e8bb32969082d735d949960b7df133fd5831"
+  dependencies:
+    match-at "^0.1.1"
+
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -4166,6 +4172,10 @@ marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
+match-at@^0.1.1:
+  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"