inline-equation added

Author: William Kim

dev/serve.vue

@@ -20,7 +20,8 @@ export default {
   },
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
-    this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
+    // Equation terser: add9966dd1ae4d839ccec39150f90c5d
+    this.blockMap = await getPageBlocks("add9966dd1ae4d839ccec39150f90c5d");
   },
 };
 </script>

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "cross-fetch": "^3.0.6",
     "defu": "^5.0.0",
+    "katex": "^0.13.16",
     "vue-fragment": "^1.5.1",
     "vue-prism-component": "^1.2.0"
   },

src/blocks/decorator.vue

@@ -4,8 +4,8 @@
     class="notion-link"
     target="_blank"
     :href="decoratorValue"
-    >{{ pageLinkTitle }}</a
-  >
+    >{{ pageLinkTitle }}
+  </a>
   <span v-else-if="decorators.length === 0">{{ text }}</span>
   <span v-else-if="decoratorKey === 'h'" :class="'notion-' + decoratorValue"
     ><NotionDecorator :content="nextContent" v-bind="pass" />
@@ -30,11 +30,17 @@
   >
     <NotionDecorator :content="nextContent" v-bind="pass" />
   </a>
+  <span
+    v-else-if="decoratorKey === 'e'"
+    v-html="inlineEquation"
+  />
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>
 
 <script>
 import Blockable, { blockProps } from "@/lib/blockable";
+import katex from 'katex';
+import 'katex/dist/katex.css';
 
 export default {
   extends: Blockable,
@@ -66,6 +72,11 @@ export default {
     isPageLink() {
       return this.text === "‣";
     },
+    inlineEquation() {
+      return katex.renderToString(this.decoratorValue, {
+        throwOnError: false,
+      });
+    },
     pageLinkTitle() {
       return (
         this.blockMap?.[this.decoratorValue]?.value?.properties
@@ -74,4 +85,4 @@ export default {
     },
   },
 };
-</script>
+</script>