From cb64542a1e6bb72b5b2943b6df3da29a63338acd Mon Sep 17 00:00:00 2001
From: Chan Yu Cheng <e0560244@u.nus.edu>
Date: Sun, 19 Feb 2023 14:34:36 +0800
Subject: [PATCH 1/2] Change format of nunjucks code output be consistent with
 codeAndOutput.md boilerplate

---
 docs/userGuide/markBindSyntaxOverview.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
index f5263dfb54..a365be6d52 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={{ markbind_blue }} 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==.
 

From 479dd7d548217f8a59a6355ac4e430090d93c9dd Mon Sep 17 00:00:00 2001
From: Chan Yu Cheng <e0560244@u.nus.edu>
Date: Sun, 19 Feb 2023 20:24:42 +0800
Subject: [PATCH 2/2] Change color of output to blue

---
 docs/userGuide/markBindSyntaxOverview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
index a365be6d52..e914e0024e 100644
--- a/docs/userGuide/markBindSyntaxOverview.md
+++ b/docs/userGuide/markBindSyntaxOverview.md
@@ -118,7 +118,7 @@ MarkBind has several core Vue.js components built on the popular [BootStrap](htt
 %%OUTPUT:%%
 <div class="indented">
 
-<box border-left-color={{ markbind_blue }} background-color="white">
+<box border-left-color="grey" background-color="white">
 
 <ul>
 {% for item in [1, 2, 3, 4] %}