diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
index f5263dfb54..e914e0024e 100644
--- a/docs/userGuide/markBindSyntaxOverview.md
+++ b/docs/userGuide/markBindSyntaxOverview.md
@@ -100,6 +100,9 @@ MarkBind has several core Vue.js components built on the popular [BootStrap](htt
 
 [Nunjucks](https://mozilla.github.io/nunjucks/) is a JavaScript based templating tool. Here is a simple example:
 
+%%CODE:%%
+<div class="indented">
+
 {% raw %}
 ```html
 <ul>
@@ -110,15 +113,21 @@ MarkBind has several core Vue.js components built on the popular [BootStrap](htt
 ```
 {% endraw %}
 
-{{ icon_arrow_down }}
+</div>
+
+%%OUTPUT:%%
+<div class="indented">
+
+<box border-left-color="grey" background-color="white">
 
-<box>
 <ul>
 {% for item in [1, 2, 3, 4] %}
   <li>Item {{ item }}</li>
 {% endfor %}
 </ul>
+
 </box>
+</div>
 
 As MarkBind uses Nunjucks behind the scene, **MarkBind is generally compatible with Nunjucks**, which means you can use Nunjucks templating in your source files. Note that ==the code is processed for Nunjucks syntax before the rest of the MarkBind syntax are processed==.