1 files changed, 15 insertions, 10 deletions
diff --git a/docs/4.0/content/code.md b/docs/4.0/content/code.md
index 29e66d52f..d1ce12ccd 100644
--- a/docs/4.0/content/code.md
+++ b/docs/4.0/content/code.md
@@ -10,41 +10,46 @@ toc: true
 
 Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
 
-{% example html %}
+{% capture example %}
 For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Code blocks
 
 Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
 
-{% example html %}
+{% capture example %}
 <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
 &lt;p&gt;And another line of sample text here...&lt;/p&gt;
 </code></pre>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Variables
 
 For indicating variables use the `<var>` tag.
 
-{% example html %}
+{% capture example %}
 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## User input
 
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
-{% example html %}
+{% capture example %}
 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Sample output
 
 For indicating sample output from a program use the `<samp>` tag.
 
-{% example html %}
+{% capture example %}
 <samp>This text is meant to be treated as sample output from a computer program.</samp>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}