Tidy up formattingContents user guide page

- Add section on markdown attributes (attributes.mbdf)
- Fix a minor spelling error in formattingContents.md
- Add missing newline at eof (images.mbdf, tables.mbdf)
- Add relative link example using markdown (links.mbdf)
- Add starting list number trick example (lists.mbdf)

docs/userGuide/formattingContents.md

@@ -15,7 +15,7 @@
 
 <span class="lead" id="overview">
 
-**MarkBind supports a wide collection of Markdown-like basic content formatting syntax** such as text stying, tables, lists, images, links, etc.
+**MarkBind supports a wide collection of Markdown-like basic content formatting syntax** such as text styling, tables, lists, images, links, etc.
 
 </span>
 

docs/userGuide/fullSyntaxReference.md

@@ -17,6 +17,7 @@
   links : ['Links', ['basic', 'reader-facing']],
   footnotes: ['Footnotes', ['basic', 'reader-facing']],
   images : ['Images', ['basic', 'reader-facing']],
+  attributes: ['Classes, Attributes & Identifiers', ['basic', 'reader-facing']],
   tables : ['Tables', ['basic', 'reader-facing']],
   emoji : ['Emoji', ['basic', 'reader-facing']],
   icons : ['Icons', ['basic', 'reader-facing']],

docs/userGuide/syntax/attributes.mbdf

@@ -0,0 +1,65 @@
+## Classes, Attributes & Identifiers
+
+Most markdown syntax above this section supports adding classes, attributes and identifiers
+using [pandoc](https://pandoc.org/MANUAL.html) syntax without the need for a wrapper html element.
+
+The syntax is `{.class-name attribute="value" attribute=value #id}`, which is placed at different locations depending
+on the type of markdown.
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">markdown</variable>
+<variable name="code">
+Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)
+by leaving a space before '{' {.text-success #attribute-example}
+
+#### heading {.text-info}
+
+--- {.border-danger}
+
+Apply the same to inline markdown (eg. bold text) by
+omitting the **space**{.text-primary .bg-light attribute=value}
+</variable>
+</include>
+
+Some other types of markdown have **different placements** of the curly group `{...}`. {.mb-4}
+
+****Unordered and Ordered lists****
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">markdown</variable>
+<variable name="code" id="list-example">
+* Apply to the list item itself like so {.text-success #list-item-id}
+  * Curly groups after newlines apply to the closest nested list {.text-danger}
+{.bg-light}
+* Curly groups two lines after the last line apply to the top most list
+
+{.alert-info}
+</variable>
+</include>
+
+****Fenced code blocks****
+
+Refer to the above [section](../formattingContents.html#line-numbering)!
+
+<small>For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs</small>
+
+<box type="warning" seamless>
+Formatting features listed above this section support this syntax for attributes, classes and identifiers.
+Those below this section do not.
+</box>
+
+<!-- Full syntax reference -->
+<span id="short" class="d-none">
+
+```
+add a space before '{' for block level markdown {.class-name attribute="value" attribute=value #id}
+
+don't add a space for **inline**{.text-danger} markdown
+```
+<small>For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs</small>
+</span>
+
+<!-- Reader facing features -->
+<span id="examples" class="d-none">
+<include src="attributes.mbdf#list-example" />
+</span>

docs/userGuide/syntax/images.mbdf

@@ -21,4 +21,4 @@
 <span id="examples" class="d-none">
 
 ![alt text here](https://markbind.org/images/logo-lightbackground.png "title here")
-</span>
+</span>

docs/userGuide/syntax/links.mbdf

@@ -30,10 +30,10 @@ MarkBind home is at [here][1].
 
 Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.
 
-Absolute paths:
+****Absolute paths****
 <div class="indented">
 
-Links should start with {% raw %}`{{ baseUrl }}`{% endraw %} (which represents the root directory of the project). 
+Links should start with {% raw %}`{{ baseUrl }}`{% endraw %} (which represents the root directory of the site).
 
 {{ icon_example }} Here's how to specify a link to (1) a page, and (2) an image, using the {% raw %}`{{ baseUrl }}`:
 
@@ -47,14 +47,14 @@ To ensure that links in the <code>_markbind/</code> folder work correctly across
 {% endraw %}
 </div>
 
-Relative paths:
+****Relative paths****
 
 <div class="indented">
 
 {{ icon_example }} Assuming that we have the following folder structure:
 ```
-c:/course/
-  ├── textbook/
+C:\course\
+  ├── textbook\
   |      ├── subsite.md
   |      ├── image.png
   |      └── site.json
@@ -65,20 +65,21 @@ c:/course/
 Within `textbook/subsite.md`, we can refer to the image using:
 ```html
 <img src="image.png" />
+<!-- or -->
+![](image.png)
 ```
 Within `index.md`, we can also display the image using
 ```html
 <img src="textbook/image.png" />
-```
-or by including `subsite.md`:
-```html
-<include src="textbook/subsite.md" />
+<!-- or -->
+![](textbook/image.png)
 ```
 
-<box type="important">
-    Relative links to resources (e.g. images, hrefs) should be valid relative to the original, included file. In other words, the links should be accessible when traversing starting from the location of the included file.
-    <br>
-    In the example above, <code>image.png</code> is in the same directory as <code>subsite.md</code>. When using relative references, the correct path is <code>image.png</code> and not <code>textbook/image.png</code>.
+<box type="warning">
+
+  Relative links to resources (e.g. images, hrefs) should be valid **relative to the file where the link is defined**.
+
+  In the example above, `image.png` is in the same directory as `subsite.md`. Thus, the correct path is `image.png` and not `textbook/image.png`.
 </box>
 
 </div>
@@ -98,4 +99,4 @@ MarkBind home is at [here][1].
 <span id="examples" class="d-none">
 
 MarkBind home is at [here](https://markbind.org).
-</span>
+</span>

docs/userGuide/syntax/lists.mbdf

@@ -29,6 +29,32 @@
 </variable>
 </include>
 
+<box type="tip" seamless>
+You can also start an ordered list at a particular number by changing the
+<popover>
+first number
+<template slot="content">
+<div style="text-align: center; margin-bottom: 5px;">{{ icon_example }}</div>
+<include src="codeAndOutputSeparate.md" boilerplate>
+<variable name="highlightStyle">markdown</variable>
+<variable name="code">
+10. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+1. Item 2
+</variable>
+<variable name="output">
+10. Item 1
+   1. Sub item 1.1
+   1. Sub item 1.2
+1. Item 2
+{.pl-0 .ml-0}
+</variable>
+</include>
+</template>
+</popover>!
+</box>
+
 <small>More info on above list types: https://www.markdownguide.org/basic-syntax#lists</small>
 
 ****Task lists**** (from GFMD):
@@ -82,4 +108,4 @@
 - [ ] Item 3
 - [x] Item 4
 - ( ) Item 5
-</span>
+</span>

docs/userGuide/syntax/tables.mbdf

@@ -34,4 +34,4 @@ Animal | Trainable?| Price | Remarks
 Ants   | no        | 5     |
 Bees   | no        | 20    |
 Cats|yes|100|
-</span>
+</span>