summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/notebook/cells/markdown.vue
blob: 4e0e60284f1b7da79a5d896b98b921c95dd35761 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div class="cell text-cell">
    <prompt />
    <div class="markdown" v-html="markdown"></div>
  </div>
</template>

<script>
  /* global katex */
  import marked from 'marked';
  import Prompt from './prompt.vue';

  marked.setOptions({
    sanitize: true,
  });

  export default {
    components: {
      prompt: Prompt,
    },
    props: {
      cell: {
        type: Object,
        required: true,
      },
    },
    computed: {
      markdown() {
        const regex = new RegExp('^\\$\\$(.*)\\$\\$$', 'g');

        const source = this.cell.source.map((line) => {
          const matches = regex.exec(line.trim());

          // Only render use the Katex library if it is actually loaded
          if (matches && matches.length > 0 && typeof katex !== 'undefined') {
            return katex.renderToString(matches[1]);
          }

          return line;
        });

        return marked(source.join(''));
      },
    },
  };
</script>

<style>
.markdown .katex {
  display: block;
  text-align: center;
}
</style>