diff --git a/docs/userGuide/syntax/dates.md b/docs/userGuide/syntax/dates.md
index 53087c0d59..1d7273464d 100644
--- a/docs/userGuide/syntax/dates.md
+++ b/docs/userGuide/syntax/dates.md
@@ -72,28 +72,27 @@ YYYY | 2019
 
 Full formatting reference available [here](https://momentjs.com/docs/#/displaying/format/).
 
-{{ icon_example }}
 <div id="examples" class="d-none">
 <include boilerplate src="outputBox.md">
-<div id="code">
+<variable name="code">
 
 <box><span>
 {{ njblock('set base1 = "2019-08-12"') }}<br/>
 {{ njblock('set format1 = "DD MM YYYY"') }}<br/>
 {{ njblock('set format2 = "ddd Do MM"') }}<br/>
-{{ njcode('base1 | date') }} `<!-- Mon 12 Aug -->`<br/>
-{{ njcode('base1 | date(format1)') }} `<!-- 12 08 2019 -->`<br/>
-{{ njcode('base1 | date(format1, 10)') }} `<!-- 22 08 2019 -->`<br/>
-{{ njcode('base1 | date(format2, 10)') }} `<!-- Thu 22/08 -->`<br/>
+{{ njcode('base1 | date') }} <!-- Mon 12 Aug --><br/>
+{{ njcode('base1 | date(format1)') }} <!-- 12 08 2019 --><br/>
+{{ njcode('base1 | date(format1, 10)') }} <!-- 22 08 2019 --><br/>
+{{ njcode('base1 | date(format2, 10)') }} <!-- Thu 22/08 --><br/>
 </span></box>
+</variable>
 
-</div>
-<div id="output">
+<variable name="output">
 Mon 12 Aug<br/>
 12 08 2019<br/>
 22 08 2019<br/>
 Thu 22/08
-</div>
+</variable>
 </include>
 </div>
 
diff --git a/docs/userGuide/syntax/diagrams.md b/docs/userGuide/syntax/diagrams.md
index 52c8eb9aa4..d76675fc5e 100644
--- a/docs/userGuide/syntax/diagrams.md
+++ b/docs/userGuide/syntax/diagrams.md
@@ -15,7 +15,7 @@ must be installed to use this feature**
 
 <div id="main-example">
 <include src="outputBox.md" boilerplate>
-<div id="code">
+<variable name="code">
 
 ```
 <puml width="300">
@@ -31,11 +31,11 @@ return success
 @enduml
 </puml>
 ```
-</div>
+</variable>
 
-<div id="output">
+<variable name="output">
 <pic src="../diagrams/sequence.png" width="300" />
-</div>
+</variable>
 
 </include>
 </div>
@@ -43,7 +43,7 @@ return success
 Alternatively, a PlantUML diagram can be specified in a separate `.puml` file and inserted into a page using a `<puml>` tag.
 
 <include src="outputBox.md" boilerplate>
-<div id="code">
+<variable name="code">
 
 `diagrams/sequence.puml`:
 ```
@@ -63,11 +63,11 @@ in another file:
 ```html
 <puml src="diagrams/sequence.puml" width=300 />
 ```
-</div>
+</variable>
 
-<div id="output">
+<variable id="output">
 <pic src="../diagrams/sequence.png" width="300" />
-</div>
+</variable>
 
 </include>
 
diff --git a/docs/userGuide/syntax/embeds.md b/docs/userGuide/syntax/embeds.md
index 07ce28a5dd..5888ab2508 100644
--- a/docs/userGuide/syntax/embeds.md
+++ b/docs/userGuide/syntax/embeds.md
@@ -8,18 +8,18 @@ Here are three ways of embedding YouTube videos and one example of how it will l
 
 <!-- We use outputBox.md instead of codeAndOuput.md as boilerplate, because there are 3 ways to code vs 1 example -->
 <include src="outputBox.md" boilerplate >
-<div id="code">
+<variable name="code">
 
 ```markdown
 @[youtube](v40b3ExbM0c)
 @[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
 @[youtube](http://youtu.be/v40b3ExbM0c)
 ```
-</div>
-<div id="output">
+</variable>
+<variable name="output">
 
 @[youtube](v40b3ExbM0c)
-</div>
+</variable>
 </include>
 
 More media blocks, embedding services and additional options can be found in [Markdown-it documentation](https://github.com/rotorz/markdown-it-block-embed).
diff --git a/docs/userGuide/syntax/searchBars.md b/docs/userGuide/syntax/searchBars.md
index 87afc38bd8..98a44a1b91 100644
--- a/docs/userGuide/syntax/searchBars.md
+++ b/docs/userGuide/syntax/searchBars.md
@@ -5,7 +5,7 @@ The `searchbar` component allows users to search all headings within any page on
 <div id="body">
 
 <include src="outputBox.md" boilerplate >
-<div id="code">
+<variable name="code">
 
 ```html
 <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
@@ -21,14 +21,14 @@ To use the searchbar within a navbar, add the following markup to your file. The
   </form>
 </li>
 ```
-</div>
-<div id="output">
+</variable>
+<variable id="output">
 
 Enter a search term (eg. 'search bar') to see the search result dropdown.
 <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
 <br>
 <searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>
-</div>
+</variable>
 </include>
 
 ****Options****