From ad56a863205114f9c892ff45151c80c3fe11cd1f Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 30 Jan 2023 17:07:02 +0800
Subject: [PATCH 1/9] Update Tips and Tricks documentation for raw / endraw
 tags

---
 docs/userGuide/tipsAndTricks.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 1eda9524bd..fcc1758581 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -34,16 +34,15 @@ For Markdown syntax: To display a literal character that are normally used for M
 
 ##### :fas-lightbulb: Using {% raw %}{% endraw %} to display `{{ content }}`
 
+By default, MarkBind processes any code in the form of `{{ content }}`. 
 
-To display the raw variable interpolation syntax using `{% raw %}{% endraw %}`, you would also need to add
-the `v-pre` attribute using markdown-it-attrs or as a HTML attribute.
+To display the raw variable interpolation syntax in the form of `{{ content }}`, there are two ways to do so. You can either encase the double curly braces as a variable, like `{{ '{{' }}` and `{{ '}}' }}`, or alternatively, you can encase the entire code block with the raw-endraw tags: `{% raw %} {{ content }} {% endraw %}`. If using the raw-endraw tags, you would also need to add the `v-pre` attribute using markdown-it-attrs or as a HTML attribute.
 
 <box type="info">
 
-This isn't necessary for `<code>` elements, markdown code fences and inline code though, which MarkBind automatically
-adds `v-pre` for.
+This isn't necessary for `<code>` elements, markdown code fences and inline code though, which MarkBind automatically adds `v-pre` for.
 
-However, this does not change the need for `{% raw %}{% endraw %}`. Meaning, you can still use variables within your code!
+However, you will still need to use the `{% raw %} {% endraw %}` tags in order to use the variables within your code!
 </box>
 
 

From 03eac1800464ebe163dfeff87aad3b4e57a026ce Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Tue, 31 Jan 2023 12:15:35 +0800
Subject: [PATCH 2/9] Update wording

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

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index fcc1758581..6bb863d8ef 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -42,7 +42,7 @@ To display the raw variable interpolation syntax in the form of `{{ content }}`,
 
 This isn't necessary for `<code>` elements, markdown code fences and inline code though, which MarkBind automatically adds `v-pre` for.
 
-However, you will still need to use the `{% raw %} {% endraw %}` tags in order to use the variables within your code!
+However, `{% raw %} {% endraw %}` tags will still need to be used in order to use the variables within your code!
 </box>
 
 

From 76ac122d5a1a0a8d00df02303e73775ca684c8d0 Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Thu, 2 Feb 2023 11:58:34 +0800
Subject: [PATCH 3/9] Update documentation for nunjucks syntax

---
 docs/userGuide/syntax/mathformulae.md |  5 +----
 docs/userGuide/tipsAndTricks.md       | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/docs/userGuide/syntax/mathformulae.md b/docs/userGuide/syntax/mathformulae.md
index 12cb99ed27..081bd0dd37 100644
--- a/docs/userGuide/syntax/mathformulae.md
+++ b/docs/userGuide/syntax/mathformulae.md
@@ -33,12 +33,9 @@ Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.
 </variable>
 </include>
 
-<box type="info">
-
 Additional delimiters are possible by enabling the [mathDelimiters](../usingPlugins.md#plugin-mathdelimiters) plugin.
-</box>
 
-<box type="important">
+<box type="info">
 
 If your equation requires special Nunjucks tags like {% raw %}`{{`{% endraw %} or {% raw %}`}}`{% endraw %},use a
 [raw-endraw block](https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content):
diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 6bb863d8ef..8e9488ff37 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -34,17 +34,27 @@ For Markdown syntax: To display a literal character that are normally used for M
 
 ##### :fas-lightbulb: Using {% raw %}{% endraw %} to display `{{ content }}`
 
-By default, MarkBind processes any code in the form of `{{ content }}`. 
+By default, MarkBind processes any code in the form of `{{ content }}`. This is because Nunjucks (which is [supported by MarkBind](https://markbind.org/userGuide/markBindSyntaxOverview.html#support-for-nunjucks)) uses this syntax to [evaluate an expression, variable, or function calls](https://mozilla.github.io/nunjucks/templating.html#variables). 
 
-To display the raw variable interpolation syntax in the form of `{{ content }}`, there are two ways to do so. You can either encase the double curly braces as a variable, like `{{ '{{' }}` and `{{ '}}' }}`, or alternatively, you can encase the entire code block with the raw-endraw tags: `{% raw %} {{ content }} {% endraw %}`. If using the raw-endraw tags, you would also need to add the `v-pre` attribute using markdown-it-attrs or as a HTML attribute.
+In general, to use this syntax as a raw string in a code block or a template, there are [two methods](https://jinja.palletsprojects.com/en/3.0.x/templates/#escaping) available. The syntax can either be encased as a variable like `{{ '{{' }}` and `{{ '}}' }}`, or alternatively, the entire code block can be encased with the raw-endraw tags: `{% raw %} {{ content }} {% endraw %}`. 
 
 <box type="info">
 
-This isn't necessary for `<code>` elements, markdown code fences and inline code though, which MarkBind automatically adds `v-pre` for.
+If using raw-endraw tags on html content, you would also need to add the `v-pre` attribute as an HTML attribute, like this:
 
-However, `{% raw %} {% endraw %}` tags will still need to be used in order to use the variables within your code!
-</box>
+```
+{% raw %}
+
+<p v-pre>{{ content }}</p>
+
+{% endraw %}
+```
+
+Otherwise, the content will not be displayed. 
 
+This isn't necessary for `<code>` elements, markdown code fences and inline code though, as MarkBind automatically adds `v-pre` for them.
+
+</box>
 
 {% endraw %}
 

From fb0b23c7007c6270d78fe6ad391ffc3a222ca048 Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 12:54:02 +0800
Subject: [PATCH 4/9] Update documentation

---
 docs/userGuide/syntax/code.md   | 9 +++++++++
 docs/userGuide/tipsAndTricks.md | 8 +++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
index a7a9ca6eab..05f4034618 100644
--- a/docs/userGuide/syntax/code.md
+++ b/docs/userGuide/syntax/code.md
@@ -228,6 +228,15 @@ or the java code `public static void main(String[] args)`{.java}.
 </variable>
 </include>
 
+##### Displaying `{{ content }}`
+
+If your equation requires special Nunjucks tags like {% raw %}`{{`{% endraw %} or {% raw %}`}}`{% endraw %},use a
+[raw-endraw block](https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content):
+
+```markdown
+{% raw %}{% raw %} {{ content }} {% endraw %}{% endraw %}
+```
+
 <div id="short" class="d-none">
 
 ````
diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 8e9488ff37..29a893f8c9 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -34,7 +34,13 @@ For Markdown syntax: To display a literal character that are normally used for M
 
 ##### :fas-lightbulb: Using {% raw %}{% endraw %} to display `{{ content }}`
 
-By default, MarkBind processes any code in the form of `{{ content }}`. This is because Nunjucks (which is [supported by MarkBind](https://markbind.org/userGuide/markBindSyntaxOverview.html#support-for-nunjucks)) uses this syntax to [evaluate an expression, variable, or function calls](https://mozilla.github.io/nunjucks/templating.html#variables). 
+By default, MarkBind processes any code in the form of `{{ content }}`. This is because Nunjucks (which is [supported by MarkBind](https://markbind.org/userGuide/markBindSyntaxOverview.html#support-for-nunjucks)) uses this syntax to [evaluate an expression, variable, or function calls](https://mozilla.github.io/nunjucks/templating.html#variables). For instance:
+
+```
+{{ username }}
+```
+
+This will not display `{{ username }}` as a raw string, but instead, look up the variable `username` from the context and display its value.
 
 In general, to use this syntax as a raw string in a code block or a template, there are [two methods](https://jinja.palletsprojects.com/en/3.0.x/templates/#escaping) available. The syntax can either be encased as a variable like `{{ '{{' }}` and `{{ '}}' }}`, or alternatively, the entire code block can be encased with the raw-endraw tags: `{% raw %} {{ content }} {% endraw %}`. 
 

From 43201489c0634fda2fd586a40cafa3b3363f4270 Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 15:45:07 +0800
Subject: [PATCH 5/9] Update documentation

---
 docs/userGuide/syntax/code.md         | 10 ++++++----
 docs/userGuide/syntax/mathformulae.md |  2 +-
 docs/userGuide/tipsAndTricks.md       |  4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
index 05f4034618..6496f52c93 100644
--- a/docs/userGuide/syntax/code.md
+++ b/docs/userGuide/syntax/code.md
@@ -228,14 +228,16 @@ or the java code `public static void main(String[] args)`{.java}.
 </variable>
 </include>
 
-##### Displaying `{{ content }}`
+{% raw %}
 
-If your equation requires special Nunjucks tags like {% raw %}`{{`{% endraw %} or {% raw %}`}}`{% endraw %},use a
-[raw-endraw block](https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content):
+##### Displaying content within curly braces: `{{ content }}`
+
+If your code contains special Nunjucks tags like `{{` or `}}`,use a [raw-endraw block](../tipsAndTricks.html#using-raw-endraw-to-display-content):
 
 ```markdown
-{% raw %}{% raw %} {{ content }} {% endraw %}{% endraw %}
+{% raw %} {{ content }} {% endraw %}
 ```
+{% endraw %}
 
 <div id="short" class="d-none">
 
diff --git a/docs/userGuide/syntax/mathformulae.md b/docs/userGuide/syntax/mathformulae.md
index 081bd0dd37..e7421120c8 100644
--- a/docs/userGuide/syntax/mathformulae.md
+++ b/docs/userGuide/syntax/mathformulae.md
@@ -38,7 +38,7 @@ Additional delimiters are possible by enabling the [mathDelimiters](../usingPlug
 <box type="info">
 
 If your equation requires special Nunjucks tags like {% raw %}`{{`{% endraw %} or {% raw %}`}}`{% endraw %},use a
-[raw-endraw block](https://markbind.org/userGuide/tipsAndTricks.html#using-raw-endraw-to-display-content):
+[raw-endraw block](../tipsAndTricks.html#using-raw-endraw-to-display-content):
 
 ```markdown
 {% raw %}{% raw %}\(e^{{\frac{1}{3}} + 1}\){% endraw %}{% endraw %}
diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 29a893f8c9..876dd591b9 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -34,7 +34,7 @@ For Markdown syntax: To display a literal character that are normally used for M
 
 ##### :fas-lightbulb: Using {% raw %}{% endraw %} to display `{{ content }}`
 
-By default, MarkBind processes any code in the form of `{{ content }}`. This is because Nunjucks (which is [supported by MarkBind](https://markbind.org/userGuide/markBindSyntaxOverview.html#support-for-nunjucks)) uses this syntax to [evaluate an expression, variable, or function calls](https://mozilla.github.io/nunjucks/templating.html#variables). For instance:
+By default, MarkBind processes any code in the form of `{{ content }}`. This is because Nunjucks (which is [supported by MarkBind](markBindSyntaxOverview.html#support-for-nunjucks)) uses this syntax to [evaluate an expression, variable, or function calls](https://mozilla.github.io/nunjucks/templating.html#variables). For instance:
 
 ```
 {{ username }}
@@ -46,7 +46,7 @@ In general, to use this syntax as a raw string in a code block or a template, th
 
 <box type="info">
 
-If using raw-endraw tags on html content, you would also need to add the `v-pre` attribute as an HTML attribute, like this:
+If using raw-endraw tags on HTML content, you would also need to add the `v-pre` attribute as an HTML attribute, like this:
 
 ```
 {% raw %}

From f5a6772a019b07a60cc8ea4a83033d3fcac37f5a Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 15:56:36 +0800
Subject: [PATCH 6/9] Update documentation

---
 docs/userGuide/tipsAndTricks.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 876dd591b9..b6b074a15e 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -46,7 +46,7 @@ In general, to use this syntax as a raw string in a code block or a template, th
 
 <box type="info">
 
-If using raw-endraw tags on HTML content, you would also need to add the `v-pre` attribute as an HTML attribute, like this:
+If using raw-endraw tags on an HTML element, you would also need to add the `v-pre` attribute to the HTML tag, like this:
 
 ```
 {% raw %}
@@ -56,7 +56,7 @@ If using raw-endraw tags on HTML content, you would also need to add the `v-pre`
 {% endraw %}
 ```
 
-Otherwise, the content will not be displayed. 
+Otherwise, the HTML content containing double curly braces will be processed as a variable and will not be displayed properly.
 
 This isn't necessary for `<code>` elements, markdown code fences and inline code though, as MarkBind automatically adds `v-pre` for them.
 

From 0b0701af78d7a1071712a97fa26c0c3803d50867 Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 20:03:12 +0800
Subject: [PATCH 7/9] Update documentation for markdown-it-attrs and minor
 changes

---
 docs/userGuide/syntax/code.md         |  2 +-
 docs/userGuide/syntax/mathformulae.md | 12 ++++++++++--
 docs/userGuide/tipsAndTricks.md       | 22 ++++++++++++++++++----
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
index 6496f52c93..b7ee723991 100644
--- a/docs/userGuide/syntax/code.md
+++ b/docs/userGuide/syntax/code.md
@@ -232,7 +232,7 @@ or the java code `public static void main(String[] args)`{.java}.
 
 ##### Displaying content within curly braces: `{{ content }}`
 
-If your code contains special Nunjucks tags like `{{` or `}}`,use a [raw-endraw block](../tipsAndTricks.html#using-raw-endraw-to-display-content):
+If your code contains special Nunjucks tags like `{{` or `}}`, use a [raw-endraw block](../tipsAndTricks.html#using-raw-endraw-to-display-content):
 
 ```markdown
 {% raw %} {{ content }} {% endraw %}
diff --git a/docs/userGuide/syntax/mathformulae.md b/docs/userGuide/syntax/mathformulae.md
index e7421120c8..51d914e08f 100644
--- a/docs/userGuide/syntax/mathformulae.md
+++ b/docs/userGuide/syntax/mathformulae.md
@@ -37,13 +37,21 @@ Additional delimiters are possible by enabling the [mathDelimiters](../usingPlug
 
 <box type="info">
 
-If your equation requires special Nunjucks tags like {% raw %}`{{`{% endraw %} or {% raw %}`}}`{% endraw %},use a
+{% raw %}
+
+If your equation requires special Nunjucks tags like `{{` or `}}`, use a
 [raw-endraw block](../tipsAndTricks.html#using-raw-endraw-to-display-content):
 
 ```markdown
-{% raw %}{% raw %}\(e^{{\frac{1}{3}} + 1}\){% endraw %}{% endraw %}
+{% raw %}
+
+\(e^{{\frac{1}{3}} + 1}\)
+
+{% endraw %}
 ```
 
+{% endraw %}
+
 </box>
 
 <small>More info on allowed symbols: https://katex.org/docs/support_table.html</small>
diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index b6b074a15e..22e8bebf26 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -46,19 +46,33 @@ In general, to use this syntax as a raw string in a code block or a template, th
 
 <box type="info">
 
-If using raw-endraw tags on an HTML element, you would also need to add the `v-pre` attribute to the HTML tag, like this:
+If using raw-endraw tags outside `<code>` elements, markdown code fences, or inline code, you also need to add the `v-pre` attribute. 
+
+For HTML elements, the `v-pre` attribute needs to be declared as part of the HTML tag:
+
+```
+{% raw %}
+
+<div v-pre>
+  <p>{{ content }}</p>
+</div>
+
+{% endraw %}
+```
+
+For Markdown elements, the `v-pre` attribute needs to be declared using [`markdown-it-attrs`](https://www.npmjs.com/package/markdown-it-attrs#Examples), which allows classes, identifiers, and attributed to be added to Markdown syntax:
 
 ```
 {% raw %}
 
-<p v-pre>{{ content }}</p>
+# Header with {{ content }} {v-pre}
 
 {% endraw %}
 ```
 
-Otherwise, the HTML content containing double curly braces will be processed as a variable and will not be displayed properly.
+Otherwise, any HTML or Markdown content containing double curly braces will be processed as a variable and will not be displayed properly.
 
-This isn't necessary for `<code>` elements, markdown code fences and inline code though, as MarkBind automatically adds `v-pre` for them.
+Note: This step isn't necessary for `<code>` elements, markdown code fences and inline code because MarkBind automatically adds `v-pre` for them.
 
 </box>
 

From b339bc8c8262ca50321cb1a13b0e999b5194442c Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 21:29:09 +0800
Subject: [PATCH 8/9] Update link for markdown-it-attrs

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

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 22e8bebf26..8f35160c13 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -60,7 +60,7 @@ For HTML elements, the `v-pre` attribute needs to be declared as part of the HTM
 {% endraw %}
 ```
 
-For Markdown elements, the `v-pre` attribute needs to be declared using [`markdown-it-attrs`](https://www.npmjs.com/package/markdown-it-attrs#Examples), which allows classes, identifiers, and attributed to be added to Markdown syntax:
+For Markdown elements, the `v-pre` attribute needs to be declared using [`markdown-it-attrs`](syntax/attributes.html#classes-attributes-and-amp-identifiers), which allows classes, identifiers, and attributed to be added to Markdown syntax:
 
 ```
 {% raw %}

From 1ada4f384a5d865f2423b970f58c8334ccc7a003 Mon Sep 17 00:00:00 2001
From: lhw-1 <leehyungwoonsamuel@gmail.com>
Date: Mon, 6 Feb 2023 22:41:24 +0800
Subject: [PATCH 9/9] Fix broken link

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

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index 8f35160c13..f0e41b0a6b 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -60,7 +60,7 @@ For HTML elements, the `v-pre` attribute needs to be declared as part of the HTM
 {% endraw %}
 ```
 
-For Markdown elements, the `v-pre` attribute needs to be declared using [`markdown-it-attrs`](syntax/attributes.html#classes-attributes-and-amp-identifiers), which allows classes, identifiers, and attributed to be added to Markdown syntax:
+For Markdown elements, the `v-pre` attribute needs to be declared using [`markdown-it-attrs`](formattingcontents.html#classes-attributes-and-amp-identifiers), which allows classes, identifiers, and attributed to be added to Markdown syntax:
 
 ```
 {% raw %}