add custom component

Author: janniks

dev/serve.js

@@ -8,5 +8,5 @@ Vue.use(VueKatex);
 Vue.config.productionTip = false;
 
 new Vue({
-  render: (h) => h(Dev),
+  render: h => h(Dev)
 }).$mount("#app");

example/nuxt.config.js

@@ -23,5 +23,8 @@ export default {
   buildModules: ["vue-notion/nuxt"],
 
   // Plugins (e.g. vue-katex for equations)
-  plugins: ["~/plugins/vue-katex.js"],
+  plugins: [
+    "~/plugins/vue-katex.js",
+    "~/plugins/vue-custom-notion-component.js",
+  ],
 };

example/pages/_slug.vue

@@ -1,6 +1,7 @@
 <template>
   <NotionRenderer
     :blockMap="blockMap"
+    :blockOverrides="blockOverrides"
     :pageLinkOptions="pageLinkOptions"
     fullPage
     prism
@@ -15,6 +16,7 @@ import "prismjs/themes/prism.css";
 export default {
   data() {
     return {
+      blockOverrides: { code: "CustomCode" },
       pageLinkOptions: { component: "NuxtLink", href: "to" },
     };
   },

example/plugins/custom-code.vue

@@ -0,0 +1,43 @@
+<template>
+  <pre
+    :style="{
+      border: '3px solid tomato',
+    }"
+    v-if="prism && supported"
+    :class="['notion-code', langClass]"
+  ><PrismComponent :language="lang">{{ properties.title[0][0] }}</PrismComponent></pre>
+  <pre
+    v-else
+    :class="['notion-code', langClass]"
+  ><code :class="langClass">{{ properties.title[0][0] }}</code></pre>
+</template>
+
+<script>
+import Prism from "prismjs";
+import PrismComponent from "vue-prism-component";
+import { Blockable, blockComputed, blockProps } from "vue-notion";
+
+export default {
+  extends: Blockable,
+  name: "CustomCode",
+  components: { PrismComponent },
+  props: { ...blockProps, overrideLang: String, overrideLangClass: String },
+  data() {
+    return { Prism };
+  },
+  computed: {
+    ...blockComputed,
+    lang() {
+      return (
+        this.overrideLang || this.properties?.language?.[0]?.[0]?.toLowerCase()
+      );
+    },
+    langClass() {
+      return this.overrideLangClass || `language-${this.lang}`;
+    },
+    supported() {
+      return this.Prism.languages[this.lang];
+    },
+  },
+};
+</script>

example/plugins/vue-custom-notion-component.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import CustomCode from "./custom-code.vue";
+
+Vue.component("CustomCode", CustomCode);