Merge pull request #15 from zernonia/14-add-code-block-support-multiple-language

14 add code block support multiple language

Author: zernonia

src/blocks/code.vue

@@ -4,10 +4,43 @@ import PrismBlock from "./helpers/prism.vue"
 import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
 import { computed } from "vue"
 
+import "prismjs/components/prism-markup-templating"
+import "prismjs/components/prism-markup"
+import "prismjs/components/prism-bash"
+import "prismjs/components/prism-c"
+import "prismjs/components/prism-cpp"
+import "prismjs/components/prism-csharp"
+import "prismjs/components/prism-docker"
+import "prismjs/components/prism-java"
+import "prismjs/components/prism-js-templates"
+import "prismjs/components/prism-typescript"
+import "prismjs/components/prism-coffeescript"
+import "prismjs/components/prism-diff"
+import "prismjs/components/prism-git"
+import "prismjs/components/prism-go"
+import "prismjs/components/prism-graphql"
+import "prismjs/components/prism-handlebars"
+import "prismjs/components/prism-json"
+import "prismjs/components/prism-less"
+import "prismjs/components/prism-makefile"
+import "prismjs/components/prism-markdown"
+import "prismjs/components/prism-objectivec"
+import "prismjs/components/prism-ocaml"
+import "prismjs/components/prism-python"
+import "prismjs/components/prism-reason"
+import "prismjs/components/prism-rust"
+import "prismjs/components/prism-sass"
+import "prismjs/components/prism-scss"
+import "prismjs/components/prism-solidity"
+import "prismjs/components/prism-sql"
+import "prismjs/components/prism-stylus"
+import "prismjs/components/prism-swift"
+import "prismjs/components/prism-wasm"
+import "prismjs/components/prism-yaml"
+
 const props = defineProps({ overrideLang: String, overrideLangClass: String, ...defineNotionProps })
 //@ts-ignore
 const { properties } = useNotionBlock(props)
-
 const lang = computed(() => {
   return props.overrideLang || properties.value?.language?.[0]?.[0]?.toLowerCase()
 })
@@ -19,6 +52,8 @@ const langClass = computed(() => {
 const supported = computed(() => {
   return lang.value ? Prism?.languages[lang.value] : false
 })
+
+const computedSlot = computed(() => properties.value?.title.map((i) => i?.[0]).join(""))
 </script>
 
 <script lang="ts">
@@ -29,9 +64,9 @@ export default {
 
 <template>
   <div v-if="supported" :class="['notion-code']">
-    <PrismBlock :language="lang">{{ properties?.title[0][0] }}</PrismBlock>
+    <PrismBlock :language="lang">{{ computedSlot }}</PrismBlock>
   </div>
   <div v-else :class="['notion-code']">
-    <pre><code :class="langClass">{{ properties?.title[0][0] }}</code></pre>
+    <pre><div :class="langClass">{{ computedSlot }}</div></pre>
   </div>
 </template>

src/blocks/helpers/prism.vue

@@ -29,6 +29,6 @@ const d = computed(() => Prism?.highlight(code, Prism?.languages[language.value]
 </script>
 
 <template>
-  <code :class="className" v-if="inline" v-html="d"></code>
-  <pre :class="className" v-else><code v-html="d"></code></pre>
+  <div :class="className" v-if="inline" v-html="d"></div>
+  <pre :class="className" v-else><div v-html="d"></div></pre>
 </template>

src/components/block.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from "vue"
 import { defineNotionProps, useNotionBlock } from "@/lib/blockable"
 import { availableType } from "@/lib/constant"
 import NotionBookmark from "@/blocks/bookmark.vue"
 import NotionCallout from "@/blocks/callout.vue"
-import NotionCode from "@/blocks/code.vue"
 import NotionColumn from "@/blocks/column.vue"
 import NotionEquation from "@/blocks/equation.vue"
 import NotionFigure from "@/blocks/helpers/figure.vue"
@@ -18,6 +18,8 @@ import NotionTodo from "@/blocks/todo.vue"
 import NotionToggle from "@/blocks/toggle.vue"
 import NotionTableOfContents from "@/blocks/table-of-contents.vue"
 
+const NotionCode = defineAsyncComponent(() => import("@/blocks/code.vue"))
+
 const props = defineProps({ ...defineNotionProps })
 //@ts-ignore
 const { pass, type, format, isType } = useNotionBlock(props)

src/style.css

@@ -108,6 +108,24 @@
   --notion-gray_background_co: rgba(69, 75, 78, 0.3);
 }
 
+::-webkit-scrollbar {
+  background: transparent;
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: #d3d1cb;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #c2c1bf;
+}
+::-webkit-scrollbar-track {
+  background: #edece9;
+}
+*::selection {
+  background: rgba(45, 170, 219, 0.3);
+}
+
 .notion {
   box-sizing: border-box;
   font-size: 16px;
@@ -820,7 +838,6 @@ svg.notion-page-icon {
 
 .notion-code {
   width: 100%;
-  padding: 20px 16px 20px 20px;
   margin: 4px 0;
   border-radius: 3px;
   tab-size: 2;
@@ -830,6 +847,10 @@ svg.notion-page-icon {
   background: var(--bg-color-1);
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
+.notion-code > pre {
+  padding: 34px 16px 32px 32px;
+  margin: 0;
+}
 
 .notion-column {
   display: flex;