diff --git a/package.json b/package.json
index 17d98b1..5dfc75f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
     "@tiptap/core": "2.0.0-beta.220",
     "@tiptap/extension-bubble-menu": "2.0.0-beta.220",
     "@tiptap/extension-character-count": "2.0.0-beta.220",
+    "@tiptap/extension-code-block": "^2.0.0",
+    "@tiptap/extension-highlight": "^2.0.0",
     "@tiptap/extension-link": "2.0.0-beta.220",
     "@tiptap/extension-typography": "2.0.0-beta.220",
     "@tiptap/pm": "2.0.0-beta.220",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fa7693..d6b9a42 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,12 @@ dependencies:
   '@tiptap/extension-character-count':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
+  '@tiptap/extension-code-block':
+    specifier: ^2.0.0
+    version: 2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
+  '@tiptap/extension-highlight':
+    specifier: ^2.0.0
+    version: 2.0.0(@tiptap/core@2.0.0-beta.220)
   '@tiptap/extension-link':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
@@ -700,11 +706,11 @@ packages:
       '@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
     dev: false
 
-  /@tiptap/extension-code-block@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
-    resolution: {integrity: sha512-fgA7yTfHqhBtMJF7I9FPJ6UWuZPtxOQiN45Iv9LNmFIB6YRucdpmF+daZ27sElu0a+eICZyXwVn4w4iJphifuw==}
+  /@tiptap/extension-code-block@2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
+    resolution: {integrity: sha512-rkI2W8037A9BWtsYNhuzA4/IjJF1jafmGGXKh56xLW7hkW563u33jizvQ+f+g+5dofKWUd+0coMv0bDax7ANCg==}
     peerDependencies:
-      '@tiptap/core': ^2.0.0-beta.209
-      '@tiptap/pm': ^2.0.0-beta.209
+      '@tiptap/core': ^2.0.0
+      '@tiptap/pm': ^2.0.0
     dependencies:
       '@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
       '@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
@@ -773,6 +779,14 @@ packages:
       '@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
     dev: false
 
+  /@tiptap/extension-highlight@2.0.0(@tiptap/core@2.0.0-beta.220):
+    resolution: {integrity: sha512-2EbfBMmWRQj06LaG2cwncmKNQJzxrquSubVVK7wmrVOTm7oCbgCiofYZ3Fv0vE9qNowKUnPsd1oza7m5x2FAeA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
+    dev: false
+
   /@tiptap/extension-history@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
     resolution: {integrity: sha512-qNL2a9UhnlmCs4y2iQYrfeMB8vEX3bHozBJanHu0PWNQJcj90R5xqorBp/bRcqZdi0kuQfxcTnGHtLUpN/U0TA==}
     peerDependencies:
@@ -894,7 +908,7 @@ packages:
       '@tiptap/extension-bold': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
       '@tiptap/extension-bullet-list': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
       '@tiptap/extension-code': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
-      '@tiptap/extension-code-block': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
+      '@tiptap/extension-code-block': 2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
       '@tiptap/extension-document': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
       '@tiptap/extension-dropcursor': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
       '@tiptap/extension-gapcursor': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
diff --git a/src/components/Tiptap/BubbleMenu.vue b/src/components/Tiptap/BubbleMenu.vue
index 87efbcd..1109756 100644
--- a/src/components/Tiptap/BubbleMenu.vue
+++ b/src/components/Tiptap/BubbleMenu.vue
@@ -12,10 +12,15 @@ const inputUrl = ref<HTMLInputElement | null>(null)
 const openLinkInput = () => {
   url.value = editor.getAttributes('link').href || ''
   showUrlInput.value = true
+
+  editor.chain().toggleHighlight().run()
+
   nextTick(() => inputUrl.value?.focus())
 }
 
 const setLink = () => {
+  editor.chain().focus().unsetHighlight().run()
+
   if (url.value === null) {
     showUrlInput.value = false
     return
diff --git a/src/components/Tiptap/Editor.vue b/src/components/Tiptap/Editor.vue
index b75135f..2124b51 100644
--- a/src/components/Tiptap/Editor.vue
+++ b/src/components/Tiptap/Editor.vue
@@ -3,9 +3,10 @@ import { EditorContent, useEditor } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Typography from '@tiptap/extension-typography'
 import Link from '@tiptap/extension-link'
+import Highlight from '@tiptap/extension-highlight'
+import suggestion from './suggestion'
 import BubbleMenu from './BubbleMenu.vue'
 import Commands from './commands'
-import suggestion from './suggestion'
 
 const editor = useEditor({
   content: `<p>
@@ -23,6 +24,11 @@ const editor = useEditor({
     Commands.configure({
       suggestion,
     }),
+    Highlight.configure({
+      HTMLAttributes: {
+        class: 'bg-blue-100',
+      },
+    }),
   ],
   editable: true,
   autofocus: true,
diff --git a/src/components/Tiptap/suggestion.js b/src/components/Tiptap/suggestion.js
index dd59062..ee6f3ec 100644
--- a/src/components/Tiptap/suggestion.js
+++ b/src/components/Tiptap/suggestion.js
@@ -29,13 +29,13 @@ export default {
         },
       },
       {
-        title: 'bold',
+        title: 'code block',
         command: ({ editor, range }) => {
           editor
             .chain()
             .focus()
             .deleteRange(range)
-            .setMark('bold')
+            .setNode('pre')
             .run()
         },
       },