Add equations

dev/serve.js

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

dev/serve.vue

@@ -9,6 +9,7 @@ import { NotionRenderer, getPageBlocks } from "@/entry";
 
 import "prismjs";
 import "prismjs/themes/prism.css";
+import "katex/dist/katex.min.css";
 
 export default {
   name: "ServeDev",
@@ -20,6 +21,7 @@ export default {
   },
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
+    // equation tester: 2a1d5226d68246deba627012081693f9
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };

docs/README.md

@@ -2,6 +2,7 @@
 
 - `NotionRenderer`: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notionrenderer)
 - Syntax-Highlighting in Code Blocks (with Prism.js): [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#syntax-highlighting)
+- Equations: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#equations)
 - Notion API: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#notion-api)
 - Nuxt: [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs#nuxtjs--server-side-rendering--static-site-generation)
 
@@ -110,6 +111,27 @@ import "prismjs/themes/prism.css";
 > ⚠️ To keep file size down, Prism.js only includes `markup`, `css`, `clike`, and `javascript` languages per default.
 > To add supported languages import the language component from Prism.js – e.g. `import 'prismjs/components/prism-rust'` for `rust`.
 
+## Equations
+
+The following steps are required to display equations via katex
+
+- Install `vue-katex` to your project – `npm install vue-katex`
+- Import the katex css in your project
+
+```js
+import "katex/dist/katex.min.css";
+```
+
+- Install the Vue plugin globally
+
+```js
+import Vue from "vue";
+import VueKatex from "vue-katex";
+Vue.use(VueKatex);
+```
+
+> For usage with Nuxt, look at the `/example` (`plugins` in `nuxt.config.js`, `plugins/vue-katex.js`)
+
 ## Notion API
 
 The official Notion API is currently in [private beta](https://www.notion.so/api-beta).

example/nuxt.config.js

@@ -21,4 +21,7 @@ export default {
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: ["vue-notion/nuxt"],
+
+  // Plugins (e.g. vue-katex for equations)
+  plugins: ["~/plugins/vue-katex.js"],
 };

example/plugins/vue-katex.js

@@ -0,0 +1,5 @@
+import Vue from "vue";
+import VueKatex from "vue-katex";
+import "katex/dist/katex.min.css";
+
+Vue.use(VueKatex);

package.json

@@ -56,7 +56,8 @@
   },
   "peerDependencies": {
     "prismjs": "^1.22.0",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-katex": "^0.5.0"
   },
   "engines": {
     "node": ">=10"

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,6 +30,11 @@
   >
     <NotionDecorator :content="nextContent" v-bind="pass" />
   </a>
+  <component
+    v-else-if="decoratorKey === 'e'"
+    :is="'katex-element'"
+    :expression="decoratorValue"
+  />
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>