Update equation blocks

Author: janniks

dev/serve.js

@@ -3,10 +3,10 @@ import Dev from "./serve.vue";
 
 import VueKatex from "vue-katex";
 
-Vue.config.productionTip = false;
-
 Vue.use(VueKatex);
 
+Vue.config.productionTip = false;
+
 new Vue({
   render: (h) => h(Dev),
 }).$mount("#app");

dev/serve.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <NotionRenderer :blockMap="blockMap" fullPage prism todo />
+    <NotionRenderer :blockMap="blockMap" fullPage prism katex todo />
   </div>
 </template>
 

src/blocks/code.vue

@@ -12,22 +12,25 @@
 <script>
 import Prism from "prismjs";
 import PrismComponent from "vue-prism-component";
-import Blockable, { blockComputed } from "@/lib/blockable";
+import Blockable, { blockComputed, blockProps } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
   name: "NotionCode",
   components: { PrismComponent },
+  props: { ...blockProps, overrideLang: String, overrideLangClass: String },
   data() {
     return { Prism };
   },
   computed: {
     ...blockComputed,
     lang() {
-      return this.properties?.language?.[0]?.[0]?.toLowerCase();
+      return (
+        this.overrideLang || this.properties?.language?.[0]?.[0]?.toLowerCase()
+      );
     },
     langClass() {
-      return `language-${this.lang}`;
+      return this.overrideLangClass || `language-${this.lang}`;
     },
     supported() {
       return this.Prism.languages[this.lang];

src/blocks/decorator.vue

@@ -60,7 +60,7 @@
     :expression="decoratorValue"
   />
   <code v-else-if="decoratorKey === 'e'" class="notion-inline-code">
-    <NotionDecorator :content="nextContent" v-bind="pass" />
+    {{ decoratorValue }}
   </code>
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>

src/blocks/equation.vue

@@ -1,26 +1,23 @@
 <template>
   <div v-if="katex">
-    <KatexElement :expression="equation" />
+    <component :is="'katex-element'" :expression="equation" />
   </div>
-  <pre v-else-if="prism && supported" :class="['notion-code', langClass]">
-    <PrismComponent :language="lang">{{ equation }}</PrismComponent>
-  </pre>
-  <pre v-else :class="['notion-code', langClass]">
-    <code :class="langClass">{{ equation }}</code>
-  </pre>
+  <NotionCode
+    v-else
+    v-bind="pass"
+    overrideLang="latex"
+    overrideLangClass="language-latex"
+  />
 </template>
 
 <script>
-import KatexElement from "vue-katex";
 import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionCode from "@/blocks/code";
 
 export default {
   extends: Blockable,
-  name: "NotionCode",
-  components: { KatexElement },
-  data() {
-    return { Prism, lang: "latex", langClass: "language-latex" };
-  },
+  name: "NotionEquation",
+  components: { NotionCode },
   computed: {
     ...blockComputed,
     equation() {