Merge pull request #60 from dyllan-to-yu/main

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>
 

docs/README.md

@@ -23,6 +23,7 @@ The `NotionRenderer` component offers a few properties
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
 - [`pageLinkTarget`](#pageLinkTarget) – default: `"_self"`
 - [`prism`](#prism) – default: `false`
+- [`katex`](#katex) – default: `false`
 - [`textLinkTarget`](#textLinkTarget) – default: `"_blank"`
 
 ### `blockMap`: Object
@@ -94,6 +95,12 @@ pageLinkOptions: {
 
 > Check the `docs#syntax-highlighting` section below for more details.
 
+### `katex`: Boolean
+
+– whether or not latex rendering using vue-katex should be activated.
+
+> Check the `docs#equations` section below for more details.
+
 ### `textLinkTarget`: String
 
 – the [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) of links
@@ -141,6 +148,13 @@ import VueKatex from "vue-katex";
 Vue.use(VueKatex);
 ```
 
+- Add the `katex` flag to the `NotionRenderer`
+
+```diff
+-<NotionRenderer :blockMap="blockMap" />
++<NotionRenderer :blockMap="blockMap" katex />
+```
+
 > For usage with Nuxt, look at the `/example` (`plugins` in `nuxt.config.js`, `plugins/vue-katex.js`)
 
 ## Notion API

package-lock.json

@@ -38,6 +38,7 @@
     "@rollup/plugin-alias": "^2.2.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-replace": "^3.0.0",
+    "@types/prismjs": "^1.16.6",
     "@vue/cli-plugin-babel": "^4.3.1",
     "@vue/cli-service": "^4.3.1",
     "cross-env": "^7.0.2",
@@ -52,12 +53,12 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.1.9",
     "vue": "^2.6.14",
+    "vue-katex": "^0.5.0",
     "vue-template-compiler": "^2.6.14"
   },
   "peerDependencies": {
     "prismjs": "^1.22.0",
-    "vue": "^2.6.14",
-    "vue-katex": "^0.5.0"
+    "vue": "^2.6.14"
   },
   "engines": {
     "node": ">=10"

package.json

@@ -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/code.vue

@@ -55,10 +55,13 @@
     <NotionDecorator :content="nextContent" v-bind="pass" />
   </s>
   <component
-    v-else-if="decoratorKey === 'e'"
+    v-else-if="decoratorKey === 'e' && katex"
     :is="'katex-element'"
     :expression="decoratorValue"
   />
+  <code v-else-if="decoratorKey === 'e'" class="notion-inline-code">
+    {{ decoratorValue }}
+  </code>
   <NotionDecorator v-else :content="nextContent" v-bind="pass" />
 </template>
 

src/blocks/decorator.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="katex">
+    <component :is="'katex-element'" :expression="equation" />
+  </div>
+  <NotionCode
+    v-else
+    v-bind="pass"
+    overrideLang="latex"
+    overrideLangClass="language-latex"
+  />
+</template>
+
+<script>
+import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionCode from "@/blocks/code";
+
+export default {
+  extends: Blockable,
+  name: "NotionEquation",
+  components: { NotionCode },
+  computed: {
+    ...blockComputed,
+    equation() {
+      return this.properties?.title?.[0]?.[0];
+    },
+  },
+};
+</script>

src/blocks/equation.vue

@@ -9,6 +9,7 @@
   <NotionBookmark v-else-if="isType('bookmark')" v-bind="pass" />
   <NotionCallout v-else-if="isType('callout')" v-bind="pass" />
   <NotionCode v-else-if="isType('code')" v-bind="pass" />
+  <NotionEquation v-else-if="isType('equation')" v-bind="pass" />
   <NotionText v-else-if="isType('text')" v-bind="pass" />
   <NotionQuote v-else-if="isType('quote')" v-bind="pass" />
   <NotionToggle v-else-if="isType('toggle')" v-bind="pass">
@@ -49,6 +50,7 @@ import NotionHeader from "@/blocks/header";
 import NotionText from "@/blocks/text";
 import NotionToggle from "@/blocks/toggle";
 import NotionQuote from "@/blocks/quote";
+import NotionEquation from "@/blocks/equation";
 
 export default {
   extends: Blockable,
@@ -65,6 +67,7 @@ export default {
     NotionText,
     NotionToggle,
     NotionQuote,
+    NotionEquation,
   },
 };
 </script>

src/components/block.vue

@@ -12,6 +12,7 @@ export const blockProps = {
   pageLinkOptions: Object,
   pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
+  katex: { type: Boolean, default: false },
   textLinkTarget: { type: String, default: "_blank" },
   todo: { type: Boolean, default: false },
 };
@@ -30,6 +31,7 @@ export const blockComputed = {
       mapPageUrl: this.mapPageUrl,
       pageLinkOptions: this.pageLinkOptions,
       prism: this.prism,
+      katex: this.katex,
       todo: this.todo,
     };
   },