Prettify merge_conflicts monitoring and notebook modules

19 files changed, 341 insertions, 354 deletions

diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index c1832d034ef..425b806e9d6 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -6,7 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
@@ -35,10 +35,10 @@ import { __ } from '~/locale';
     computed: {
       classObject() {
         return {
-          'saved': this.saved,
-          'is-loading': this.loading
+          saved: this.saved,
+          'is-loading': this.loading,
         };
-      }
+      },
     },
     watch: {
       ['file.showEditor'](val) {
@@ -49,7 +49,7 @@ import { __ } from '~/locale';
         }
 
         this.loadEditor();
-      }
+      },
     },
     mounted() {
       if (this.file.loadEditor) {
@@ -60,7 +60,8 @@ import { __ } from '~/locale';
       loadEditor() {
         this.loading = true;
 
-        axios.get(this.file.content_path)
+        axios
+          .get(this.file.content_path)
           .then(({ data }) => {
             const content = this.$el.querySelector('pre');
             const fileContent = document.createTextNode(data.content);
@@ -101,7 +102,7 @@ import { __ } from '~/locale';
       },
       acceptDiscardConfirmation(file) {
         this.onAcceptDiscardConfirmation(file);
-      }
-    }
+      },
+    },
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index 69208ac2d36..c2de0379d23 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import actionsMixin from '../mixins/line_conflict_actions';
 import utilsMixin from '../mixins/line_conflict_utils';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
index 2cd70247bc6..0333335de06 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   const diffViewType = Cookies.get('diff_view');
@@ -17,11 +17,11 @@ import Cookies from 'js-cookie';
   const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
   const VIEW_TYPES = {
     INLINE: 'inline',
-    PARALLEL: 'parallel'
+    PARALLEL: 'parallel',
   };
   const CONFLICT_TYPES = {
     TEXT: 'text',
-    TEXT_EDITOR: 'text-editor'
+    TEXT_EDITOR: 'text-editor',
   };
 
   global.mergeConflicts.mergeConflictsStore = {
@@ -31,7 +31,7 @@ import Cookies from 'js-cookie';
       isSubmitting: false,
       isParallel: diffViewType === VIEW_TYPES.PARALLEL,
       diffViewType: diffViewType,
-      conflictsData: {}
+      conflictsData: {},
     },
 
     setConflictsData(data) {
@@ -47,7 +47,7 @@ import Cookies from 'js-cookie';
     },
 
     decorateFiles(files) {
-      files.forEach((file) => {
+      files.forEach(file => {
         file.content = '';
         file.resolutionData = {};
         file.promptDiscardConfirmation = false;
@@ -72,7 +72,7 @@ import Cookies from 'js-cookie';
     setInlineLine(file) {
       file.inlineLines = [];
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         let currentLineType = 'new';
         const { conflict, lines, id } = section;
 
@@ -80,7 +80,7 @@ import Cookies from 'js-cookie';
           file.inlineLines.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if ((type === 'new' || type === 'old') && currentLineType !== type) {
@@ -102,7 +102,7 @@ import Cookies from 'js-cookie';
       file.parallelLines = [];
       const linesObj = { left: [], right: [] };
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         const { conflict, lines, id } = section;
 
         if (conflict) {
@@ -110,7 +110,7 @@ import Cookies from 'js-cookie';
           linesObj.right.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if (conflict) {
@@ -131,10 +131,7 @@ import Cookies from 'js-cookie';
       });
 
       for (let i = 0, len = linesObj.left.length; i < len; i += 1) {
-        file.parallelLines.push([
-          linesObj.right[i],
-          linesObj.left[i]
-        ]);
+        file.parallelLines.push([linesObj.right[i], linesObj.left[i]]);
       }
     },
 
@@ -159,9 +156,9 @@ import Cookies from 'js-cookie';
       const { files } = this.state.conflictsData;
       let count = 0;
 
-      files.forEach((file) => {
+      files.forEach(file => {
         if (file.type === CONFLICT_TYPES.TEXT) {
-          file.sections.forEach((section) => {
+          file.sections.forEach(section => {
             if (section.conflict) {
               count += 1;
             }
@@ -198,7 +195,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isHead: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -229,7 +226,7 @@ import Cookies from 'js-cookie';
         section: isHead ? 'head' : 'origin',
         richText: rich_text,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -243,7 +240,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isOrigin: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -290,14 +287,14 @@ import Cookies from 'js-cookie';
     },
 
     restoreFileLinesState(file) {
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.hasConflict || line.isHeader) {
           line.isSelected = false;
           line.isUnselected = false;
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const isLeftMatch = left.hasConflict || left.isHeader;
@@ -354,7 +351,7 @@ import Cookies from 'js-cookie';
       const initial = 'Commit to source branch';
       const inProgress = 'Committing...';
 
-      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
+      return this.state ? (this.state.isSubmitting ? inProgress : initial) : initial;
     },
 
     getCommitData() {
@@ -362,13 +359,13 @@ import Cookies from 'js-cookie';
 
       commitData = {
         commit_message: this.state.conflictsData.commitMessage,
-        files: []
+        files: [],
       };
 
-      this.state.conflictsData.files.forEach((file) => {
+      this.state.conflictsData.files.forEach(file => {
         const addFile = {
           old_path: file.old_path,
-          new_path: file.new_path
+          new_path: file.new_path,
         };
 
         if (file.type === CONFLICT_TYPES.TEXT) {
@@ -391,13 +388,13 @@ import Cookies from 'js-cookie';
     handleSelected(file, sectionId, selection) {
       Vue.set(file.resolutionData, sectionId, selection);
 
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
           this.markLine(line, selection);
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const hasSameId = right.id === sectionId || left.id === sectionId;
@@ -430,6 +427,6 @@ import Cookies from 'js-cookie';
 
     fileTextTypePresent() {
       return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
-    }
+    },
   };
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 3cccaf72ed7..ed5c8b15945 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -148,7 +148,7 @@ export default {
       point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
       point.x += 7;
 
-      this.seriesUnderMouse = this.timeSeries.filter((series) => {
+      this.seriesUnderMouse = this.timeSeries.filter(series => {
         const mouseX = series.timeSeriesScaleX.invert(point.x);
         let minDistance = Infinity;
 
@@ -221,21 +221,18 @@ export default {
         .scale(axisYScale)
         .ticks(measurements.yTicks);
 
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.x-axis')
         .call(xAxis);
 
       const width = this.graphWidth;
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.y-axis')
         .call(yAxis)
         .selectAll('.tick')
         .each(function createTickLines(d, i) {
           if (i > 0) {
-            d3
-              .select(this)
+            d3.select(this)
               .select('line')
               .attr('x2', width)
               .attr('class', 'axis-tick');
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index 8a604a51eb2..616410ec34f 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -38,38 +38,25 @@ export default {
   computed: {
     textTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 || 0;
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
 
       return `translate(15, ${yCoordinate}) rotate(-90)`;
     },
 
     rectTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 +
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
           this.yLabelWidth / 2 || 0;
 
       return `translate(0, ${yCoordinate}) rotate(-90)`;
     },
 
     xPosition() {
-      return (
-        (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 -
-          this.margin.right || 0
-      );
+      return (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 - this.margin.right || 0;
     },
 
     yPosition() {
-      return (
-        this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset || 0
-      );
+      return this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset || 0;
     },
 
     yAxisLabelSentenceCase() {
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 5f00d20ca3f..1720476480e 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -92,7 +92,8 @@ export default {
   methods: {
     seriesMetricValue(seriesIndex, series) {
       const indexFromCoordinates = this.currentCoordinates[series.metricTag]
-      ? this.currentCoordinates[series.metricTag].currentDataIndex : 0;
+        ? this.currentCoordinates[series.metricTag].currentDataIndex
+        : 0;
       const index = this.deploymentFlagData
         ? this.deploymentFlagData.seriesIndex
         : indexFromCoordinates;
diff --git a/app/assets/javascripts/monitoring/components/graph/track_info.vue b/app/assets/javascripts/monitoring/components/graph/track_info.vue
index ec1c2222af9..3464067834f 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_info.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_info.vue
@@ -26,4 +26,3 @@ export default {
     {{ summaryMetrics }}
   </span>
 </template>
-
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index ba3f93b39ff..e04fd9c1f35 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -33,4 +33,3 @@ export default {
     </svg>
   </td>
 </template>
-
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 007451d5c7a..87c3d969de4 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -6,7 +6,7 @@ const mixins = {
       if (!this.reducedDeploymentData) return false;
 
       let dataFound = false;
-      this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
+      this.reducedDeploymentData = this.reducedDeploymentData.map(d => {
         const deployment = d;
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
@@ -61,7 +61,7 @@ const mixins = {
 
       this.currentCoordinates = {};
 
-      this.seriesUnderMouse.forEach((series) => {
+      this.seriesUnderMouse.forEach(series => {
         const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
         const currentData = series.values[currentDataIndex];
         const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 260d424378e..24b4acaf6da 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -8,18 +8,20 @@ const MAX_REQUESTS = 3;
 function backOffRequest(makeRequestCallback) {
   let requestCounter = 0;
   return backOff((next, stop) => {
-    makeRequestCallback().then((resp) => {
-      if (resp.status === statusCodes.NO_CONTENT) {
-        requestCounter += 1;
-        if (requestCounter < MAX_REQUESTS) {
-          next();
+    makeRequestCallback()
+      .then(resp => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          requestCounter += 1;
+          if (requestCounter < MAX_REQUESTS) {
+            next();
+          } else {
+            stop(new Error('Failed to connect to the prometheus server'));
+          }
         } else {
-          stop(new Error('Failed to connect to the prometheus server'));
+          stop(resp);
         }
-      } else {
-        stop(resp);
-      }
-    }).catch(stop);
+      })
+      .catch(stop);
   });
 }
 
@@ -33,7 +35,7 @@ export default class MonitoringService {
   getGraphsData() {
     return backOffRequest(() => axios.get(this.metricsEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.data) {
           throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
@@ -47,22 +49,27 @@ export default class MonitoringService {
     }
     return backOffRequest(() => axios.get(this.deploymentEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.deployments) {
-          throw new Error(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+          throw new Error(
+            s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
+          );
         }
         return response.deployments;
       });
   }
 
   getEnvironmentsData() {
-    return axios.get(this.environmentsEndpoint)
-    .then(resp => resp.data)
-    .then((response) => {
-      if (!response || !response.environments) {
-        throw new Error(s__('Metrics|There was an error fetching the environments data, please try again'));
-      }
-      return response.environments;
-    });
+    return axios
+      .get(this.environmentsEndpoint)
+      .then(resp => resp.data)
+      .then(response => {
+        if (!response || !response.environments) {
+          throw new Error(
+            s__('Metrics|There was an error fetching the environments data, please try again'),
+          );
+        }
+        return response.environments;
+      });
   }
 }
diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js
index ee866850e13..7c771f43eee 100644
--- a/app/assets/javascripts/monitoring/utils/measurements.js
+++ b/app/assets/javascripts/monitoring/utils/measurements.js
@@ -1,5 +1,6 @@
 export default {
-  small: { // Covers both xs and sm screen sizes
+  small: {
+    // Covers both xs and sm screen sizes
     margin: {
       top: 40,
       right: 40,
@@ -18,7 +19,8 @@ export default {
     },
     axisLabelLineOffset: -20,
   },
-  large: { // This covers both md and lg screen sizes
+  large: {
+    // This covers both md and lg screen sizes
     margin: {
       top: 80,
       right: 80,
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index d5971730e31..bb24a1acdb3 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -66,7 +66,8 @@ function queryTimeSeries(query, graphDrawData, lineStyle) {
   // offset the same amount as the original data
   const [minX, maxX] = graphDrawData.xDom;
   const offset = d3.timeMinute(minX) - Number(minX);
-  const datesWithoutGaps = d3.timeSecond.every(60)
+  const datesWithoutGaps = d3.timeSecond
+    .every(60)
     .range(d3.timeMinute.offset(minX, -1), maxX)
     .map(d => d - offset);
 
@@ -208,9 +209,7 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
 
   const timeSeries = queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
-    return series.concat(
-      queryTimeSeries(query, graphDrawData, lineStyle),
-    );
+    return series.concat(queryTimeSeries(query, graphDrawData, lineStyle));
   }, []);
 
   return {
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 7d2a1a33b98..0691ba64f8e 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,45 +1,45 @@
 <script>
-  import Prism from '../../lib/highlight';
-  import Prompt from '../prompt.vue';
+import Prism from '../../lib/highlight';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    props: {
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      code() {
-        return this.rawCode;
-      },
-      promptType() {
-        const type = this.type.split('put')[0];
-
-        return type.charAt(0).toUpperCase() + type.slice(1);
-      },
+    type: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      Prism.highlightElement(this.$refs.code);
+  },
+  computed: {
+    code() {
+      return this.rawCode;
+    },
+    promptType() {
+      const type = this.type.split('put')[0];
+
+      return type.charAt(0).toUpperCase() + type.slice(1);
     },
-  };
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 3d09d24b6ab..5aa83db0986 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,12 +1,12 @@
 <script>
-  /* global katex */
-  import marked from 'marked';
-  import sanitize from 'sanitize-html';
-  import Prompt from './prompt.vue';
+/* global katex */
+import marked from 'marked';
+import sanitize from 'sanitize-html';
+import Prompt from './prompt.vue';
 
-  const renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 
-  /*
+/*
     Regex to match KaTex blocks.
 
     Supports the following:
@@ -17,7 +17,7 @@
 
     The matched text then goes through the KaTex renderer & then outputs the HTML
   */
-  const katexRegexString = `(
+const katexRegexString = `(
     ^\\\\begin{[a-zA-Z]+}\\s
     |
     ^\\$\\$
@@ -32,66 +32,69 @@
     |
     \\$
   )
-  `.replace(/\s/g, '').trim();
+  `
+  .replace(/\s/g, '')
+  .trim();
 
-  renderer.paragraph = (t) => {
-    let text = t;
-    let inline = false;
+renderer.paragraph = t => {
+  let text = t;
+  let inline = false;
 
-    if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/&amp;/g, '&')
-        .replace(/&=&/g, '\\space=\\space')
-        .replace(/<(\/?)em>/g, '_');
-      const regex = new RegExp(katexRegexString, 'gi');
-      const matchLocation = katexString.search(regex);
-      const numberOfMatches = katexString.match(regex);
+  if (typeof katex !== 'undefined') {
+    const katexString = text
+      .replace(/&amp;/g, '&')
+      .replace(/&=&/g, '\\space=\\space')
+      .replace(/<(\/?)em>/g, '_');
+    const regex = new RegExp(katexRegexString, 'gi');
+    const matchLocation = katexString.search(regex);
+    const numberOfMatches = katexString.match(regex);
 
-      if (numberOfMatches && numberOfMatches.length !== 0) {
-        if (matchLocation > 0) {
-          let matches = regex.exec(katexString);
-          inline = true;
+    if (numberOfMatches && numberOfMatches.length !== 0) {
+      if (matchLocation > 0) {
+        let matches = regex.exec(katexString);
+        inline = true;
 
-          while (matches !== null) {
-            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
-            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
-            matches = regex.exec(katexString);
-          }
-        } else {
-          const matches = regex.exec(katexString);
-          text = katex.renderToString(matches[2]);
+        while (matches !== null) {
+          const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+          text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+          matches = regex.exec(katexString);
         }
+      } else {
+        const matches = regex.exec(katexString);
+        text = katex.renderToString(matches[2]);
       }
     }
+  }
 
-    return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
-  };
+  return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
+};
 
-  marked.setOptions({
-    sanitize: true,
-    renderer,
-  });
+marked.setOptions({
+  sanitize: true,
+  renderer,
+});
 
-  export default {
-    components: {
-      prompt: Prompt,
-    },
-    props: {
-      cell: {
-        type: Object,
-        required: true,
-      },
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    cell: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      markdown() {
-        return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
-          allowedTags: false,
-          allowedAttributes: {
-            '*': ['class'],
-          },
-        });
-      },
+  },
+  computed: {
+    markdown() {
+      return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
+        allowedTags: false,
+        allowedAttributes: {
+          '*': ['class'],
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -105,13 +108,13 @@
 </template>
 
 <style>
-  .markdown .katex {
-    display: block;
-    text-align: center;
-  }
+.markdown .katex {
+  display: block;
+  text-align: center;
+}
 
-  .markdown .inline-katex .katex {
-    display: inline;
-    text-align: initial;
-  }
+.markdown .inline-katex .katex {
+  display: inline;
+  text-align: initial;
+}
 </style>
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index 0535ee7afa8..c6fc786fa76 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -1,30 +1,28 @@
 <script>
-  import sanitize from 'sanitize-html';
-  import Prompt from '../prompt.vue';
+import sanitize from 'sanitize-html';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    rawCode: {
+      type: String,
+      required: true,
     },
-    props: {
-      rawCode: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    sanitizedOutput() {
+      return sanitize(this.rawCode, {
+        allowedTags: sanitize.defaults.allowedTags.concat(['img', 'svg']),
+        allowedAttributes: {
+          img: ['src'],
+        },
+      });
     },
-    computed: {
-      sanitizedOutput() {
-        return sanitize(this.rawCode, {
-          allowedTags: sanitize.defaults.allowedTags.concat([
-            'img', 'svg',
-          ]),
-          allowedAttributes: {
-            img: ['src'],
-          },
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue
index 67d6c5ad12b..a17868963ce 100644
--- a/app/assets/javascripts/notebook/cells/output/image.vue
+++ b/app/assets/javascripts/notebook/cells/output/image.vue
@@ -1,21 +1,21 @@
 <script>
-  import Prompt from '../prompt.vue';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    outputType: {
+      type: String,
+      required: true,
     },
-    props: {
-      outputType: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    rawCode: {
+      type: String,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 4183b976814..d9f8604ed10 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -1,78 +1,78 @@
 <script>
-  import CodeCell from '../code/index.vue';
-  import Html from './html.vue';
-  import Image from './image.vue';
+import CodeCell from '../code/index.vue';
+import Html from './html.vue';
+import Image from './image.vue';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'html-output': Html,
-      'image-output': Image,
+export default {
+  components: {
+    'code-cell': CodeCell,
+    'html-output': Html,
+    'image-output': Image,
+  },
+  props: {
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      output: {
-        type: Object,
-        requred: true,
-        default: () => ({}),
-      },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    computed: {
-      componentName() {
-        if (this.output.text) {
-          return 'code-cell';
-        } else if (this.output.data['image/png']) {
-          return 'image-output';
-        } else if (this.output.data['text/html']) {
-          return 'html-output';
-        } else if (this.output.data['image/svg+xml']) {
-          return 'html-output';
-        }
-
+    output: {
+      type: Object,
+      requred: true,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    componentName() {
+      if (this.output.text) {
         return 'code-cell';
-      },
-      rawCode() {
-        if (this.output.text) {
-          return this.output.text.join('');
-        }
+      } else if (this.output.data['image/png']) {
+        return 'image-output';
+      } else if (this.output.data['text/html']) {
+        return 'html-output';
+      } else if (this.output.data['image/svg+xml']) {
+        return 'html-output';
+      }
 
-        return this.dataForType(this.outputType);
-      },
-      outputType() {
-        if (this.output.text) {
-          return '';
-        } else if (this.output.data['image/png']) {
-          return 'image/png';
-        } else if (this.output.data['text/html']) {
-          return 'text/html';
-        } else if (this.output.data['image/svg+xml']) {
-          return 'image/svg+xml';
-        }
+      return 'code-cell';
+    },
+    rawCode() {
+      if (this.output.text) {
+        return this.output.text.join('');
+      }
+
+      return this.dataForType(this.outputType);
+    },
+    outputType() {
+      if (this.output.text) {
+        return '';
+      } else if (this.output.data['image/png']) {
+        return 'image/png';
+      } else if (this.output.data['text/html']) {
+        return 'text/html';
+      } else if (this.output.data['image/svg+xml']) {
+        return 'image/svg+xml';
+      }
 
-        return 'text/plain';
-      },
+      return 'text/plain';
     },
-    methods: {
-      dataForType(type) {
-        let data = this.output.data[type];
+  },
+  methods: {
+    dataForType(type) {
+      let data = this.output.data[type];
 
-        if (typeof data === 'object') {
-          data = data.join('');
-        }
+      if (typeof data === 'object') {
+        data = data.join('');
+      }
 
-        return data;
-      },
+      return data;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue
index fe1fc37e1dc..d96f701ee3e 100644
--- a/app/assets/javascripts/notebook/cells/prompt.vue
+++ b/app/assets/javascripts/notebook/cells/prompt.vue
@@ -1,23 +1,23 @@
 <script>
-  export default {
-    props: {
-      type: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasKeys() {
-        return this.type !== '' && this.count;
-      },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-  };
+  },
+  computed: {
+    hasKeys() {
+      return this.type !== '' && this.count;
+    },
+  },
+};
 </script>
 
 <template>
@@ -29,9 +29,9 @@
 </template>
 
 <style scoped>
-  .prompt {
-    padding: 0 10px;
-    min-width: 7em;
-    font-family: monospace;
-  }
+.prompt {
+  padding: 0 10px;
+  min-width: 7em;
+  font-family: monospace;
+}
 </style>
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index f241df9620d..c5cc8c97dda 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -1,51 +1,48 @@
 <script>
-  import {
-    MarkdownCell,
-    CodeCell,
-  } from './cells';
+import { MarkdownCell, CodeCell } from './cells';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'markdown-cell': MarkdownCell,
+export default {
+  components: {
+    'code-cell': CodeCell,
+    'markdown-cell': MarkdownCell,
+  },
+  props: {
+    notebook: {
+      type: Object,
+      required: true,
     },
-    props: {
-      notebook: {
-        type: Object,
-        required: true,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      cells() {
-        if (this.notebook.worksheets) {
-          const data = {
-            cells: [],
-          };
+  },
+  computed: {
+    cells() {
+      if (this.notebook.worksheets) {
+        const data = {
+          cells: [],
+        };
 
-          return this.notebook.worksheets.reduce((cellData, sheet) => {
-            const cellDataCopy = cellData;
-            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
-            return cellDataCopy;
-          }, data).cells;
-        }
+        return this.notebook.worksheets.reduce((cellData, sheet) => {
+          const cellDataCopy = cellData;
+          cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+          return cellDataCopy;
+        }, data).cells;
+      }
 
-        return this.notebook.cells;
-      },
-      hasNotebook() {
-        return Object.keys(this.notebook).length;
-      },
+      return this.notebook.cells;
     },
-    methods: {
-      cellType(type) {
-        return `${type}-cell`;
-      },
+    hasNotebook() {
+      return Object.keys(this.notebook).length;
     },
-  };
+  },
+  methods: {
+    cellType(type) {
+      return `${type}-cell`;
+    },
+  },
+};
 </script>
 
 <template>