diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index 629aa0ad..eae2fcc8 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -19,8 +19,8 @@
       <button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('code_block') }">
-        code_block
+      <button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        code block
       </button>
       <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         h1
diff --git a/docs/src/docPages/examples/basic.md b/docs/src/docPages/examples/basic.md
index bde03000..7186a0ab 100644
--- a/docs/src/docPages/examples/basic.md
+++ b/docs/src/docPages/examples/basic.md
@@ -1,5 +1,3 @@
 # Basic
 
-TODO: CodeBlock throws an exception.
-
 <demo name="Examples/Basic" />
\ No newline at end of file
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index 2a0d4d1c..08aac76e 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -99,4 +99,17 @@ blockquote {
   p {
     margin: 0.5rem 0;
   }
+
+  pre {
+    background: rgba($colorBlack, 0.9);
+    color: rgba($colorWhite, 0.9);
+    padding: 1rem;
+    margin: 0.5rem 0;
+    border-radius: 0.25rem;
+
+    code {
+      color: inherit;
+      background: none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/extension-codeblock/index.ts b/packages/extension-codeblock/index.ts
index dfd2a736..875d62b1 100644
--- a/packages/extension-codeblock/index.ts
+++ b/packages/extension-codeblock/index.ts
@@ -1,7 +1,7 @@
 import { Node } from '@tiptap/core'
 
 export default new Node()
-  .name('code_block')
+  .name('codeBlock')
   .schema(() => ({
     content: 'text*',
     marks: '',
@@ -14,4 +14,10 @@ export default new Node()
     ],
     toDOM: () => ['pre', ['code', 0]],
   }))
+  .commands(({ editor, name }) => ({
+    [name]: next => attrs => {
+      editor.toggleNode(name, 'paragraph', attrs)
+      next()
+    },
+  }))
   .create()