MarkBind · yamgent · Feb 18, 2019 · Jan 27, 2019 · Jan 27, 2019 · Feb 8, 2019
diff --git a/docs/_markbind/variables.md b/docs/_markbind/variables.md
@@ -6,15 +6,15 @@
 
 <span id="markbind_blue">#00B0F0</span>
 
-<span id="icon_arrow_down">{{ fas_arrow_down | safe }}</span>
-<span id="icon_arrow_right">{{ fas_arrow_right | safe }}</span>
-<span id="icon_check_blue"><font color="{{ markbind_blue }}"> {{ fas_check_circle | safe}}</font></span>
-<span id="icon_bulb_blue"><font color="{{ markbind_blue }}"> {{ fas_lightbulb | safe}}</font></span>
-<span id="icon_dislike">{{ fas_thumbs_down | safe }}</span>
+<span id="icon_arrow_down">:fas-arrow-down:</span>
+<span id="icon_arrow_right">:fas-arrow-right:</span>
+<span id="icon_check_blue"><font color="{{ markbind_blue }}">:fas-check-circle:</font></span>
+<span id="icon_bulb_blue"><font color="{{ markbind_blue }}">:fas-lightbulb:</font></span>
+<span id="icon_dislike">:fas-thumbs-down:</span>
 <span id="icon_example"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Example:</span></big></span>
 <span id="icon_examples"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Examples:</span></big></span>
-<span id="icon_info">{{ fas_info_circle | safe }}</span>
-<span id="icon_ticked">{{ far_check_square | safe }}</span>
+<span id="icon_info">:fas-info-circle:</span>
+<span id="icon_ticked">:far-check-square:</span>
 
 <span id="link_live_preview">[live preview]({{ baseUrl }}/userGuide/glossary.html#live-preview)</span>
 

diff --git a/docs/about.md b/docs/about.md
@@ -24,8 +24,8 @@ The **project team**:
 * [**Rachael Sim Hwee Ling**](https://github.com/rachx): _Project Member_ since Jan 2018
 * [**Tan Wang Leng**](https://github.com/yamgent): Current _Team Lead_ since Jul 2018, _Project Member_ for May 2018 - Jun 2018
 
-<span class="glyphicon glyphicon-send" aria-hidden="true"></span> You can **email us** at `seer` at `comp.nus.edu.sg`
+:glyphicon-send: You can **email us** at `seer` at `comp.nus.edu.sg`
 
-<span class="glyphicon glyphicon-console" aria-hidden="true"></span> Interested in **contributing to MarkBind**? Visit the [MarkBind project on GitHub](https://github.com/MarkBind/markbind).
+:glyphicon-console: Interested in **contributing to MarkBind**? Visit the [MarkBind project on GitHub](https://github.com/MarkBind/markbind).
 
 </div>
diff --git a/docs/index.md b/docs/index.md
@@ -103,7 +103,7 @@ In the example below, there are expandable panels that are nested within each ot
 
 <box>
 
-<panel header="{{ far_list_alt }} Exercises" no-close >
+<panel header=":far-list-alt: Exercises" no-close >
 
   <panel type="danger" header=":exclamation: [Compulsory] Ex 1" no-close >
 
@@ -133,9 +133,9 @@ MarkBind is **highly optimized for creating text-heavy websites** %%e.g., eLearn
 Here are some examples:
 <div class="indented">
 
-<big>{{ fas_heart }}</big> **Icons** can improve the readability of a text-heavy document. MarkBind comes with a wide selection of [icons]({{ baseUrl }}/userGuide/markBindSyntax.html#icons-fonts) and [emoji]({{ baseUrl }}/userGuide/markBindSyntax.html#emoji).<br>
-<big>{{ fas_search }}</big> With MarkBind's [**search feature**]({{ baseUrl }}/userGuide/makingTheSiteSearchable.html), you can allow readers to search for keywords in your site.<br>
-<big>{{ fas_window_maximize }}</big> MarkBind allows you to add [**site/page navigation menus, headers, footers**]({{ baseUrl }}/userGuide/tweakingThePageStructure.html) easily.
+<big>:fas-heart:</big> **Icons** can improve the readability of a text-heavy document. MarkBind comes with a wide selection of [icons]({{ baseUrl }}/userGuide/markBindSyntax.html#icons-fonts) and [emoji]({{ baseUrl }}/userGuide/markBindSyntax.html#emoji).<br>
+<big>:fas-search:</big> With MarkBind's [**search feature**]({{ baseUrl }}/userGuide/makingTheSiteSearchable.html), you can allow readers to search for keywords in your site.<br>
+<big>:fas-window-maximize:</big> MarkBind allows you to add [**site/page navigation menus, headers, footers**]({{ baseUrl }}/userGuide/tweakingThePageStructure.html) easily.
 </div>
 
 <hr><!-- ======================================================================================================= -->

diff --git a/docs/userGuide/syntax/icons.mbdf b/docs/userGuide/syntax/icons.mbdf
@@ -8,38 +8,40 @@ MarkBind supports using Font Icons provided by Font Awesome and Glyphicons.
 <span id="tip_body">
 The advantage of font icons over emojis is font icons can be _styled_ to fit your needs. e.g.,
 * emoji: <font color="purple">Don't judge the :book: by it's cover! :-1:</font>
-* font icons: <font color="purple">Don't judge the {{ fas_book }} by it's cover! {{ icon_dislike }}</font>
+* font icons: <font color="purple">Don't judge the :fas-book: by it's cover! :fas-thumbs-down:</font>
 </span>
 </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.
+</box>
 
 ###### Using Font Awesome Icons
 1. Decide which icon you want to use from the [list of available icons](https://fontawesome.com/icons?d=gallery&m=free).
-1. Construct the MarkBind name for the selected icon by replacing the hyphens (`-`) in the actual name with underscores ( `_` ) and adding the _type prefix_.
+1. Construct the MarkBind name for the selected icon by adding the _type prefix_.
    Note: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:
-   * _Solid_ (prefix: `fas_`) e.g., {{ fas_file_code }} (actual name `file-code`, MarkBind name **`fas_`**`file_code`)
-   * _Regular_ (prefix: `far_`) e.g., {{ far_file_code }} (actual name `file-code`, MarkBind name **`far_`**`file_code`)
-   * _Brands_ (prefix: `fab_`): e.g., {{ fab_github_alt }} (actual name `github-alt`, MarkBind name **`fab_`**`github_alt`)
+   * _Solid_ (prefix: `fas-`) e.g., :fas-file-code: (actual name `file-code`, MarkBind name **`fas-`**`file-code`)
+   * _Regular_ (prefix: `far-`) e.g., :fas-file-code: (actual name `file-code`, MarkBind name **`far-`**`file-code`)
+   * _Brands_ (prefix: `fab-`): e.g., :fab-github-alt: (actual name `github-alt`, MarkBind name **`fab-`**`github-alt`)
 
-1. Insert MarkBind name for the icon enclosed within double curly braces to get the icon in your page.<br>
-  `Create a **branch**`<code> {<span></span>{fas_code_branch}} now!</code> → Create a **branch** {{ fas_code_branch }} now!
+1. Insert MarkBind name for the icon enclosed within colons to get the icon in your page.<br>
+  `Create a **branch**`<code>:<span></span>fas-code-branch: now!</code> → Create a **branch** :fas-code-branch: now!
 
 
 ###### Using Glyphicons
 
 1. Decide which icon you want to use from [list of provided glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons).
-1. Construct the MarkBind name for the selected icon by replacing the hyphens (`-`) in the actual name with underscores ( `_` ).<br>
-   e.g., {{ glyphicon_home }} (actual name `glyphicon-home`, MarkBind name `glyphicon_home`)
-1. Insert MarkBind name for the icon enclosed within double curly braces to get the icon in your page.<br>
-  `Move to the right!`<code> {<span></span>{glyphicon_hand_right}}</code> → Move to the right! {{ glyphicon_hand_right }}
+1. Insert the name for the icon enclosed within colons to get the icon in your page.<br>
+  `Move to the right!`<code>:<span></span>glyphicon-hand-right:</code> → Move to the right! :glyphicon-hand-right:
 
 <span id="short" class="d-none">
 
-<code>{<span></span>{glyphicon_hand_right}}</code> <code>{<span></span>{fab_github}}</code> <code>{<span></span>{fas_home}}</code>
+<code>:<span></span>glyphicon-hand-right:</code> <code>:<span></span>fab-github:</code> <code>:<span></span>fas-home:</code>
 
 </span>
 
 <span id="examples" class="d-none">
 
-{{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }} %%{{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }}%% <font color="red">{{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }}</font>
+:glyphicon-hand-right: :fab-github: :fas-home: %%:glyphicon-hand-right: :fab-github: :fas-home:%% <font color="red">:glyphicon-hand-right: :fab-github: :fas-home:</font>
 </span>
diff --git a/docs/userGuide/syntax/variables.mbdf b/docs/userGuide/syntax/variables.mbdf
@@ -59,6 +59,7 @@ Represents the root directory of the project. Used for specifying intra-site lin
 <code>{<span></span>{ timestamp }}</code> is the time stamp (in UTC) that indicates when the page was generated.
 
 <div class="indented">
+
 {{ icon_example }} <code>Page generated at: {<span></span>{ timestamp }}</code> {{ icon_arrow_right }} Page generated at: {{ timestamp }}
 </div>
 
@@ -70,7 +71,8 @@ Represents the root directory of the project. Used for specifying intra-site lin
 <code>{<span></span>{MarkBind}}</code> represents a code snippet that specifies the MarkBind version in use and is linked to the MarkBind website.
 
 <div class="indented">
-{{ icon_example }} <code>Page generated by: {<span></span>{ MarkBind }}</code> {{ icon_arrow_right }} Page generated by: {{ MarkBind }}
+
+{{ icon_example }} <code>Page generated by: {<span></span>{ MarkBind }}</code>  {{ icon_arrow_right }} Page generated by: {{ MarkBind }}
 </div>
 
 <p/>
@@ -109,10 +111,10 @@ Note: These variables will also be applied to [`<include>` files]({{ baseUrl }}/
 <div class="indented">
 
 {{ icon_example }} This variable uses a built-in variable:<br>
-<code>\<span id="right_hand">{<span></span>{ glyphicon_hand_right }}\</span></code>
+<code>\<span id="time">{<span></span>{ timestamp }}\</span></code>
 
 Here, the second variable will be assigned the contents of the first variable.<br>
-<code>\<span id="first">These is the first variable.\</span></code><br>
+<code>\<span id="first">This is the first variable.\</span></code><br>
 <code>\<span id="second">{<span></span>{ first }}\</span></code><br>
 
 This will not work, as the `fourth` variable is declared _below_ the line that refers to it.<br>
@@ -126,12 +128,13 @@ Note that if the variable being referenced contains HTML tags, MarkBind may esca
 
 {{ icon_example }} If we declare the variables as follows,<br>
 
-<code>\<span id="right_hand">{<span></span>{ glyphicon_hand_right }}\</span></code><br>
-<code>\<span id="right_hand_2">{<span></span>{ right_hand }}\</span></code>
+<code>\<span id="note">\<span style="color: blue">Note: \</span>\</span></code><br>
+<code>\<span id="note_2">{<span></span>{ note }}\</span></code><br>
+<code>\<span id="const_note">{<span></span>{ note_2 }} This is a constant.\</span></code>
 
 the result will be,<br>
 
-<code>{<span></span>{ right_hand_2 }}</code> {{ icon_arrow_right }} \<span class='glyphicon glyphicon-hand-right' aria-hidden='true'></span>
+<code>{<span></span>{ const_note }}</code> :fas-arrow-right: \<span style="color: blue">Note: \</span> This is a constant.
 </div>
 
 You must use the `safe` filter when using such variables:
@@ -140,10 +143,11 @@ You must use the `safe` filter when using such variables:
 
 {{ icon_example }} If we use the safe filter for the second variable:<br>
 
-<code>\<span id="right_hand">{<span></span>{ glyphicon_hand_right }}\</span></code><br>
-<code>\<span id="right_hand_2">{<span></span>{ right_hand | safe }}\</span></code>
+<code>\<span id="note">\<span style="color: blue">Note: \</span>\</span></code><br>
+<code>\<span id="note_2">{<span></span>{ note | safe }}\</span></code><br>
+<code>\<span id="const_note">{<span></span>{ note_2 }} This is a constant.\</span></code>
 
-<code>{<span></span>{ right_hand_2 }}</code> {{ icon_arrow_right }} {{glyphicon_hand_right}}
+<code>{<span></span>{ const_note }}</code> :fas-arrow-right: <span style="color: blue">Note: </span> This is a constant.
 </div>
 
 <span id="short" class="d-none">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "markdown-it-ins": "^2.0.0",
     "markdown-it-linkify-images": "^1.1.0",
     "markdown-it-mark": "^2.0.0",
+    "markdown-it-regexp": "^0.4.0",
     "markdown-it-table-of-contents": "^0.3.2",
     "markdown-it-task-lists": "^1.4.1",
     "markdown-it-video": "^0.4.0",

diff --git a/src/Site.js b/src/Site.js
@@ -84,8 +84,7 @@ const SITE_CONFIG_DEFAULT = {
 
 const FOOTER_DEFAULT = '<footer>\n'
   + '  <div class="text-center">\n'
-  + '    This is a dynamic height footer that supports variables {{glyphicon_tags}} '
-  + 'and markdown <md>:smile:</md>!\n'
+  + '    This is a dynamic height footer that supports markdown <md>:smile:</md>!\n'
   + '  </div>\n'
   + '  <!-- Support MarkBind by including a link to us on your landing page! -->\n'
   + '  <div class="text-center">\n'
@@ -102,7 +101,7 @@ const INDEX_MARKDOWN_DEFAULT = '<frontmatter>\n'
   + 'Welcome to your page generated with MarkBind.\n';
 
 const SITE_NAV_DEFAULT = '<navigation>\n'
-  + '* [Home {{glyphicon_home}}]({{baseUrl}}/index.html)\n'
+  + '* [Home :glyphicon-home:]({{baseUrl}}/index.html)\n'
   + '</navigation>\n';
 
 const LAYOUT_SCRIPTS_DEFAULT = 'MarkBind.afterSetup(() => {\n'

diff --git a/src/lib/markbind/package-lock.json b/src/lib/markbind/package-lock.json
diff --git a/src/lib/markbind/package.json b/src/lib/markbind/package.json
@@ -27,6 +27,7 @@
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-ins": "^2.0.0",
     "markdown-it-mark": "^2.0.0",
+    "markdown-it-regexp": "^0.4.0",
     "markdown-it-table-of-contents": "^0.3.2",
     "markdown-it-task-lists": "^1.4.1",
     "markdown-it-video": "^0.4.0",

diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js
@@ -28,7 +28,8 @@ markdownIt.use(require('markdown-it-mark'))
   .use(require('markdown-it-attrs'))
   .use(require('./markdown-it-dimmed'))
   .use(require('./markdown-it-radio-button'))
-  .use(require('./markdown-it-block-embed'));
+  .use(require('./markdown-it-block-embed'))
+  .use(require('./markdown-it-icons'));
 
 // fix link
 markdownIt.normalizeLink = require('./normalizeLink');

diff --git a/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js
@@ -0,0 +1,13 @@
+module.exports = require('markdown-it-regexp')(
+    /:(fa[brs]|glyphicon)-([a-z-]+):/m,
+    (match, utils) => {
+        let iconFontType = match[1];
+        let iconFontName = match[2];
+
+        if (iconFontType === 'glyphicon') {
+            return `<span aria-hidden="true" class="glyphicon glyphicon-${iconFontName}"></span>`;
+        } else { // If icon is a Font Awesome icon
+            return `<span aria-hidden="true" class="${iconFontType} fa-${iconFontName}"></span>`;
+        }
+    }
+);
diff --git a/test/functional/test_site/_markbind/footers/footer.md b/test/functional/test_site/_markbind/footers/footer.md
@@ -2,6 +2,6 @@
 
 # Heading in footer should not be indexed
   <div class="text-center">
-    This is a dynamic height footer that supports variables {{glyphicon_tags}} and markdown <md>:smile:</md>!
+    This is a dynamic height footer that supports markdown <md>:smile:</md>!
   </div>
 </footer>
diff --git a/test/functional/test_site/_markbind/navigation/site-nav.md b/test/functional/test_site/_markbind/navigation/site-nav.md
@@ -3,16 +3,16 @@
 * [Home :house:]({{baseUrl}}/index.html)
 * [Open Bugs :bug:]({{baseUrl}}/bugs/index.html)
 * ### Testing Site-Nav
-* **Dropdown :expanded:** {{glyphicon_search}} title :pencil2: <!-- Nested list items will be placed inside a Dropdown menu -->
+* **Dropdown :expanded:** :glyphicon-search: title :pencil2: <!-- Nested list items will be placed inside a Dropdown menu -->
   * [Dropdown link one](https://www.google.com/)
   * Nested Dropdown title :triangular_ruler:
     * [**Nested** Dropdown link one](https://www.google.com/)
     * [**Nested** Dropdown link two](https://www.google.com/)
   * [Dropdown link two](https://www.google.com/)
 * [==Third Link== :clipboard:](https://www.google.com/)
-* Filler text [{{glyphicon_facetime_video}} Youtube :tv:](https://www.youtube.com/) filler text<!-- Using a link as a Dropdown title will not render a Dropdown menu -->
+* Filler text [:glyphicon-facetime-video: Youtube :tv:](https://www.youtube.com/) filler text<!-- Using a link as a Dropdown title will not render a Dropdown menu -->
   * [The answer to everything in the universe](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
-  * ==:expanded:Dropdown title==:expanded: {{glyphicon_comment}} :pencil2: <!-- Dropdown menus in are still supported inside, as long as the title is not a link -->
+  * ==:expanded:Dropdown title==:expanded: :glyphicon-comment: :pencil2: <!-- Dropdown menus in are still supported inside, as long as the title is not a link -->
     * [**Nested** Dropdown link one](https://www.google.com/)
 * Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown
   * Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text

diff --git a/test/functional/test_site/_markbind/variables.md b/test/functional/test_site/_markbind/variables.md
@@ -1,5 +1,3 @@
-<span id="education_icon">{{glyphicon_education}}</span>
-
 <span id="referenced_value">This variable can be referenced.</span>
 <span id="finalized_value">{{referenced_value}}</span>