diff --git a/dev/serve.js b/dev/serve.js
index 0f3962b..aa6763d 100644
--- a/dev/serve.js
+++ b/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");
diff --git a/dev/serve.vue b/dev/serve.vue
index 8d92b57..ed90a89 100644
--- a/dev/serve.vue
+++ b/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");
},
};
diff --git a/docs/README.md b/docs/README.md
index 5269478..fd582ce 100644
--- a/docs/README.md
+++ b/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).
diff --git a/example/nuxt.config.js b/example/nuxt.config.js
index a0fcd21..6ad5a85 100644
--- a/example/nuxt.config.js
+++ b/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"],
};
diff --git a/example/plugins/vue-katex.js b/example/plugins/vue-katex.js
new file mode 100644
index 0000000..685fe61
--- /dev/null
+++ b/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);
diff --git a/package-lock.json b/package-lock.json
index 1e872e7..d3cbbf0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,8 @@
},
"peerDependencies": {
"prismjs": "^1.22.0",
- "vue": "^2.6.14"
+ "vue": "^2.6.14",
+ "vue-katex": "^0.5.0"
}
},
"node_modules/@babel/code-frame": {
@@ -8826,6 +8827,24 @@
"promise": "^7.0.1"
}
},
+ "node_modules/katex": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz",
+ "integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==",
+ "peer": true,
+ "dependencies": {
+ "commander": "^2.19.0"
+ },
+ "bin": {
+ "katex": "cli.js"
+ }
+ },
+ "node_modules/katex/node_modules/commander": {
+ "version": "2.20.3",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+ "peer": true
+ },
"node_modules/killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -16104,6 +16123,28 @@
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
"dev": true
},
+ "node_modules/vue-katex": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/vue-katex/-/vue-katex-0.5.0.tgz",
+ "integrity": "sha512-KsjSK4ftpw9q8SP1OJbigPOozdthOS46+6GmqkToXZVmmPejBHGGmDUxJ/2UtkyAuHf5dHL+2RvOXi/RV77YOA==",
+ "peer": true,
+ "dependencies": {
+ "deepmerge": "^4.2.2"
+ },
+ "peerDependencies": {
+ "katex": "^0.12",
+ "vue": "^2.6.11"
+ }
+ },
+ "node_modules/vue-katex/node_modules/deepmerge": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+ "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+ "peer": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/vue-loader": {
"version": "15.9.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -24292,6 +24333,23 @@
"promise": "^7.0.1"
}
},
+ "katex": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz",
+ "integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==",
+ "peer": true,
+ "requires": {
+ "commander": "^2.19.0"
+ },
+ "dependencies": {
+ "commander": {
+ "version": "2.20.3",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+ "peer": true
+ }
+ }
+ },
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -30136,6 +30194,23 @@
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
"dev": true
},
+ "vue-katex": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/vue-katex/-/vue-katex-0.5.0.tgz",
+ "integrity": "sha512-KsjSK4ftpw9q8SP1OJbigPOozdthOS46+6GmqkToXZVmmPejBHGGmDUxJ/2UtkyAuHf5dHL+2RvOXi/RV77YOA==",
+ "peer": true,
+ "requires": {
+ "deepmerge": "^4.2.2"
+ },
+ "dependencies": {
+ "deepmerge": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+ "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+ "peer": true
+ }
+ }
+ },
"vue-loader": {
"version": "15.9.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
diff --git a/package.json b/package.json
index 6d0111b..18edd41 100644
--- a/package.json
+++ b/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"
diff --git a/src/blocks/decorator.vue b/src/blocks/decorator.vue
index 79d68a8..5f7d0d8 100644
--- a/src/blocks/decorator.vue
+++ b/src/blocks/decorator.vue
@@ -4,8 +4,8 @@
class="notion-link"
target="_blank"
:href="decoratorValue"
- >{{ pageLinkTitle }}
+ >{{ pageLinkTitle }}
+
{{ text }}
@@ -30,6 +30,11 @@
>
+