diff --git a/docs/_markbind/boilerplates/codeAndOutput.md b/docs/_markbind/boilerplates/codeAndOutput.md
index c0e165e0ac..6aa38cbc93 100644
--- a/docs/_markbind/boilerplates/codeAndOutput.md
+++ b/docs/_markbind/boilerplates/codeAndOutput.md
@@ -1,10 +1,12 @@
 <!-- This boilerplate shows MarkBind code and the rendered output of that code -->
-<!-- Supports 3 variables. -->
+<!-- Supports 4 variables. -->
 <!-- `code` - The MarkBind code content in this variable will appear in a code block containing the code, -->
 <!--          and as rendered output of the code. The code cannot start or end with empty lines due to `trim` -->
 <!-- `highlightStyle` (optional) - Defines the syntax coloring for the code block-->
 <!-- `heading` (optional) - Heading of the code block-->
+<!-- `horizontal` (optional) - If the code and output is horizontally laid out. A non-empty input will result in a horizontal layout-->
 
+{% macro codeBox() %}
 %%CODE:%%
 <div class="indented">
 
@@ -12,7 +14,9 @@
 {{ code | safe | trim }}
 ```
 </div>
+{% endmacro %}
 
+{% macro outputBox() %}
 %%OUTPUT:%%
 <div class="indented">
 
@@ -21,3 +25,28 @@
 {{ code | safe }}
 </box>
 </div>
+{% endmacro %}
+
+{% if horizontal != null %}
+<div style="overflow-x: auto">
+<table style="width: 100%">
+<tbody>
+<tr>
+<td style="width: 50%">
+{{ codeBox() }}
+</td>
+<td style="width: 50%">
+{{ outputBox() }}
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+{% else %}
+
+{{ codeBox() }}
+
+{{ outputBox() }}
+
+{% endif %}
diff --git a/docs/_markbind/boilerplates/codeAndOutputCode.md b/docs/_markbind/boilerplates/codeAndOutputCode.md
index 46b2140af2..d8457b298e 100644
--- a/docs/_markbind/boilerplates/codeAndOutputCode.md
+++ b/docs/_markbind/boilerplates/codeAndOutputCode.md
@@ -1,10 +1,12 @@
-<!-- This boilerplate is simimlar to codeAndOuput.md but specific for fenced code syntax. -->
+<!-- This boilerplate is similar to codeAndOutput.md but specific for fenced code syntax. -->
 <!-- We need 4 backticks to make a fenced code block of fenced code block code -->
 <!-- Syntax coloring is fixed to Markdown because it is Markdown fenced code syntax -->
-<!-- Has 1 variable. -->
+<!-- Has 2 variables. -->
 <!-- `code` - The MarkBind code content in this variable will appear in a code block containing the code, -->
 <!--          and as rendered output of the code. The code cannot start or end with empty lines due to `trim` -->
+<!-- `horizontal` (optional) - If the code and output is horizontally laid out. A non-empty input will result in a horizontal layout-->
 
+{% macro codeBox() %}
 %%CODE:%%
 <div class="indented">
 
@@ -12,7 +14,9 @@
 {{ code | safe | trim }}
 ````
 </div>
+{% endmacro %}
 
+{% macro outputBox() %}
 %%OUTPUT:%%
 <div class="indented">
 
@@ -21,3 +25,28 @@
 {{ code | safe }}
 </box>
 </div>
+{% endmacro %}
+
+{% if horizontal != null %}
+<div style="overflow-x: auto">
+<table style="width: 100%">
+<tbody>
+<tr>
+<td style="width: 50%">
+{{ codeBox() }}
+</td>
+<td style="width: 50%">
+{{ outputBox() }}
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+{% else %}
+
+{{ codeBox() }}
+
+{{ outputBox() }}
+
+{% endif %}
diff --git a/docs/_markbind/boilerplates/codeAndOutputSeparate.md b/docs/_markbind/boilerplates/codeAndOutputSeparate.md
index 3e31b0686b..71bf2a742e 100644
--- a/docs/_markbind/boilerplates/codeAndOutputSeparate.md
+++ b/docs/_markbind/boilerplates/codeAndOutputSeparate.md
@@ -1,10 +1,12 @@
 <!-- This boilerplate shows MarkBind code and the rendered output of that code -->
-<!-- Supports 4 variables. -->
+<!-- Supports 5 variables. -->
 <!-- `code` - The MarkBind code content in this variable will appear in a code block containing the code, -->
 <!-- `output` - rendered output in the output box. -->
 <!-- `highlightStyle` (optional) - Defines the syntax coloring for the code block-->
 <!-- `heading` (optional) - Heading of the code block-->
+<!-- `horizontal` (optional) - If the code and output is horizontally laid out. A non-empty input of `horizontal` will result in a horizontal layout-->
 
+{% macro codeBox() %}
 %%CODE:%%
 <div class="indented">
 
@@ -12,7 +14,9 @@
 {{ code | safe | trim }}
 ```
 </div>
+{% endmacro %}
 
+{% macro outputBox() %}
 %%OUTPUT:%%
 <div class="indented">
 
@@ -21,3 +25,28 @@
 {{ output | safe }}
 </box>
 </div>
+{% endmacro %}
+
+{% if horizontal != null %}
+<div style="overflow-x: auto">
+<table style="width: 100%">
+<tbody>
+<tr>
+<td style="width: 50%">
+{{ codeBox() }}
+</td>
+<td style="width: 50%">
+{{ outputBox() }}
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+{% else %}
+
+{{ codeBox() }}
+
+{{ outputBox() }}
+
+{% endif %}
diff --git a/docs/index.md b/docs/index.md
index cb528866ad..75f8f5d4ba 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,61 +31,27 @@ MarkBind extensions to Markdown | `==highlighted text==`<br>`%%grey text%%`<br>`
 <panel type="seamless" header="%%More examples of generating static content%%" >
 
 An example that uses GFMD syntax for task lists:
-<div style="overflow-x: auto">
 
-<table>
-<tr>
-  <td style="padding-top: 15px">
-
-```markdown
+<include src="codeAndOutput.md" boilerplate>
+<variable name="highlightStyle">markdown</variable>
+<variable name="horizontal" />
+<variable name="code">
 **Things to do:**
-
 - [x] Finish my changes
 - [ ] Push my commits to GitHub
 - [ ] Open a pull request
+</variable>
+</include>
 
-```
-  </td>
-  <td>&nbsp;→&nbsp;</td>
-  <td>
-<box>
-
-**Things to do:**
-
-- [x] Finish my changes
-- [ ] Push my commits to GitHub
-- [ ] Open a pull request
-
-</box>
-  </td>
-</tr>
-</table>
-
-</div>
 
 An example that uses KaTeX to generate math equations:
 
-<div style="overflow-x: auto">
-
-<table>
-<tr>
-  <td style="padding-top: 20px">
-
-```markdown
-Euler's Identity \(e^{i\pi}+1=0\) is a beautiful formula.
-```
-  </td>
-  <td>&nbsp;→&nbsp;</td>
-  <td>
-<box>
-
+<include src="codeAndOutput.md" boilerplate>
+<variable name="highlightStyle">markdown</variable>
+<variable name="code">
 Euler's Identity \(e^{i\pi}+1=0\) is a beautiful formula.
-
-</box>
-  </td>
-</tr>
-</table>
-</div>
+</variable>
+</include>
 
 </panel>
 <p/>