+ {/* section to display currently selected language */}
+
+
+
+
+ {/* component to display code using Codemirror */}
+
+
+ );
+ },
+ }
+);
diff --git a/examples/06-custom-schema/05-code-block/README.md b/examples/06-custom-schema/05-code-block/README.md
new file mode 100644
index 0000000000..2a1fed1fb6
--- /dev/null
+++ b/examples/06-custom-schema/05-code-block/README.md
@@ -0,0 +1,17 @@
+# Code Block
+
+In this example, we create a custom CodeBlock component, which is used to display formatted code snippets. Additionally, we create a Slash Menu item that inserts a CodeBlock into the editor.
+
+The example is based from below examples:
+
+- [Alert Block](examples/06-custom-schema/01-alert-block)
+- [BlockNote-code from detensestation](https://github.com/defensestation/blocknote-code)
+
+**Try it out:** Press the "/" key to open the Slash Menu and insert an `Code` block!
+
+**Relevant Docs:**
+
+- [Custom Blocks](/docs/custom-schemas/custom-blocks)
+- [Alert Block](examples/06-custom-schema/01-alert-block)
+- [Changing Slash Menu Items](/docs/ui-components/suggestion-menus#changing-slash-menu-items)
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/06-custom-schema/05-code-block/index.html b/examples/06-custom-schema/05-code-block/index.html
new file mode 100644
index 0000000000..dd066ca8b9
--- /dev/null
+++ b/examples/06-custom-schema/05-code-block/index.html
@@ -0,0 +1,14 @@
+
+
+
+