diff --git a/docs/tour/dimensions.md b/docs/tour/dimensions.md
index a1b71dcf..cac3ee36 100644
--- a/docs/tour/dimensions.md
+++ b/docs/tour/dimensions.md
@@ -1,3 +1,6 @@
+import CodeBlock from '@theme/CodeBlock';
+import Dimensions from '@site/static/d2/dimensions.d2';
+
 # Dimensions
 
 You can specify the `width` and `height` of most shapes.
@@ -6,31 +9,8 @@ You can specify the `width` and `height` of most shapes.
 These keywords cannot be set on containers, since containers resize to fit their children.
 :::
 
-```d2
-direction: right
-
-small jerry: "" {
-  shape: image
-  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
-  width: 200
-  height: 200
-}
-
-med jerry: "" {
-  shape: image
-  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
-  width: 300
-  height: 300
-}
-
-big jerry: "" {
-  shape: image
-  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
-  width: 500
-  height: 400
-}
-
-big jerry -> med jerry -> small jerry
-```
+<CodeBlock className="language-d2">
+    {Dimensions}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/dimensions.svg2')}}></div>
diff --git a/docs/tour/interactive.md b/docs/tour/interactive.md
index d30a3387..69819b96 100644
--- a/docs/tour/interactive.md
+++ b/docs/tour/interactive.md
@@ -1,3 +1,7 @@
+import CodeBlock from '@theme/CodeBlock';
+import Tooltip from '@site/static/d2/tooltip.d2';
+import Links from '@site/static/d2/links.d2';
+
 # Interactive
 
 ## Tooltips
@@ -10,11 +14,9 @@ Tooltips are text that appear on hover. They serve two purposes:
     - Your diagram is getting messy. Instead of adding more text, you can tuck some into
       tooltips.
 
-```d2
-x: { tooltip: Total abstinence is easier than perfect moderation }
-y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
-x -> y
-```
+<CodeBlock className="language-d2">
+    {Tooltip}
+</CodeBlock>
 
 Try it out, hover over `x` and `y`. Notice that they have an icon indicating that they
 have a tooltip.
@@ -39,15 +41,9 @@ tooltips.
 
 Links are like tooltips, except you click to go to an external link.
 
-```d2
-x: I'm a Mac {
-  link: https://apple.com
-}
-y: And I'm a PC {
-  link: https://microsoft.com
-}
-x -> y: gazoontite
-```
+<CodeBlock className="language-d2">
+    {Links}
+</CodeBlock>
 
 Try clicking on each.
 
diff --git a/docs/tour/positions.md b/docs/tour/positions.md
index dde2dcfa..d2a265cd 100644
--- a/docs/tour/positions.md
+++ b/docs/tour/positions.md
@@ -1,3 +1,9 @@
+import CodeBlock from '@theme/CodeBlock';
+import NearConstant from '@site/static/d2/near-constant.d2';
+import NearContainer from '@site/static/d2/near-container.d2';
+import NearExplanation from '@site/static/d2/near-explanation.d2';
+import NearLabelIcon from '@site/static/d2/near-label-icon.d2';
+
 # Positions
 
 In general, positioning is controlled entirely by the layout engine. It's one of the
@@ -23,76 +29,25 @@ Let's explore some use cases:
 
 ### Giving your diagram a title
 
-```d2
-title: |md
-  # A winning strategy
-| { near: top-center }
-
-poll the people -> results
-results -> unfavorable -> poll the people
-results -> favorable -> will of the people
-```
+<CodeBlock className="language-d2">
+    {NearConstant}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-constant.svg2')}}></div>
 
 ### Creating a legend
 
-```d2
-direction: right
-
-x -> y: {
-  style.stroke: green
-}
-
-y -> z: {
-  style.stroke: red
-}
-
-legend: {
-  near: bottom-center
-  color1: foo {
-    shape: text
-    style.font-color: green
-  }
-
-  color2: bar {
-    shape: text
-    style.font-color: red
-  }
-}
-```
+<CodeBlock className="language-d2">
+    {NearContainer}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-container.svg2')}}></div>
 
 ### Longform description or explanation
 
-```d2
-explanation: |md
-  # LLMs
-  The Large Language Model (LLM) is a powerful AI\
-    system that learns from vast amounts of text data.\
-  By analyzing patterns and structures in language,\
-  it gains an understanding of grammar, facts,\
-  and even some reasoning abilities. As users input text,\
-  the LLM predicts the most likely next words or phrases\
-  to create coherent responses. The model\
-  continuously fine-tunes its output, considering both the\
-  user's input and its own vast knowledge base.\
-  This cutting-edge technology enables LLM to generate human-like text,\
-  making it a valuable tool for various applications.
-| {
-  near: center-left
-}
-
-ML Platform -> Pre-trained models
-ML Platform -> Model registry
-ML Platform -> Compiler
-ML Platform -> Validation
-ML Platform -> Auditing
-
-Model registry -> Server.Batch Predictor
-Server.Online Model Server
-```
+<CodeBlock className="language-d2">
+    {NearExplanation}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-explanation.svg2')}}></div>
 
@@ -100,22 +55,9 @@ Server.Online Model Server
 
 The `near` can be nested to `label` and `icon` to specify their positions.
 
-```d2
-direction: right
-x -> y
-
-x: worker {
-  label.near: top-center
-  icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg
-  icon.near: outside-top-right
-}
-
-y: profits {
-  label.near: bottom-right
-  icon: https://icons.terrastruct.com/essentials%2Fprofits.svg
-  icon.near: outside-top-left
-}
-```
+<CodeBlock className="language-d2">
+    {NearLabelIcon}
+</CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/near-label-icon.svg2')}}></div>