-
-```
-
-
-
-#### Navbar Options
-
-Name | Type | Default | Description
---- | --- | --- | ---
-placement | `String` | `''` | Supports: `top`, `bottom`, `static`, or empty for normal.
-type | `String` | `default` | Supports: `inverse`, `default`.
diff --git a/docs/userGuide/components/panel.md b/docs/userGuide/components/panel.md
deleted file mode 100644
index 82bedb3472..0000000000
--- a/docs/userGuide/components/panel.md
+++ /dev/null
@@ -1,293 +0,0 @@
-## Panel
-
-**Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.**
-
-
- Example
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-```
-
-
-
-**With `minimized` attribute, panel is minimized into an inline block element. The `alt` attribute is for you to specify the minimized block header.**
-
-
- Example
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-```
-
-
-
-**With `expanded` attribute, you can set the panels to be expanded when loaded in.**
-
-
- Example
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-```
-
-
-
-**Panel provides many types that change its appearance.**
-
-
-
- Example
-
Click the Panels to see the expanded style.
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-```
-
-
-
-**Show/Hide buttons using `no-switch` or `no-close`.**
-
-
- Example
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-
- ...
-
-
- ...
-
-```
-
-
-
-**Use markdown in the header (only inline level markdown are supported).**
-
-
- Example
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores excepturi expedita illum impedit ipsa labore qui veniam. Blanditiis exercitationem id ipsum libero molestiae, necessitatibus unde? Amet fugiat fugit molestias?
-
-
-
-
-Markup
-
-```html
-
- ...
-
-```
-
-
-
-**If `src` attribute is provided, the panel will take content from the `src` specified and add it to the Panel body.**
-
-
- Example
-
-
-
-
-Markup
-
-```html
-
-```
-
-
-
-**If `popup-url` attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.**
-
-
- Example
-
- This panel has a popup.
-
-
-
-
-Markup
-
-```html
-
- This panel has a popup.
-
-```
-
-
-
-**If `preload` attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.**
-
-
- Example
-
-
You should be able to find this text before expanding the Panel.
-
-
-
-
-Markup
-
-```html
-
-
You should be able to find this text before expanding the Panel.
-
-```
-
-
-
-**You can nest Panels or other components within a Panel.**
-
-
- Example
-
-
-
-
- I'm a nested tip-box
-
-
-
-
- Some Text
-
-
-
-
-
-Markup
-
-```html
-
-
-
-
- I'm a nested tip-box
-
-
-
-
- Some Text
-
-
-```
-
-
-
-#### Panel Options
-Name | Type | Default | Description
---- | --- | --- | ---
-header | `String` | `''` | The clickable text on the Panel's header.
-alt | `String` | Panel header | The clickable text on the minimised Panel.
-expandable | `Boolean`| `true` | Whether Panel is expandable.
-expanded | `Boolean` | `false` | Whether Panel is expanded or collapsed when loaded in.
-minimized | `Boolean` | `false` | Whether Panel is minimized.
-no-close | `Boolean` | `false` | Whether to show the close button.
-no-switch | `Boolean` | `false` | Whether to show the expand switch.
-bottom-switch | `Boolean` | `true` | Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
-popup-url | `String` | | The url that the popup window will navigate to. The url can be absolute or relative.
-preload | `Boolean` | `false` | Whether the content is loaded immediately from `src`.
-src | `String` | | The url to the remote page to be loaded as the content of the panel.
-type | `String` | `light` | The type of color for the tab (single). Supports: `light`, `dark`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `seamless`.
diff --git a/docs/userGuide/components/pic.md b/docs/userGuide/components/pic.md
deleted file mode 100644
index 2c698059c7..0000000000
--- a/docs/userGuide/components/pic.md
+++ /dev/null
@@ -1,29 +0,0 @@
-## Pic
-
-**Pic allows you to add captions below the image.**
-
-
- Example
-
- Logo for Vue.js
-
-
-
-
-Markup
-
-```html
-
- Logo for Vue.js
-
-```
-
-
-
-#### Pic Options
-Name | Type | Default | Description
---- | --- | --- | ---
-alt | `string` | | **This must be specified.** The alternative text of the image.
-height | `string` | | The height of the image in pixels.
-src | `string` | | **This must be specified.** The URL of the image.
-width | `string` | | The width of the image in pixels. If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
diff --git a/docs/userGuide/components/question.md b/docs/userGuide/components/question.md
deleted file mode 100644
index ab2274d385..0000000000
--- a/docs/userGuide/components/question.md
+++ /dev/null
@@ -1,188 +0,0 @@
-## Question
-
-**Question component consists of a question body, a hint and an answer.**
-
-
- Example
-
- The question body. :grey_question:
-
-
-```
-
-
-
-**If you leave the hint and answer `
` blank, a default hint and answer will be provided instead.**
-
-
- Example
-
- This question has no hint or answer.
-
-
-
-
-
-
-Markup
-
-```html
-
- This question has no hint or answer.
-
-
-
-```
-
-
-
-**Use the `has-input` attribute to add a text input box for users to enter their answer.**
-
-
- Example
-
- What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
-
It is between 300,000 and 400,000 km
-
384,000 km :full_moon:
-
-
-
-
-Markup
-
-```html
-
- What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
-
It is between 300,000 and 400,000 km
-
384,000 km :full_moon:
-
-```
-
-
-
-**You are able to omit the hint or answer `
` independently, and they will not render.**
-
-
- Example
-
- This question with an omitted hint.
-
42 :star:
-
-
-
-
- Example
-
- This question with an omitted answer.
-
The number of exponent bits in a 64-bit Floating Point. :computer:
-
-
-
-
- Example
-
- This question only has the question body.
-
-
-
-
-Markup
-
-```html
-
- This question with an omitted hint.
-
42 :star:
-
-
-
- This question with an omitted answer.
-
The number of exponent bits in a 64-bit Floating Point. :computer:
-
-
-
- This question only has the question body.
-
-```
-
-
-
-**Use the minimized Panel component to create and group questions inline.**
-
-
- Example
-
-
- Who is the first king of Thailand?
-
-
-
-
- Which country did the Hawaiian pizza originate from?
-
- Not Italy or Haiwaii :smirk:
-
-
-
-
-
-
-Markup
-
-```html
-
-
- Who is the first king of Thailand?
-
-
-
-
- Which country did the Hawaiian pizza originate from?
-
- Not Italy or Haiwaii :smirk:
-
-
-
-```
-
-
-
-**Questions can also be loaded in from another file using Panel's `src` attribute.**
-
-
- Example
-
-
-
-
-Markup
-
-```html
-
-```
-
-
-
-#### Question Options
-Name | Type | Default | Description
---- | --- | --- | ---
-has-input | `Boolean` | `false` | Whether Question has a text input box.
diff --git a/docs/userGuide/components/trigger.md b/docs/userGuide/components/trigger.md
deleted file mode 100644
index 853019d33b..0000000000
--- a/docs/userGuide/components/trigger.md
+++ /dev/null
@@ -1,110 +0,0 @@
-## Trigger
-
-Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.
-
-You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.
-
-Specify the `id` attribute on the Tooltip, Popover or Modal component, and use the same `id` in the `for` attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.
-Additionally, multiple Triggers could share the same overlay by providing them with the same `id`.
-
-
-**Using trigger for Tooltip:**
-
-
- Example
- More about trigger.
-
-
- This is the same trigger as last one.
-
-
-
- Markup
-
- ``` html
- More about trigger.
-
-
- This is the same trigger as last one.
- ```
-
-
-**Using trigger for Popover:**
-
-
- Example
- More about trigger.
-
-
- This is the same trigger as last one.
-
-
-
-Markup
-
- ``` html
- More about trigger.
-
-
- This is the same trigger as last one.
- ```
-
-
-**Using trigger for Modal:**
-
-
- Example
- More about trigger.
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- This is the same trigger as last one.
-
-
-
- Markup
-
- ``` html
- More about trigger.
-
- ...
-
-
- This is the same trigger as last one.
- ```
-
-
-**Trigger's `trigger` attribute (which defaults to `hover`) is independent of the target's.**
-
- Example
- This is a hover trigger.
-
- This is a click
-
- popover
- .
-
-
-
- Markup
-
- ``` html
- This is a hover trigger.
-
- This is a click
-
- popover
- .
- ```
-
-
-#### Trigger Options
-
-Name | Type | Default | Description
----- | ---- | ------- | ------
-trigger | `String` | `hover` | How the overlay view is triggered. Supports: `click`, `focus`, `hover`, `contextmenu`.
-for | `String` | `null` | The id for the overlay view to be shown.
\ No newline at end of file
diff --git a/docs/userGuide/formattingContents.md b/docs/userGuide/formattingContents.md
new file mode 100644
index 0000000000..b2fcc935a5
--- /dev/null
+++ b/docs/userGuide/formattingContents.md
@@ -0,0 +1,48 @@
+Formatting Contents
+formattingContents
+
+
+ title: "User Guide: {{ main_title }}"
+ footer: footer.md
+ siteNav: userGuideSections.md
+ pageNav: 2
+
+
+
+[_User Guide → {{ main_title }}_]({{ baseUrl }}/userGuide/{{ main_filename }}.html)
+
+
+
+
+
+
+# {{ main_title }}
+
+
+
+**MarkBind supports a wide collection of Markdown-like basic content formatting syntax** such as text stying, tables, lists, images, links, etc.
+
+
+
+{% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
+
+{% macro show_topic(filename) %}
+
+
+{% endmacro %}
+
+{% for k,v in topics %}
+ {% if 'basic' in v[1] %}
+{{ show_topic(k) }}
+ {% endif %}
+{% endfor %}
+
+****Relevant Tips & Tricks****
+
+
+
+
+
+
+
+
diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
index 7fc1954881..8f97509032 100644
--- a/docs/userGuide/makingTheSiteSearchable.md
+++ b/docs/userGuide/makingTheSiteSearchable.md
@@ -1,14 +1,22 @@
+Making the Site Searchable
+makingTheSiteSearchable
+
- title: "User Guide: Making the Site Searchable"
+ title: "User Guide: {{ title }}"
footer: footer.md
siteNav: userGuideSections.md
+ pageNav: 2
+
+[_User Guide → {{ title }}_]({{ baseUrl }}/userGuide/{{ filename }}.html)
+
+
-# Making the Site Searchable
+# {{ title }}
@@ -17,46 +25,12 @@
**All headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`]({{ baseUrl }}/userGuide/siteConfiguration.html#headingindexinglevel).
-## Using Keywords
-
-**You can also specify additional keywords to be indexed under a heading** by tagging the words with the `keyword` class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add `d-none` as a class.
-
-
-
-{{ icon_example }}
+
+
-```html
-#### Developer Testing
-regress
-regression testing
-
-This is good for catching regressions.
-```
-{{ icon_arrow_down }}
-
-
-
-**Developer Testing**
-
-This is good for catching regressions.
-
-
-
-**You can also set additional keywords to be indexed for an entire page** using the `keywords` attribute inside the `` of that page.
-
-
+
If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option `enableSearch: false` in your `site.json`. This stops MarkBind from indexing search headings and speeds up building.
+
-
-# MarkBind Syntax
-
-
-
-
-**A MarkBind source file may contain a mix of several popular syntax schemes** used in creating web pages. MarkBind source file can be as simple as basic Markdown, and you can use progressively more complicated syntax to create progressively more sophisticated Web pages while optimizing other aspects such as content reuse.
-
-
-Here are the syntax schemes supported, each of which are explained in the sections below:
-
-1. [Markdown](#support-for-markdown)
-1. [GFMD extensions to Markdown](#support-for-gfmd)
-1. [MarkBind extensions to Markdown](#markbind-extensions-to-markdown)
-1. [MarkBind custom syntax](#markbind-custom-syntax)
-1. [HTML, JavaScript, CSS](#support-for-html%2C-javascript%2C-css)
-1. [VueStrap and Bootstrap](#support-for-vuestrap-and-bootstrap)
-1. [Nunjucks](#support-for-nunjucks)
-
-## Support for Markdown
-
-**MarkBind supports all basic Markdown syntax.** A summary is given below. Refer to [markdownguide.org](https://www.markdownguide.org/) for more details.
-
-##### Headings:
-```markdown
-# Heading level 1
-...
-###### Heading level 6
-```
-
-
-
-# Heading level 1
-...
-###### Heading level 6
-
-
-
-##### Text Formatting:
-```markdown
-Ants **Bees Cats** Dogs
-Ants _Bees Cats_ Dogs
-Ants ___Bees Cats___ Dogs
-Ants `Bees Cats` Dogs
-```
-
-
-
-Ants **Bees Cats** Dogs
-Ants _Bees Cats_ Dogs
-Ants ___Bees Cats___ Dogs
-Ants `Bees Cats` Dogs
-
-
-
-
-##### Blockquotes
-
-```markdown
-> Ants Bees
->
-> Cats Dogs Elephants
->> Fish
-```
-
-
-
-> Ants Bees
->
-> Cats Dogs Elephants
->> Fish
-
-
-##### Lists
-
-```markdown
-* Ants Bees
- * Cats Dogs
- * Elephants
-* Fish
-
-1. Ants Bees
- 1. Cats Dogs
- 1. Elephants
-1. Fish
-```
-
-
-
-* Ants Bees
- * Cats Dogs
- * Elephants
-* Fish
-
-1. Ants Bees
- 1. Cats Dogs
- 1. Elephants
-1. Fish
-
-
-##### Images
-
-```markdown
-
-```
-
-
-
-
-
-
-##### Links
-
-```markdown
-Go to the [MarkBind Website](https://markbind.github.io/markbind/)
-```
-
-
-
-Go to the [MarkBind Website](https://markbind.github.io/markbind/)
-
-
-
-
-## Support for GFMD
-
-**MarkBind supports additional Markdown features provided by Github-Flavored Markdown (GFMD).** A summary is given below. Refer to [Github's GFMD documentation](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) for more details.
-
-
-##### Fenced code blocks / syntax highlighting
-
-````
-```python
-def say_hello(name):
- print('Hello', name)
- print('How are you', name)
-```
-````
-
-```python
-def say_hello(name):
- print('Hello', name)
- print('How are you', name)
-```
-
-##### Task Lists
-
-```markdown
-- [x] Ants
-- [x] Bees
-- [x] Cats
-- [ ] Dogs
-```
-
-
-
-- [x] Ants
-- [x] Bees
-- [x] Cats
-- [ ] Dogs
-
-
-##### Tables
-
-```markdown
-Animal | Trainable?
------- | -------------
-Ants | no
-Bees | no
-Cats | yes
-```
-
-
-
-Animal | Trainable?
------- | -------------
-Ants | no
-Bees | no
-Cats | yes
-
-
-
-##### Strikethrough
-
-```markdown
-Ants ~~Bees Cats~~ Dogs
-```
-
-
-
-Ants ~~Bees Cats~~ Dogs
-
-
-
-##### Emoji
-
-```markdown
-:+1: :exclamation: :x: :construction:
-```
-
-
-
-:+1: :exclamation: :x: :construction:
-
-
-
-
-
-%%{{ icon_info }} [the list of supported emoji](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md).%%
-
-
-
-
-## MarkBind Extensions to Markdown
-
-MarkBind adds several Markdown-like features on top of GFMD.
-
-#### Extra Text Formatting Features
-
-* **Dimmed Text**:
- `Apple %%Banana Cherries%%` {{ icon_arrow_right }} Apple %%Banana Cherries%%
-
-* **Highlighting**:
- `Apple ==Banana Cherries==` {{ icon_arrow_right }} Apple ==Banana Cherries==
-
-* **Underlining**:
- `++Apple Banana++ Cherries` {{ icon_arrow_right }} ++Apple Banana++ Cherries
-
-* **Radio Button List**:
- ```markdown
- - ( ) Option 1
- - (X) Option 2 (selected)
- ```
- {{ icon_arrow_down }}
-
-
-- ( ) Option 1
-- (X) Option 2 (selected)
-
-
-#### Inline code / syntax highlighting
-
-
-
-{{ icon_example }} You can syntax highlight inline code by using `{.language}`:
-```markdown
-Consider the Java method signature: `public static void main(String[] args)`{.java}.
-```
-{{ icon_arrow_down }}
-
-Consider the Java method signature: `public static void main(String[] args)`{.java}.
-
-
-#### Media Embeds
-
-**There are easy ways to embed media content such as YouTube videos and PowerPoint slides**.
-
-###### Embedding Youtube Videos
-
-
-
-{{ icon_example }} Here are three ways of embedding YouTube videos and one example of how it will look in the page.
-
-
-
-
-```markdown
-@[youtube](v40b3ExbM0c)
-@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
-@[youtube](http://youtu.be/v40b3ExbM0c)
-```
-
-
-
-
-@[youtube](v40b3ExbM0c)
-
-
-
-
-
-
-More media blocks, embedding services and additional options can be found in [Markdown-it documentation](https://github.com/rotorz/markdown-it-block-embed).
-
-###### Embedding Powerpoint Slides (using the embed url from Powerpoint online)
-
-
-
-{{ icon_example }} Here is an example of embedding a PowerPoint slide deck:
-
-
-
-
-```markdown
-@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
-```
-
-
-
-
-@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
-
-
-
-
-
-
-Links to files of the generated site (e.g., an HTML page or an image file) should be specified as absolute paths and 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 }}:
-
-1. Click [here]({{ baseUrl }}/userGuide/reusingContents.html). {{ icon_arrow_right }} Click [here]({{ baseUrl }}/userGuide/reusingContents.html)
-2. ``
-
-
-
-
-
-
-#### Icons Fonts
-
-%%Acknowledgement: Font Awesome icons are provided by [Font Awesome](https://fontawesome.com/) under their [free license](https://fontawesome.com/license) while Glyphicons are provided by [Glyphicons](https://glyphicons.com/) via [Bootstrap 3](https://getbootstrap.com/docs/3.3/).%%
-
-MarkBind supports using Font Icons provided by Font Awesome and Glyphicons.
-
-
-
-The advantage of font icons over emojis is font icons can be _styled_ to fit your needs.e.g.,
-* emoji: Don't judge the :book: by it's cover! :-1:
-* font icons: Don't judge the {{ fas_book }} by it's cover! {{ icon_dislike }}
-
-
-
-###### 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_.
- 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`)
-
-1. Insert MarkBind name for the icon enclosed within double curly braces to get the icon in your page.
- `Create a **branch**` {{fas_code_branch}} now! → 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 ( `_` ).
- 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.
- `Move to the right!` {{glyphicon_hand_right}} → Move to the right! {{ glyphicon_hand_right }}
-
-
-
-#### Variables
-
-
-
-
-
-
-
-#### The `` Tag
-
-
-
-
-
-
-
-#### MarkBind Components
-
-
-
-
-
-
-
-## Support for HTML, JavaScript, CSS
-
-**A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS** as a normal web page would.
-
-==Text within HTML tags are considered plain text unless the text is preceded by a blank line,== in which case the text is parsed as Markdown text.
-
-
-
-{{ icon_example }} Here is an example of how text within an html tag is parsed as Markdown when preceded by a blank line.
-
-Code:
-```html
-
-Without preceding blank line: Apples **Bananas** Cherries
-
-
-
-
-With preceding blank line: Apples **Bananas** Cherries
-
-```
-Outcome:
-
-
-Without preceding blank line: Apples **Bananas** Cherries
-
-
-
-
-With preceding blank line: Apples **Bananas** Cherries
-
-
-
-Alternatively, you can use `` (for _block_ Markdown elements such as headings) or `` (for _inline_ Markdown elements such as bold/italic text) tags to indicate the text should be treated as Markdown.
-
-
-
-{{ icon_example }} Here is an example of how text within an HTML tag can be treated as Markdown using ``/`` tags.
-
-Code:
-```html
-
-Apples **Bananas** Cherries
-
-
-
-##### Apples **Bananas** Cherries
-
-```
-Outcome:
-
-Apples **Bananas** Cherries
-
-
-
-##### Apples **Bananas** Cherries
-
-
-
-
-
-## Support for VueStrap and BootStrap
-
-As MarkBind uses [VueStrap](https://bootstrap-vue.js.org/docs/components/alert/) (which in turn is based on [BootStrap](https://getbootstrap.com/docs/4.2/getting-started/introduction/)) internally, many of their syntax work within MarkBind files too.
-
-
-
-## Support for Nunjucks
-
-[Nunjucks](https://mozilla.github.io/nunjucks/) is a JavaScript based templating tool. Here is a simple example:
-
-
-`
`
-{% for item in [1, 2, 3, 4] %}
- `
`Item {{ item }}`
`
-{% endfor %}
-`
`
-
-
-{{ icon_arrow_down }}
-
-
-
-{% for item in [1, 2, 3, 4] %}
-
Item {{ item }}
-{% endfor %}
-
-
-
-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==.
-
-
-
+
+# {{ title }}
+
+
+
+
+**A MarkBind source file may contain a mix of several popular syntax schemes** used in creating web pages. MarkBind source file can be as simple as basic Markdown, and you can use progressively more complicated syntax to create progressively more sophisticated Web pages while optimizing other aspects such as content reuse.
+
+
+Given below is an overview of the syntax schemes supported by MarkBind.
+
+
+
+{{ icon_info }} Exact usage of various MarkBind syntax is described in separate sections such as
+
+
+#### {{ icon_check_blue }} Support for Markdown
+
+MarkBind supports all basic Markdown syntax.
+
+
+
+
+
+
+
+
+
+#### {{ icon_check_blue }} Support for GFMD
+
+MarkBind supports additional Markdown features provided by Github-Flavored Markdown (GFMD).
+
+
+
+
+
+
+
+
+
+
+#### {{ icon_check_blue }} MarkBind Extensions to Markdown
+
+MarkBind adds several Markdown-like features on top of GFMD.
+
+
+
+
+
+
+
+
+#### {{ icon_check_blue }} MarkBind Custom Syntax
+
+Given below are some examples of custom syntax added by MarkBind.
+
+{% macro quote_topic(filename) %}
+
+
+
+
+
+More info:
+
+
+{% endmacro %}
+
+{% for filename in ['syntax/variables.mbdf', 'syntax/includes.mbdf', 'usingComponents.md'] %}
+{{ quote_topic(filename) }}
+{% endfor %}
+
+
+
+#### {{ icon_check_blue }} Support for HTML, JavaScript, CSS
+
+{{ quote_topic('usingHtmlJavaScriptCss.md') }}
+
+
+
+#### {{ icon_check_blue }} Support for VueStrap and BootStrap
+
+As MarkBind uses [VueStrap](https://bootstrap-vue.js.org/docs/components/alert/) (which in turn is based on [BootStrap](https://getbootstrap.com/docs/4.2/getting-started/introduction/)) internally, many of their syntax work within MarkBind files too.
+
+
+
+#### {{ icon_check_blue }} Support for Nunjucks
+
+[Nunjucks](https://mozilla.github.io/nunjucks/) is a JavaScript based templating tool. Here is a simple example:
+
+
+`
`
+{% for item in [1, 2, 3, 4] %}
+ `
`Item {{ item }}`
`
+{% endfor %}
+`
`
+
+
+{{ icon_arrow_down }}
+
+
+
+{% for item in [1, 2, 3, 4] %}
+
Item {{ item }}
+{% endfor %}
+
+
+
+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==.
+
+
+
+
+# Reader-Facing Features
+
+
+
+{% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
+
+{% macro show_topic(filename, heading) %}
+
+##### {{ heading }}
+
+
+
+
+
+
+
+
+
+{% endmacro %}
+
+{% for k,v in topics %}
+ {% if 'reader-facing' in v[1] %}
+{{ show_topic( k, v[0]) }}
+ {% endif %}
+{% endfor %}
+
+
\ No newline at end of file
diff --git a/docs/userGuide/reusingContents.md b/docs/userGuide/reusingContents.md
index 45916e187a..820156b46d 100644
--- a/docs/userGuide/reusingContents.md
+++ b/docs/userGuide/reusingContents.md
@@ -1,421 +1,37 @@
+Reusing Contents
+reusingContents
+
- title: "User Guide: Reusing Contents"
+ title: "User Guide: {{ title }}"
footer: footer.md
- pageNav: "default"
- pageNavTitle: "List of Methods"
siteNav: userGuideSections.md
+ pageNav: 4
+
+[_User Guide → {{ title }}_]({{ baseUrl }}/userGuide/{{ filename }}.html)
+
+
-# Reusing Contents
+# {{ title }}
**MarkBind is highly-optimized for content reuse**. It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading.
-## Using Variables
-
-
-
-**MarkBind variables are ideal for reusing small bits of code** in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring the variable instead of duplicating the code bit.
-
-
-
-
-More info: [_User Guide: Reusing Contents → Using Variables_]({{ baseUrl }}/userGuide/reusingContents.html#using-variables)
-
-
-**Variables are to be defined in the `_markbind/variables.md` file.** Each variable must have an `id` and the value can be any MarkBind-compliant code fragment. The `id` should not contain `-` and `.`. For example, `search-option` and `search.options` are not allowed.
-
-
-
-{{ icon_example }} Here's how you can define two variables `year` and `options`:
-
-```html
-2018
-
-
-* yes
-* no
-* maybe
-
-```
-
-
-To include a variable value in your code, give the variable id enclosed in double curly braces.
-
-
-
-{{ icon_example }} Here's how you can use the variable `year`:
-
-The year was {{ year }}. {{ icon_arrow_right }} The year was 2018.
-
-
-
-==MarkBind variables are _global_==; they are available from anywhere in the code base.
-
-**MarkBind provides a number of built-in variables.**
-
-
-##### Built-in Variable: `baseUrl`
-
-Represents the root directory of the project. Used for specifying intra-site links.
-
-
-
-
-
-
-##### Built-in Variable: `timestamp`
-
-{{ timestamp }} is the time stamp (in UTC) that indicates when the page was generated.
-
-
-
-
-
-
-##### Built-in Variable: `MarkBind`
-
-{{MarkBind}} represents a code snippet that specifies the MarkBind version in use and is linked to the MarkBind website.
-
-
-
-
-
-
-##### Built-in Variables: Icon Fonts
-
-As mentioned in _User Guide: MarkBind Syntax_, you can use built-in variables to access icon fonts.
-
-
-
-
-
-
-
-##### Variables: Defaults
-
-You can specify a default value for a variable, which is displayed when the variable is not specified in `variables.md` and by any of the [includes]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag) of the page. This is done by adding `or defaultValue` within the curly braces.
-
-
-
-{{ icon_example }} If `name` is not declared in `variables.md`:
-My name is {{ name or "Anonymous" }}. {{ icon_arrow_right }} My name is Anonymous.
-
-
-##### Variables: Tips and Tricks
-
-**Variables can refer to other variables** that are declared earlier, including built-in variables.
-
-
-
-{{ icon_example }} This variable uses a built-in variable:
-\{{ glyphicon_hand_right }}\
-
-Here, the second variable will be assigned the contents of the first variable.
-\These is the first variable.\
-\{{ first }}\
-
-This will not work, as the `fourth` variable is declared _below_ the line that refers to it.
-\{{ fourth }}\ :x:
-\This is the fourth variable.\
-
-
-Note that if the variable being referenced contains HTML tags, MarkBind may escape the tags and render it literally.
-
-
-
-{{ icon_example }} If we declare the variables as follows,
-
-\{{ glyphicon_hand_right }}\
-\{{ right_hand }}\
-
-the result will be,
-
-{{ right_hand_2 }} {{ icon_arrow_right }} \
-
-
-You must use the `safe` filter when using such variables:
-
-
-
-{{ icon_example }} If we use the safe filter for the second variable:
-
-\{{ glyphicon_hand_right }}\
-\{{ right_hand | safe }}\
-
-{{ right_hand_2 }} {{ icon_arrow_right }} {{glyphicon_hand_right}}
-
-
-### Page Variables
-
-**You can also declare variables for use within a single page.** These variables work exactly the same as regular variables, except that their values only apply to the page they are declared in. This can be done by using the `` tag.
-
-
-
-{{ icon_example }} Declaring page variables:
-
-`John Doe`
-My name is {{ full_name }}. This is {{ full_name }}'s site.
-
-
-Note: These variables will also be applied to [`` files]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag). If the same variable is defined in a chain of pages (e.g. `a.md` includes `b.md` includes `c.md`...), variables defined in the top-most page will take precedence. Global variables (`_markbind/variables.md`) will take precedence over any page variables.
+
-## The `include` tag
-
-
-
-**MarkBind has a powerful `` mechanism** which allows you to create documents by combining other content fragments.
-
-
-
-
-More info: [_User Guide: Reusing Contents → The `include` Tag_]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag)
-
-
-**You can use `` tag to include another markdown or HTML document into the current document.**
-
-
-
-{{ icon_example }} Including text from a `tip2.md` in another file.
-```html
-Tip 1. ...
-
-Tip 3. ...
-```
-
-
-**You can `` a fragment of a file** by specifying the `#fragment-id` at the end of the `src` attribute value, provided the fragment is wrapped in a `
`/``/`` tag with the matching `id`.
-
-
-
-{{ icon_example }} Including a fragment from a file:
-```html
-Some text
-
-Some other text
-```
-
-`docs/tips.md`:
-```html
-...
-
- Tip 1. ...
- ...
-
-Tip 2. ...
-```
-
-
-
-
-When setting the `id` of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading `## Some Useful Tips`, MarkBind will auto-generate an ID `some-useful-tips` for that heading.
-
-
-
-**Attributes:**
-* **`src`**: specify the source file path.
-* **`inline`** (optional): make the included result an inline element. (wrapped in `` tag). e.g.,
- ```html
- The title is while ...
- ```
-* **`optional`** (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,
- ```html
-
- ```
-* **`trim`** (optional): remove leading and trailing whitespace and newlines from the document before including.
- ```html
-
- ```
-
-
-
-The `` mechanism can be used inside any MarkBind source file (even inside the _front matter_ section) but it will not work inside some _special_ files such as the `_markbind/variables.md`.
-
-
-
-##### `` Inside an Included File
-
-**Although the `src` attribute of an `` is given _relative_ to the current directory, it is converted to an _absolute_ value _before_ the host file is included from another file.**
-
-
-
-{{ icon_example }} Suppose you have a MarkBind project with the following file structure.
-```
-c:/mySite/
- ├── bookFiles/
- | ├── book.md
- | ├── chapter1.md
- | └── chapter2.md
- └── reviewFiles/
- └── review.md
-```
-The `book.md`:
-```markdown
-# My Book
-
-
-```
-The `review.md`:
-
-```markdown
-# My Review
-
-...
-```
-
-The content of the `chapter1.md` and `chapter2.md` will be included in the `review.md` (via ``) although `chapter1.md` and `chapter2.md` are not in `reviewFiles` directory. i.e., `` will be interpreted as ``
-
-
-In other words, **`` interprets the reused code relative to the original location of the file, not the location in which it is reused.**
+
-##### Specifying Variables in an ``
-
-**It is possible to include variables in an ``.**
-
-
-
-{{ icon_example }} Specifying `title` and `author` variables in an `` tag:
-
-```html
-
- My Title
- John Doe
-
-```
-
-In `article.md`:
-
-
-# {{ title }}
-Author: {{ author }}
-
-
-
-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.
-
-If the same variable is defined in a chain of ``s (e.g. `a.md` includes `b.md` includes `c.md`...), variables defined in the top-most `` will take precedence. Global variables (`_markbind/variables.md`) will take precedence over any `` variables.
-
-## Using Boilerplate Files
-
-**If you find duplicating a _boilerplate code_ fragment in multiple places of your code base, you can use a `boilerplate` file to avoid such duplication.** Note that you cannot use a normal `` in this case because the code included using a normal `` stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.
-
-
-
-{{ icon_example }} Suppose you have a MarkBind project with the following file structure.
-```
-c:/mySite/
- ├── chapter1/
- | ├── chapter.md
- | ├── text.md
- | └── exercises.md
- ├── chapter2/
- | ├── chapter.md
- | ├── text.md
- | └── exercises.md
- └── book.md
-```
-The `book.md`:
-```markdown
-# My Book
-
-
-```
-The `chapter1/chapter.md`:
-
-```markdown
-## Text
-
-## Exercises
-
-```
-The `chapter2/chapter.md`:
-
-```markdown
-## Text
-
-## Exercises
-
-```
-
-As you can see, both `chapter.md` files are exactly the same. If we were to use only one of the `chapter.md` files and `` it twice in the `book.md`, we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, `chapter.md` contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to `chapter1` directory and once relative to `chapter2` directory.
-
-
-To use a code fragment as a boilerplate file,
-1. Put the code in a file inside the `_markbind/boilerplates` directory.
-2. `` the file _as if_ a copy of it exists in any directory you want it to applied, but add the `boilerplate` attribute to the `` tag.
-
-
-
-{{ icon_example }} Here's how you can use a boilerplate file to avoid duplicating the `chapter.md`:
-```
-c:/mySite/
- ├── _markbind/boilerplates/
- | └── chapter.md
- ├── chapter1/
- | ├── text.md
- | └── exercises.md
- ├── chapter2/
- | ├── text.md
- | └── exercises.md
- └── book.md
-```
-The `book.md`:
-```markdown
-# My Book
-
-
-```
-The `_markbind/boilerplates/chapter.md`:
-
-```markdown
-## Text
-
-## Exercises
-
-```
-
-Consider the line ``. Note how you can use `src="chapter1/chapter.md"` there is no such file. MarkBind will use the `chapter.md` file `/_markbind/boilerplates/` but interpret it as if the file exist in `chapter1` directory (i.e., interpret the `chapter1.md` code relative to the `chapter1` directory.
-
-Similarly, `` interprets the `chapter.md` relative to the `chapter2` directory.
-
-
-If you have many boilerplate files, you can organize them into directories inside the `_markbind` directory. When using such boilerplate files, you need to replace `boilerplate` attribute with `boilerplate=""`.
-
-
-
-{{ icon_example }} Suppose the `chapter.md` is places in a `book` directory:
-```
-c:/mySite/
- └── _markbind/boilerplates/
- └── book/
- └── chapter.md
-
-```
-
-It needs to be used as follows:
-```markdown
-
-
-```
-
-
-
-
## Reusing Contents Across Sites
**MarkBind supports reusing across sites.** It allows you include the pages you want from a _sub-site_ in another _main-site_ without having to change anything in the source files of the _sub-site_ as long as the sub-site source files are inside the directory of the _main site_.
@@ -538,7 +154,7 @@ Then, in a page-specific CSS file,
}
```
-#### Creating multiple variations of a page
+#### Creating slight variations of content
-Tags are a good way to create multiple variations of a page within the same source file, such as to filter content for creating multiple different versions of the same page. See [_User Guide: Tweaking the Page Structure → Toggling alternative contents in a page_]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#toggling-alternative-contents-in-a-page) section for more information.
+Tags are a good way to create multiple variations of a page within the same source file, such as to filter content for creating multiple different versions of the same page. See [_User Guide: Tweaking the Page Structure → Tags_]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#tags) section for more information.
diff --git a/docs/userGuide/syntax/blockquotes.mbdf b/docs/userGuide/syntax/blockquotes.mbdf
new file mode 100644
index 0000000000..30d4cea2df
--- /dev/null
+++ b/docs/userGuide/syntax/blockquotes.mbdf
@@ -0,0 +1,72 @@
+## Blockquotes
+
+
+
+
+```markdown
+Normal text
+> Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested quoteblock
+```
+
+
+
+Normal text
+> Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+
+
+
+Alternatively, you can use `
` tags:
+
+
+
+
+```markdown
+Normal text
+
+Blockquote, first paragraph
+
+Second paragraph
+
+Nested blockquote
+
+
+```
+
+
+
+Normal text
+
+Blockquote, first paragraph
+
+Second paragraph
+
+Nested blockquote
+
+
+
+
+
+More info: https://www.markdownguide.org/basic-syntax#blockquotes-1
+
+
+
+```markdown
+> Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+```
+
+
+
+> Blockquote, first paragraph
+>
+> Second paragraph
+>> Nested blockquote
+
\ No newline at end of file
diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
new file mode 100644
index 0000000000..cd34395e70
--- /dev/null
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -0,0 +1,134 @@
+## Boxes
+
+**Box comes with different built-in types.**
+
+
+
+
+```html
+
+ default
+
+
+ info
+
+
+ warning
+
+
+ success
+
+
+ important
+
+
+ wrong
+
+
+ tip
+
+
+ definition
+
+```
+
+
+
+
+ default
+
+
+ info
+
+
+ warning
+
+
+ success
+
+
+ important
+
+
+ wrong
+
+
+ tip
+
+
+ definition
+
+
+
+
+
+
+**You can customize the TipBox's appearance.**
+
+
+
+
+```html
+
+ default, styled as empty box with blue left border
+
+
+ info, with rocket icon
+
+```
+
+
+
+
+ default, styled as empty box with blue left border
+
+
+ info, with rocket icon
+
+
+
+
+****Options****
+Name | Type | Default | Description
+--- | --- | --- | ---
+background-color | `String` | `null` |
+border-color | `String` | `null` |
+border-left-color | `String` | `null` | Overrides border-color for the left border.
+color | `String` | `null` | Color of the text.
+icon | `String` | `null` |
+type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
+
+
+```html
+
+ warning
+
+```
+
+
+
+
+ default
+
+
+ info
+
+
+ warning
+
+
+ success
+
+
+ important
+
+
+ wrong
+
+
+ tip
+
+
+ definition
+
+
\ No newline at end of file
diff --git a/docs/userGuide/syntax/code.mbdf b/docs/userGuide/syntax/code.mbdf
new file mode 100644
index 0000000000..18830a0b5a
--- /dev/null
+++ b/docs/userGuide/syntax/code.mbdf
@@ -0,0 +1,68 @@
+## Code
+
+MarkBind can provide syntax coloring for a code block (aka _Fenced Code Blocks_).
+
+
+
+
+````
+```xml
+
+ goo
+
+```
+````
+
+
+
+```xml
+
+ goo
+
+```
+
+
+
+
+More info: https://www.markdownguide.org/extended-syntax#fenced-code-blocks
+
+In addition, MarkBind can apply syntax-coloring on inline code too.
+
+
+
+
+```
+Consider the xml code `goo`{.xml},
+or the java code `public static void main(String[] args)`{.java}.
+```
+
+
+
+
+Consider the xml code `goo`{.xml},
+or the java code `public static void main(String[] args)`{.java}.
+
+
+
+
+````
+```xml
+
+ goo
+
+```
+````
+```
+`goo`{.xml}
+```
+
+
+
+```xml
+
+ goo
+
+```
+Syntax coloring for inline code: `goo`{.xml} too!
+
+
\ No newline at end of file
diff --git a/docs/userGuide/components/dropdown.md b/docs/userGuide/syntax/dropdowns.mbdf
similarity index 71%
rename from docs/userGuide/components/dropdown.md
rename to docs/userGuide/syntax/dropdowns.mbdf
index c9e1e6ecbd..0e5f8e0e69 100644
--- a/docs/userGuide/components/dropdown.md
+++ b/docs/userGuide/syntax/dropdowns.mbdf
@@ -1,124 +1,173 @@
-## Dropdown
-
-
- Example
-
-
-
-```
-
-
-
-#### Dropdown Options
-
-Name | Type | Default | Description
---- | --- | --- | ---
-disabled | `Boolean` | `false` | Whether Dropdown can be opened.
-menu-align-right | `Boolean` | `false` | Whether the dropdown list will be right-aligned.
-text | `String` | `''` | Dropdown button text.
-type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.
-
-
-
-%%{{ icon_info }} You may refer to [this documentation](https://getbootstrap.com/docs/4.0/components/buttons/) regarding how you can use the **Bootstrap buttons**, and how to style them.%%
-
\ No newline at end of file
+## Dropdowns
+
+
+
+
+```html
+
+
+
+
+
+****Options****
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+disabled | `Boolean` | `false` | Whether Dropdown can be opened.
+menu-align-right | `Boolean` | `false` | Whether the dropdown list will be right-aligned.
+text | `String` | `''` | Dropdown button text.
+type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.
+
+
+
+%%{{ icon_info }} You may refer to [this documentation](https://getbootstrap.com/docs/4.0/components/buttons/) regarding how you can use the **Bootstrap buttons**, and how to style them.%%
+
+
\ No newline at end of file
diff --git a/docs/userGuide/syntax/embeds.mbdf b/docs/userGuide/syntax/embeds.mbdf
new file mode 100644
index 0000000000..31516a2b32
--- /dev/null
+++ b/docs/userGuide/syntax/embeds.mbdf
@@ -0,0 +1,64 @@
+## Embeds
+
+**There are easy ways to embed media content such as YouTube videos and PowerPoint slides**.
+
+###### Embedding Youtube Videos
+
+Here are three ways of embedding YouTube videos and one example of how it will look in the page.
+
+
+
+
+```markdown
+@[youtube](v40b3ExbM0c)
+@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
+@[youtube](http://youtu.be/v40b3ExbM0c)
+```
+
+
+
+@[youtube](v40b3ExbM0c)
+
+
+
+More media blocks, embedding services and additional options can be found in [Markdown-it documentation](https://github.com/rotorz/markdown-it-block-embed).
+
+###### Embedding Powerpoint Slides (using the embed url from Powerpoint online)
+
+Here is an example of embedding a PowerPoint slide deck:
+
+
+
+
+```markdown
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+```
+
+
+
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+
+
+
+
+
+```markdown
+@[youtube](v40b3ExbM0c)
+@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
+@[youtube](http://youtu.be/v40b3ExbM0c)
+
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+```
+
+
+
+
+Embedded YouTube video:
+
+@[youtube](v40b3ExbM0c)
+
+Embedded slide deck:
+
+@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)
+
+
\ No newline at end of file
diff --git a/docs/userGuide/syntax/emoji.mbdf b/docs/userGuide/syntax/emoji.mbdf
new file mode 100644
index 0000000000..f2f431456e
--- /dev/null
+++ b/docs/userGuide/syntax/emoji.mbdf
@@ -0,0 +1,33 @@
+## Emoji
+
+
+
+
+
+```markdown
+:+1: :exclamation: :x: :construction:
+```
+
+
+
+:+1: :exclamation: :x: :construction:
+
+
+
+
+
+
+%%{{ icon_info }} [the list of supported emoji](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md).%%
+
+
+
+
+```markdown
+:+1: :exclamation: :x: :construction:
+```
+
+
+
+
+:+1: :exclamation: :x: :construction:
+
\ No newline at end of file
diff --git a/docs/userGuide/components/anotherSrc/loadContent.html b/docs/userGuide/syntax/extra/loadContent.html
similarity index 100%
rename from docs/userGuide/components/anotherSrc/loadContent.html
rename to docs/userGuide/syntax/extra/loadContent.html
diff --git a/docs/userGuide/components/anotherSrc/quiz.md b/docs/userGuide/syntax/extra/quiz.md
similarity index 100%
rename from docs/userGuide/components/anotherSrc/quiz.md
rename to docs/userGuide/syntax/extra/quiz.md
diff --git a/docs/userGuide/syntax/extra/triggers.mbdf b/docs/userGuide/syntax/extra/triggers.mbdf
new file mode 100644
index 0000000000..56d70d2b91
--- /dev/null
+++ b/docs/userGuide/syntax/extra/triggers.mbdf
@@ -0,0 +1,18 @@
+****Triggers****
+
+Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.
+
+You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.
+
+Specify the `id` attribute on the Tooltip, Popover or Modal component, and use the same `id` in the `for` attribute of the Trigger to allow the Trigger to invoke the specific overlay elements.
+Additionally, multiple Triggers could share the same overlay by providing them with the same `id`.
+
+
+**Trigger's `trigger` attribute (which defaults to `hover`) is independent of the target's.**
+
+****Options****
+
+Name | Type | Default | Description
+---- | ---- | ------- | ------
+trigger | `String` | `hover` | How the overlay view is triggered. Supports: `click`, `focus`, `hover`, `contextmenu`.
+for | `String` | `null` | The id for the overlay view to be shown.
\ No newline at end of file
diff --git a/docs/userGuide/syntax/footers.mbdf b/docs/userGuide/syntax/footers.mbdf
new file mode 100644
index 0000000000..9aeb2dd97c
--- /dev/null
+++ b/docs/userGuide/syntax/footers.mbdf
@@ -0,0 +1,57 @@
+## Footers
+
+**You can specify a page footer** using a `