diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md
index a783d2af..d46a2921 100644
--- a/docs/tour/grid-diagrams.md
+++ b/docs/tour/grid-diagrams.md
@@ -78,7 +78,7 @@ dominant direction is the order in which cells are filled.
 
 For example:
 
-```d2
+```d2-incomplete
 grid-rows: 4
 grid-columns: 2
 # bunch of shapes
@@ -90,7 +90,7 @@ Since `grid-rows` is defined first, objects will fill rows before moving onto co
 
 But if it were reversed:
 
-```d2
+```d2-incomplete
 grid-columns: 2
 grid-rows: 4
 # bunch of shapes
diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js
index de92b33c..0a39edf2 100644
--- a/src/theme/CodeBlock/index.js
+++ b/src/theme/CodeBlock/index.js
@@ -41,9 +41,13 @@ export default function D2CodeBlock(props) {
     return null;
   }
 
+  let lang = props.className;
+  if (props.className.endsWith("-incomplete")) {
+    lang = "d2";
+  }
   let scope = "plaintext";
   if (props.className) {
-    scope = `source.${props.className.replace(/^language-/, "")}`;
+    scope = `source.${lang.replace(/^language-/, "")}`;
   }
 
   let [tmGrammar, setTMGrammar] = React.useState(getTextMateGrammar(scope));