Rebase to resolve merge conflicts

Author: jamos-tay

docs/userGuide/usingPlugins.md

@@ -9,22 +9,24 @@
 
 # Using Plugins
 
-A plugin is a user defined extension that can add custom features to MarkBind. Markbind plugins are `js` scripts that are loaded and run during the page generation.
+A plugin is a user defined extension that can add custom features to MarkBind. MarkBind plugins are `js` scripts that are loaded and run during the page generation.
 
-**WARNING:** Plugins are executable programs. This means that they might contain malicious code that may damage your computer.
+<tip-box type="warning">
+**WARNING:** Plugins are executable programs that can be written by anyone. This means that they might contain malicious code that may damage your computer.
 
 Only run plugins from people that you trust. Do not run the plugin if the source/origin of the plugin cannot be ascertained.
+</tip-box>
 
 ### Adding Plugins
 
 Plugins are stored in the `_markbind/plugins` folder which is generated on `init`. To use a plugin, place the `js` source of the plugin in the `_markbind/plugins` folder and add the following options to `site.json`:
 
-- `plugins`: An array of plugin names to use
-- `context`: An object containing lists of parameters passed to each individual plugin.
+- `plugins`: An array of plugin names to use.
+- `context`: A mapping of a list of parameters passed to each individual plugin.
 
 For example:
 
-```
+```json
 {
   ...
   "plugins" : [
@@ -42,30 +44,31 @@ For example:
 
 MarkBind plugins allow the user to mutate the page data (`html`) during the page compilation process.
 
-![Markbind Rendering]({{baseUrl}}/images/rendering.png)
+![MarkBind Rendering]({{baseUrl}}/images/rendering.png)
 
 MarkBind provides two entry points for modifying the page:
 
 - Prerender: Called before MarkBind converts/renders the source from markdown to HTML.
 - Postrender: Called after the HTML is rendered.
 
-These are controlled by specifying the `preRender` and `postRender` functions in the plugin `js`. Each function takes in two parameters:
+These are controlled by specifying the `preRender()` and `postRender()` functions in the plugin `js`. Each function takes in two parameters:
 
 - `content`: The intermediate content of the page data represented as a string. 
   -  For `preRender`, `content` will be the raw markdown of a `.md` file.
   -  For `postRender`, `content` will be the compiled `.html` file.
-- `siteContext`: Any other data to be provided to the plugin. This can be specified in the `site.json`.
+- `siteContext`: User provided parameters for the plugin. This can be specified in the `site.json`.
 
 MarkBind will call these two functions with the respective content, and retrieve a string data that is used for the next step of the compilation process.
 
-An example of a plugin is shown below. The plugin appends a paragraph of text to a specific div in the markdown files:
+An example of a plugin is shown below. The plugin shows two ways of appending a paragraph of text to a specific div in the markdown files:
 
 ```js
 // myPlugin.js
 
 const cheerio = module.parent.require('cheerio');
 
 module.exports = {
+  preRender: (content, siteContext) => content.replace('<Prerender Placeholder>', `${siteContext.pre}`),
   postRender: (content, siteContext) => {
     const $ = cheerio.load(content, { xmlMode: false });
     // Modify the page...
@@ -85,6 +88,7 @@ module.exports = {
   ],
   "context" : {
     "myPlugin" : {
+      "pre" : "<p>Hello</p>"
       "post" : "<p>Hello</p>"
     }
   }
@@ -95,7 +99,9 @@ module.exports = {
 // index.md
 
 ...
-<div id="my-div"></div>
+<div id="my-div">
+<Prerender Placeholder>
+</div>
 ```
 
 </div>