diff options
Diffstat (limited to 'app/assets/javascripts/notebook')
-rw-r--r-- | app/assets/javascripts/notebook/cells/markdown.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/index.vue | 5 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/latex.vue | 45 |
3 files changed, 52 insertions, 2 deletions
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue index c04f2a2d465..d1d5ae5265a 100644 --- a/app/assets/javascripts/notebook/cells/markdown.vue +++ b/app/assets/javascripts/notebook/cells/markdown.vue @@ -77,11 +77,11 @@ function renderKatex(t) { } return [text, numInline > 0]; } -renderer.paragraph = t => { +renderer.paragraph = (t) => { const [text, inline] = renderKatex(t); return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`; }; -renderer.listitem = t => { +renderer.listitem = (t) => { const [text, inline] = renderKatex(t); return `<li class="${inline ? 'inline-katex' : ''}">${text}</li>`; }; diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue index 113d8cfc435..5f7ef4a4377 100644 --- a/app/assets/javascripts/notebook/cells/output/index.vue +++ b/app/assets/javascripts/notebook/cells/output/index.vue @@ -2,6 +2,7 @@ import CodeOutput from '../code/index.vue'; import HtmlOutput from './html.vue'; import ImageOutput from './image.vue'; +import LatexOutput from './latex.vue'; export default { props: { @@ -35,6 +36,8 @@ export default { return 'image/jpeg'; } else if (output.data['text/html']) { return 'text/html'; + } else if (output.data['text/latex']) { + return 'text/latex'; } else if (output.data['image/svg+xml']) { return 'image/svg+xml'; } @@ -59,6 +62,8 @@ export default { return ImageOutput; } else if (output.data['text/html']) { return HtmlOutput; + } else if (output.data['text/latex']) { + return LatexOutput; } else if (output.data['image/svg+xml']) { return HtmlOutput; } diff --git a/app/assets/javascripts/notebook/cells/output/latex.vue b/app/assets/javascripts/notebook/cells/output/latex.vue new file mode 100644 index 00000000000..db9e61dce82 --- /dev/null +++ b/app/assets/javascripts/notebook/cells/output/latex.vue @@ -0,0 +1,45 @@ +<script> +import 'mathjax/es5/tex-svg'; +import Prompt from '../prompt.vue'; + +export default { + name: 'LatexOutput', + components: { + Prompt, + }, + props: { + count: { + type: Number, + required: true, + }, + rawCode: { + type: String, + required: true, + }, + index: { + type: Number, + required: true, + }, + }, + computed: { + code() { + // MathJax will not parse out the inline delimeters "$$" correctly + // so we remove them from the raw code itself + const parsedCode = this.rawCode.replace(/\$\$/g, ''); + const svg = window.MathJax.tex2svg(parsedCode); + + // NOTE: This is used with `v-html` and not `v-safe-html` due to an + // issue with dompurify stripping out xlink attributes from use tags + return svg.outerHTML; + }, + }, +}; +</script> + +<template> + <div class="output"> + <prompt type="Out" :count="count" :show-output="index === 0" /> + <!-- eslint-disable --> + <div ref="maths" v-html="code"></div> + </div> +</template> |