feat: code highlight for tiptap

composables/tiptap.ts

@@ -1,4 +1,4 @@
-import { Extension, VueNodeViewRenderer, useEditor } from '@tiptap/vue-3'
+import { Extension, useEditor } from '@tiptap/vue-3'
 import Placeholder from '@tiptap/extension-placeholder'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -10,11 +10,10 @@ import Bold from '@tiptap/extension-bold'
 import Italic from '@tiptap/extension-italic'
 import Code from '@tiptap/extension-code'
 import { Plugin } from 'prosemirror-state'
-import CodeBlock from '@tiptap/extension-code-block'
 
 import type { Ref } from 'vue'
 import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
-import TiptapCodeBlock from '~/components/tiptap/TiptapCodeBlock.vue'
+import { CodeBlockShiki } from './tiptap/shiki'
 
 export interface UseTiptapOptions {
   content: Ref<string | undefined>
@@ -56,12 +55,7 @@ export function useTiptap(options: UseTiptapOptions) {
       CharacterCount.configure({
         limit: characterLimit.value,
       }),
-      CodeBlock
-        .extend({
-          addNodeView() {
-            return VueNodeViewRenderer(TiptapCodeBlock)
-          },
-        }),
+      CodeBlockShiki,
       Extension.create({
         name: 'api',
         addKeyboardShortcuts() {