Update user guide with {% raw %} syntax

MarkBind · May 3, 2020 · c05d875 · c05d875
1 parent 54ba3b9
commit c05d875
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 34 deletions.
diff --git a/docs/_markbind/variables.md b/docs/_markbind/variables.md
@@ -1,9 +1,3 @@
-<variable name="showBaseUrlCode">
-<code>{<span></span>{ baseUrl }}</code>
-</variable>
-
-<variable name="showBaseUrlText">{<span></span>{ baseUrl }}</variable>
-
 <variable name="markbind_blue">#00B0F0</variable>
 
 <variable name="icon_arrow_down">:fas-arrow-down:</variable>

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
@@ -99,13 +99,15 @@ As MarkBind uses [VueStrap](https://bootstrap-vue.js.org/docs/components/alert/)
 
 [Nunjucks](https://mozilla.github.io/nunjucks/) is a JavaScript based templating tool. Here is a simple example:
 
-<box><span>
-`<ul>`<br>
-<code>{<span></span>% for item in [1, 2, 3, 4] %<span></span>}</code><br>
-&nbsp;&nbsp;`<li>`<code>Item {<span></span>{ item }}</code>`</li>`<br>
-<code>{<span></span>% endfor %<span></span>}</code><br>
-`</ul>`
-</span></box>
+{% raw %}
+```html { .no-line-numbers }
+<ul>
+{% for item in [1, 2, 3, 4] %}
+  <li>Item {{ item }}</li>
+{% endfor %}
+</ul>
+```
+{% endraw %}
 
 {{ icon_arrow_down }}
 

diff --git a/docs/userGuide/syntax/icons.mbdf b/docs/userGuide/syntax/icons.mbdf
@@ -13,8 +13,9 @@ The advantage of font icons over emojis is font icons can be _styled_ to fit you
 </include>
 
 <box type="important">
-The syntax for icons has changed, and the earlier {<span></span>{ prefix_name }} syntax has been deprecated. <br>
-Please use the new :prefix-name: syntax instead.
+
+The syntax for icons has changed, and the earlier {%raw%}`{{ prefix_name }}`{%endraw%} syntax has been deprecated. <br>
+Please use the new `:prefix-name:` syntax instead.
 </box>
 
 ###### Using Font Awesome Icons

diff --git a/docs/userGuide/syntax/includes.mbdf b/docs/userGuide/syntax/includes.mbdf
@@ -130,10 +130,12 @@ In other words, **`<include>` interprets the reused code relative to the origina
 
 In `article.md`:
 
-<code>
-# {<span></span>{ title }}<br>
-Author: {<span></span>{ author }}
-</code>
+{% raw %}
+```html
+# {{ title }}<br>
+Author: {{ author }}
+```
+{% endraw %}
 </div>
 
 These variables work the same way as variables in `_markbind/variables.md`, except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.

diff --git a/docs/userGuide/syntax/links.mbdf b/docs/userGuide/syntax/links.mbdf
@@ -32,16 +32,19 @@ Links to files of the generated site (e.g., an HTML page or an image file) can b
 
 Absolute paths:
 <div class="indented">
-Links should start with {{ showBaseUrlCode }} (which represents the root directory of the project). 
 
-{{ icon_example }} Here's how to specify a link to (1) a page, and (2) an image, using the {{ showBaseUrlCode }}:
+Links should start with {% raw %}`{{ baseUrl }}`{% endraw %} (which represents the root directory of the project). 
 
-1. <code>Click [here]({{ showBaseUrlCode }}/userGuide/reusingContents.html).</code>
-2. `![](`{{ showBaseUrlCode }}`/images/preview.png)`
+{{ icon_example }} Here's how to specify a link to (1) a page, and (2) an image, using the {% raw %}`{{ baseUrl }}`:
+
+1. `Click [here]({{ baseUrl }}/userGuide/reusingContents.html).`
+2. `![]({{ baseUrl }}/images/preview.png)`
 
 <box type="important">
-To ensure that links in the <code>_markbind/</code> folder work correctly across the entire site, they should be written as absolute paths, prepended with <code><span>{</span>{ baseUrl }}</code>. 
+
+To ensure that links in the <code>_markbind/</code> folder work correctly across the entire site, they should be written as absolute paths, prepended with `{{ baseUrl }}`. 
 </box>
+{% endraw %}
 </div>
 
 Relative paths:

diff --git a/docs/userGuide/syntax/pageLayouts.mbdf b/docs/userGuide/syntax/pageLayouts.mbdf
@@ -1,10 +1,3 @@
-<!---
-TODO: Change to a proper escape tag once PR#1049 is ready. 
--->
-<variable name="mainContentBody">
-<code>{<span></span>{ MAIN_CONTENT_BODY }}</code>
-</variable>
-
 ## Page Layouts
 
 **A _layout_ is a set of page-tweaks that can be applied to a page (or group of pages) in one go.**
@@ -110,7 +103,8 @@ afterSetup(() => {
 In the `page.md` file of your layouts, it should come with the following reserved variable:
 
 <box>
-  {{ mainContentBody }}
+
+  {%raw%}`{{ MAIN_CONTENT_BODY }}`{%endraw%}
 </box>
 
 which injects the actual page content in every page. This allows you to build layouts in different ways.
@@ -124,7 +118,7 @@ which injects the actual page content in every page. This allows you to build la
   ```
 
   ```html {heading="page.md"}
-    {{ mainContentBody }}
+    {%raw%}{{ MAIN_CONTENT_BODY }}{%endraw%}
     <panel header="Statistics Formula for the class" type="primary">
       <img src="path_to_your_formula.png" />
     </panel>

diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md
@@ -200,7 +200,8 @@ removing such potential conflicts.
   - Should return an array of string tag names to be blacklisted, with each tag name being at least 2 characters long.
 
 <box type="important">
-Note however, that variable interpolation syntax <code>{<span>{</span> variable_name <span>}</span>}</code> will act as per normal.
+
+Note however, that variable interpolation syntax {% raw %}`{{ variable_name }}`{% endraw %} will act as per normal.
 Meaning, the user would still be able to use variables in your special tags!
 </box>