fix code blocks

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

docs/src/docPages/examples/basic.md

@@ -1,5 +1,3 @@
 # Basic
 
-TODO: CodeBlock throws an exception.
-
 <demo name="Examples/Basic" />

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;
+    }
+  }
 }