Headings

You can prepend the heading text with 1-6 # characters to indicate headings of levels 1-6.

### Heading level 3
...
###### Heading level 6

    

      


    
    
    

    


    
    

MarkBind auto-generates anchors for all headings.
If the heading text is Foo Bar (Goo), the ID of the generated anchor will be foo-bar-goo (all lower case, special characters omitted, joined by -).

Alternative syntax, more info: https://www.markdownguide.org/basic-syntax#headings

### Heading level 3
...
###### Heading level 6

    

      


    
    
    

    


    
    

### Heading level 3
...
###### Heading level 6

    

      


    
    
    

    


    
    

Paragraphs

Use one or more empty lines to separate paragraphs.

This is the first paragraph.

This is another paragraph. This is the second sentence.

    

      


    
    
    

    


    
    

This is the first paragraph.

This is another paragraph. This is the second sentence.

    

      


    
    
    

    


    
    

Line Breaks

The preferred way to indicate line breaks is to use a <br> tag.

This is the second sentence.<br>
This should be on a new line.
This will not be in a new line.

    

      


    
    
    

    


    
    

Text Styles

Markdown text styles:

**Bold**, _Italic_, ___Bold and Italic___, `Inline Code`

    

      


    
    
    

    


    
    

Additional syntax from GFMD:

~~Strike through~~

    

      


    
    
    

    


    
    

Syntax added by MarkBind:

****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--,
Super^script^, Sub~script~,
->Center-align<-

    

      


    
    
    

    


    
    

Additional font colouring syntax:

#r#Coloured Text##

    

      


    
    
    

    


    
    

Alternative syntax: https://www.markdownguide.org/basic-syntax#emphasis

**Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~

    

      


    
    
    

    


    
    

Blockquotes

Normal text
> Blockquote, first paragraph
>
> Second paragraph
>> Nested quoteblock

    

      


    
    
    

    


    
    

Alternatively, you can use <blockquote> tags:

Normal text
<blockquote>
Blockquote, first paragraph

Second paragraph
<blockquote>
Nested blockquote
</blockquote>
</blockquote>

    

      


    
    
    

    


    
    

More info: https://www.markdownguide.org/basic-syntax#blockquotes-1

> Blockquote, first paragraph
>
> Second paragraph
>> Nested blockquote

    

      


    
    
    

    


    
    

Lists

Unordered lists:

* Item 1
  * Sub item 1.1
  * Sub item 1.2<br>
    Second line
    * Sub item 1.2.1
* Item 2
* Item 3

    

      


    
    
    

    


    
    

Customizing the Unordered list appearance:

To customize unordered lists' icons, add the configuration {icon="icon-name"} and/or {text="text"} after a specific list item.

* Item 1 { text="Step 1 :+1:" icon="glyphicon-education" }
* Item 2 { text="Step 2" }
  * Item 2.1 { icon="fas-file-code" }
  * Item 2.2
* Item 3 { text="Step 3" }
  * Item 3.1 
* Item 4 { text="\`PR`" icon="octicon-git-pull-request" }
  * Item 4.1 { icon="mif-perm-media" }
* Item 5 { text="Step 5" icon="glyphicon-education" }
  * Item 5.1 { icon="notebook_with_decorative_cover" }

    

      


    
    
    

    


    
    

You can also use {texts="['text1', 'text2', 'text3']"} syntax to add text customisation to a level quickly

* Item 1 { texts="['(a)','(b)','(c)','(d)']" }
  * sub level not applied as per norm
* Item 2
* You can override once like this { text="OverrideOnce" once=true }
* Item 3
* Item 4
* Last text config will be applied when the list length exceeds texts
* Another last text
* You can override like this { text="OVERRIDE" }
* Another overrided text

    

      


    
    
    

    


    
    

* Item 1 { icon="glyphicon-education" }
  * Item 1.1
* Item 2

    

      


    
    
    

    


    
    

* Item 1 { icon="glyphicon-education" text="Only for this bullet" }
* Item 2 { icon="" }

    

      


    
    
    

    


    
    

You can use any of the icons supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level.

Markdown can also be used in texts.

You can add an icon or text that only applies to a specific item by using the once attribute.

* Item 1 { icon="glyphicon-education" }
* Item 2 { icon="fas-code-branch" once=true }
  * Item 2.1
  * Item 2.2
* Item 3

    

      


    
    
    

    


    
    

Subsequent items at the same level will not inherit icons or texts with the once attribute and will instead inherit the icons or texts before it.

The once attribute also applies to all other attributes such as i-size and t-size as seen below.

* Item 1 { icon="glyphicon-education" i-size="40px" i-class="text-primary" }
* Item 2 { i-size="25px" once=true }
  * Sub-item 2.1
* Item 3

    

      


    
    
    

    


    
    

You can adjust the icon and text's size by using the i-size and t-size attribute respectively.

* Item 1 { icon="fas-file-code" i-size="35px" }
* Item 2 { icon="fas-file-code" i-size="4rem" }
* Item 3 { icon="fas-file-code" i-size="5em" }

    

      


    
    
    

    


    
    

* Item 1 { text="Step 1" t-size="35px" }
* Item 2 { text="Step 2" t-size="4rem" }
* Item 3 { text="Step 3" t-size="5em" }

    

      


    
    
    

    


    
    

You can utilize any CSS size unit.

You can also use images as icons.

* Item 1 { icon="/images/deer.jpg" i-width="30px" }
* Item 2 { i-width="60px" i-height="44px" }
* Item 3 { i-width="90px" i-height="61px" }

    

      


    
    
    

    


    
    

If either the i-width or the i-height of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if i-width is set to 400px, its height will be 300px.

The icon and text's appearance by adding a i-class and t-class attribute respectively.

* Item 1 { icon="/images/deer.jpg" text="Deer" i-width="60px" height="17px" i-class="rounded" t-class="text-warning my-2" }
* Item 2 { t-class="text-info my-2 fw-bold" }
  * Item 2.1 { icon="fas-question-circle" i-class="badge rounded-pill my-1 bg-success text-white" }
  * Item 2.2
  * Item 2.3 { i-class="badge rounded-pill my-1 bg-primary text-white"}
* Item 3 { t-class="text-primary my-2 fst-italic" }
  * Item 3.1 
  * Item 3.2  { icon="fas-question-circle" i-class="badge rounded my-1 bg-danger text-white" }
  * Item 3.3

    

      


    
    
    

    


    
    

* Item 1 { icon="+1" }
* Item 2 { i-spacing="1rem" }
* Item 3 { i-spacing="2rem" }

    

      


    
    
    

    


    
    

* Item 1 { icon="+1" text="Yay" }
* Item 2 { i-spacing="1rem" }
* Item 3 { i-spacing="2rem" }

    

      


    
    
    

    


    
    

You can apply Markdown's heading and paragraph syntax within the list.

* #### Heading 1: Overview {icon="/images/overview-d.png" i-width="65px" i-class="rounded" }
   Content 1: This section provides a summary of the document or topic. 
   It sets the context and purpose of the content to follow.
* #### Heading 2: Detailed Description { icon="/images/detailed-d.png" i-width="65px" i-class="rounded" }
   Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations.
   It might also include evidence, examples, or justifications.

    

      


    
    
    

    


    
    

Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading).

Ordered lists:

1. Item 1
   1. Sub item 1.1
   2. Sub item 1.2
2. Item 2
3. Item 3

    

      


    
    
    

    


    
    

More info on above list types: https://www.markdownguide.org/basic-syntax#lists

Task lists (from GFMD):

- [ ] Item 1
   - [ ] Sub item 1.1
   - [x] Sub item 1.2
- [x] Item 2
- [ ] Item 3

    

      


    
    
    

    


    
    

Radio-button lists:

- ( ) Item 1
- ( ) Item 2
- (x) Item 3

    

      


    
    
    

    


    
    

1. Item 1
   1. Sub item 1.1
   1. Sub item 1.2
* Item 2
  * item 2.1
- [ ] Item 3
- [x] Item 4
- ( ) Item 5

    

      


    
    
    

    


    
    

Code

Themes

MarkBind can present formatted code blocks, be it fenced or inline, with either light or dark themes. The default is dark (click for an example).

Refer here for configuring MarkBind to use a specific theme for the code blocks.

Fenced Code

MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's fenced code blocks.

More info: https://www.markdownguide.org/extended-syntax#fenced-code-blocks

Features:

• Syntax coloring
• Line numbering
• Line highlighting
• Code block headers

Syntax coloring

To enable syntax coloring, specify a language next to the backticks before the fenced code block.

```xml
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

Line numbering

Line numbers are . To enable line numbers for the entire site by default, add "codeLineNumbers": true to the site.json file:

{
  // ...
  "style": {
    "bootstrapTheme": "bootswatch-cerulean",
    "codeTheme": "light",
    "codeLineNumbers": true // optional, false if omitted
  }
  // code below omitted for brevity
}

    

      


    
    
    

    


    
    

For each code block, you may also use the line-numbers or no-line-numbers classes to override the site-wide setting as such:

```xml {.line-numbers}
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

```xml {.no-line-numbers}
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

You can have your line numbers start with a value other than 1 with the start-from attribute.

```js {start-from=6}
function add(a, b) {
    return a + b;
}
```

    

      


    
    
    

    


    
    

function add(a, b) {
    return a + b;
}

    

      


    
    
    

    


    
    

Line highlighting

You can add the highlight-lines attribute to add highlighting to your code block. Refer to the examples below for a visual demonstration of all the possible ways of highlighting a code block.

Full text highlight

```js {start-from=6 .line-numbers highlight-lines="7, 9"}
function add(a, b) {
    const sum = a + b;
    console.log(`${a} + ${b} = ${sum}`);
    return sum;
}
```

    

      


    
    
    

    


    
    

function add(a, b) {
    const sum = a + b;
    console.log(`${a} + ${b} = ${sum}`);
    return sum;
}

    

      


    
    
    

    


    
    

Substring highlight

```js {.line-numbers highlight-lines="1['function'], 2['a'], 2['b'], 4['diff']"}
function subtract(a, b) {
    const diff = a - b;
    console.log(`${a} + ${b} = ${diff}`);
    return diff;
}
```

    

      


    
    
    

    


    
    

function subtract(a, b) {
    const diff = a - b;
    console.log(`${a} + ${b} = ${diff}`);
    return diff;
}

    

      


    
    
    

    


    
    

Character-bounded highlight

```js {.line-numbers highlight-lines="1[0:3], 1[6:10], 2[5:], 3[:6]"}
function multiply(a, b) {
    const product = a * b;
    console.log('Product = ${product}');
    return product;
}
```

    

      


    
    
    

    


    
    

function multiply(a, b) {
    const product = a * b;
    console.log('Product = ${product}');
    return product;
}

    

      


    
    
    

    


    
    

Word-bounded highlight

```js {.line-numbers highlight-lines="1[1::3], 1[5::7], 2[2::], 3[::3]"}
// Function returns the distance travelled assuming constant speed
function calculateDistance(speed, time) {
    const distance = speed * time;
    console.log(`Distance travelled = ${distance}`);
    return distance;
}
```

    

      


    
    
    

    


    
    

// Function returns the distance travelled assuming constant speed
function calculateDistance(speed, time) {
    const distance = speed * time;
    console.log(`Distance travelled = ${distance}`);
    return distance;
}

    

      


    
    
    

    


    
    

Full-line highlight

```js {start-from=10 .line-numbers highlight-lines="11[:]"}
function add(a, b) {
    return a + b;
}
```

    

      


    
    
    

    


    
    

function add(a, b) {
    return a + b;
}

    

      


    
    
    

    


    
    

Sample Combined Usage

```java {.line-numbers highlight-lines="1[:],3['Inventory'],3[4::6],4['It\'s designed'],5,6[8:15],6[18:],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26"}
import java.util.List;

// Inventory is a class that stores inventory items in a list.
// It's designed as a thin wrapper on the List interface.
public class Inventory {
    private List<Item> items;

    public int getItemCount(){
        return items.size();
    }

    public bool isEmpty() {
        return items.isEmpty();
    }

    public Item getItem(idx: int) {
        return items.get(idx);
    }

    public void addItem(item: Item) {
        return items.add(item);
    }

    public void removeItem(item: Item) {
        return items.remove(item);
    }
}
```

    

      


    
    
    

    


    
    

import java.util.List;

// Inventory is a class that stores inventory items in a list.
// It's designed as a thin wrapper on the List interface.
public class Inventory {
    private List<Item> items;

    public int getItemCount(){
        return items.size();
    }

    public bool isEmpty() {
        return items.isEmpty();
    }

    public Item getItem(idx: int) {
        return items.get(idx);
    }

    public void addItem(item: Item) {
        return items.add(item);
    }

    public void removeItem(item: Item) {
        return items.remove(item);
    }
}

    

      


    
    
    

    


    
    

The value of highlight-lines is composed of highlight rules, separated by commas. These rules dictate where and how MarkBind should highlight your code block.

You can specify the highlight rules in many different ways, each is detailed as follows:

Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax for range highlighting consists of two single line highlight rules as listed above joined by a dash (-).

Heading

To add a heading, add the attribute heading with the heading text as the value, as shown below.

```xml {heading="Heading title"}
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

Headings support inline Markdown, except for Inline Code and Dim text styles.

```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
<foo></foo>
```

    

      


    
    
    

    


    
    

<foo></foo>

    

      


    
    
    

    


    
    

Using multiple features

You can also use multiple features together, as shown below.

```xml {highlight-lines="2" heading="Heading title"}
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

Copy button

A copy button can be added to code blocks using the codeBlockCopyButtons plugin:

Wrap text button

A wrap text button can be added to code blocks using the codeBlockWrapButtons plugin:

Printing optimization

Inline Code

Syntax coloring

MarkBind can apply syntax-coloring on inline code too.

Consider the XML code `<bar type="name">goo</bar>`{.xml},<br>
or the java code `public static void main(String[] args)`{.java}.

    

      


    
    
    

    


    
    

Displaying content within curly braces: {{ content }}

If your code contains special Nunjucks tags like {{ or }}, use a raw-endraw block:

{% raw %} {{ content }} {% endraw %}

    

      


    
    
    

    


    
    

```xml
<foo>
  <bar type="name">goo</bar>
</foo>
```

    

      


    
    
    

    


    
    

`<bar type="name">goo</bar>`{.xml}

    

      


    
    
    

    


    
    

<foo>
  <bar type="name">goo</bar>
</foo>

    

      


    
    
    

    


    
    

Horizontal Rules

Use three or more asterisks (***), dashes (---), or underscores (___) to indicate a horizontal line.

*****
-----
______________

    

      


    
    
    

    


    
    

Different Types Of Horizontal Rules

Add additional classes to modify the style, thickness, and color of a horizontal line.

Available style classes:

• dotted
• dashed
• double

--- {.dotted}

--- {.dashed}

--- {.double}

    

      


    
    
    

    


    
    

Available size classes:

• thick
• thick-1
• thick-2
• thick-3

--- {.thick}

--- {.thick-1}

--- {.thick-2}

--- {.thick-3}

    

      


    
    
    

    


    
    

Available color classes (use any of the available Bootstrap border color classes):

• border-info
• border-primary
• etc

--- {.border-primary}

--- {.border-secondary}

--- {.border-danger}

--- {.border-info}

--- {.border-success}

    

      


    
    
    

    


    
    

Add a combination of the above classes to further customize the style of a horizontal line.

--- {.dashed .thick-3}

--- {.double .border-secondary}

--- {.dotted .thick-1 .border-primary}

    

      


    
    
    

    


    
    

*****
-----
______________

    

      


    
    
    

    


    
    

Links

Basic style:

MarkBind home is at [here](https://markbind.org).

    

      


    
    
    

    


    
    

Reference style links (i.e., specify the URL in a separate place):

MarkBind home is at [here][1].

[1]: https://markbind.org

    

      


    
    
    

    


    
    

More info: https://www.markdownguide.org/basic-syntax#links

Autolinks

A or an email address in plain text will be auto converted into clickable links.

**These will be converted:**

https://www.google.com

https://markbind.org

foobar@gmail.com

**These will not be converted:**

google.com

markbind.org

foo@bar

**Tricks to prevent autolink:**

`https://markbind.org`

https://<span></span>markbind.org

    

      


    
    
    

    


    
    

Intra-Site Links

<img src="image.png" />
<!-- or -->
![](image.png)

    

      


    
    
    

    


    
    

<img src="textbook/image.png" />
<!-- or -->
![](textbook/image.png)

    

      


    
    
    

    


    
    

MarkBind home is at [here](https://markbind.org).

MarkBind home is at [here][1].

[1]: https://markbind.org

    

      


    
    
    

    


    
    

Footnotes

**Normal footnotes:**
Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.


**Inline footnotes:**
Here is an inline note.^[Inline notes are easier to write, since
you don't have to pick an identifier and move down to type the
note.]

    

      


    
    
    

    


    
    

**Normal footnotes:**
Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.

[^longnote]: Here's one with multiple blocks.
    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

    

      


    
    
    

    


    
    

Images

![](https://markbind.org/images/logo-lightbackground.png)

    

      


    
    
    

    


    
    

![alt text here](https://markbind.org/images/logo-lightbackground.png "title here")

    

      


    
    
    

    


    
    

Adjusting image dimension

MarkBind also supports the =Wx shorthand for specifying image width:

This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)

    

      


    
    
    

    


    
    

MarkBind does not support setting the height of images through the =WxH or =xH syntax. This is because images are automatically resized to ensure responsiveness based on their width.

Auto-linkify

MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full image.

Click on the image to open the image: ![logo](https://markbind.org/images/logo-lightbackground.png =150x)

    

      


    
    
    

    


    
    

If the image is wrapped with a link, the link will be used instead.

Clicking on this image will bring you to the MarkBind homepage (instead of opening the image):
[![logo](https://markbind.org/images/logo-lightbackground.png =150x)](https://markbind.org)

    

      


    
    
    

    


    
    

Classes, Attributes & Identifiers

Most markdown syntax above this section supports adding classes, attributes and identifiers using pandoc 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.

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 header="attributes example"}
<!-- Use inspect element on the **space** word below to see the "header" attribute! -->

    

      


    
    
    

    


    
    

Some other types of markdown have different placements of the curly group {...}.

Unordered and Ordered lists

* 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}

    

      


    
    
    

    


    
    

Fenced code blocks

Refer to the above section!

For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs

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

    

      


    
    
    

    


    
    

Tables

Animal | Trainable?| Price | Remarks
:----- | :-------: | ----: | ----
Ants   | no        | 5     |
Bees   | no        | 20    |
Cats|yes|100|

    

      


    
    
    

    


    
    

• Colons (:) in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.
• There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.

More info: https://www.markdownguide.org/extended-syntax#tables

Animal | Trainable?| Price | Remarks
:----- | :-------: | ----: | ----
Ants   | no        | 5     |
Bees   | no        | 20    |
Cats|yes|100|

    

      


    
    
    

    


    
    

Emoji

:+1: :exclamation: :x: :construction: :) :/ :D

    

      


    
    
    

    


    
    

:+1: :exclamation: :x: :construction: :) :/ :D

    

      


    
    
    

    


    
    

Icons

Acknowledgement: Font Awesome icons are provided by Font Awesome under their free license, Glyphicons are provided by Glyphicons via Bootstrap 3. Bootstrap icons are designed by @mdo, maintained by the Bootstrap Team and provided under MIT liscense. Octicons are copyright of GitHub, and Material icons are provided by Google Fonts via material-icons by Ravindra Marella under the Apache license 2.0.

MarkBind supports using Font Icons provided by Font Awesome, Glyphicons, GitHub's Octicons and Bootstrap icons.

Using Font Awesome Icons

1. Decide which icon you want to use from the list of available icons.

2. Construct the MarkBind name for the selected icon by adding the type prefix. Note: Font Awesome has two different styles for their icons, each with their own type prefix. Here is an example from each type:

   • Solid (prefix: fa-solid-) e.g., (actual name file-code, MarkBind name fa-solid-file-code)
   • Brands (prefix: fa-brands-): e.g., (actual name github-alt, MarkBind name fa-brands-github-alt)

3. Insert MarkBind name for the icon enclosed within colons to get the icon in your page.
   Create a **branch**:fas-code-branch: now! → Create a branch now!

Using Glyphicons

1. Decide which icon you want to use from list of provided glyphicons.
2. Insert the name for the icon enclosed within colons to get the icon in your page.
   Move to the right!:glyphicon-hand-right: → Move to the right!

Using Octicons

1. Decide which icon you want to use from list of available Octicons.
2. Insert the name for the icon enclosed within colons to get the icon in your page.
   Merge a **pull request** :octicon-git-pull-request: → Merge a pull request
3. You may also append ~class-name to the end of the octicon name to add class="class-name" property to your Octicon (e.g. :octicon-git-pull-request~icon-large-red: will generate an Octicon of class icon-large-red). You may then add corresponding CSS to {root}/_markbind/layouts/{layout-name}/styles.css to customize the style of your Octicon.
4. If your background is dark, you may use :octiconlight-*: to render the icon as white.

Using Bootstrap icons

1. Decide which icon you want to use from list of available Bootstrap icons.
2. Insert the name for the icon enclosed within colons to get the icon in your page.
   Add a romantic touch with :bi-arrow-through-heart: → Add a romantic touch with

Using Material Icons

1. Decide which icon you want to use from list of available icons.

2. Construct the MarkBind name for the selected icon by writing the icon name in lowercase letters only, replacing any spaces between the words in the name with dashes (-), then adding the type prefix. Note: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:

   • Filled (prefix: mif-) e.g. perm_media (actual name Perm Media, MarkBind name mif-perm-media)
   • Outlined (prefix: mio-) e.g., perm_media (actual name Perm Media, MarkBind name mio-perm-media)
   • Rounded (prefix: mir-): e.g., perm_media (actual name Perm Media, MarkBind name mir-perm-media)
   • Sharp (prefix: mis-): e.g., perm_media (actual name Perm Media, MarkBind name mis-perm-media)
   • Two tone (prefix: mit-): e.g., perm_media (actual name Perm Media, MarkBind name mit-perm-media)

3. Insert the name for the icon enclosed within colons to get the icon in your page.
   Download from Cloud :mio-cloud-download: → Download from Cloud cloud_download

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.

@[youtube](v40b3ExbM0c)
@[youtube](http://www.youtube.com/watch?v=v40b3ExbM0c)
@[youtube](http://youtu.be/v40b3ExbM0c)

    

      


    
    
    

    


    
    

More media blocks, embedding services and additional options can be found in Markdown-it documentation.

Embedding PowerPoint Slides (using the embed URL from PowerPoint online)

Here is an example of embedding a PowerPoint slide deck:

@[powerpoint](https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2)

    

      


    
    
    

    


    
    

@[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)

    

      


    
    
    

    


    
    

Dates

MarkBind supports date formatting and simple calculations as a Nunjucks filter.

Syntax: {{ baseDate | date(format, daysToAdd) }}

Using variables

{% set base1 = "2020-01-01" %}
{% set format1 = "DD MM YYYY" %}
{% set format2 = "ddd Do MMM (DD/MM/YYYY)" %}

{{ base1 | date }} Wed 1 Jan

Custom formatting

{{ base1 | date(format1) }} 01 01 2020

Adding days

{{ base1 | date(format2, 0) }} Wed 1st Jan (01/01/2020)
{{ base1 | date(format2, 10) }} Sat 11th Jan (11/01/2020)

Nunjucks variables

Dates can be supplied using Nunjucks variables for convenience.

Inside the .md file of a page:

{% set date_pagevar = "2020-03-06" %}

    

      


    
    
    

    


    
    

{{ date_pagevar | date(format2) }} Fri 6th Mar (06/03/2020)

Advanced Formatting

The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.

Default format: "ddd D MMM" e.g. Fri 6 Mar

Full formatting reference available here and here.

Math Formulae

MarkBind supports typesetting TeX math equations. KaTeX is used as a fast math renderer.

Two types of delimiters are supported and can be used interchangeably:

• 'dollars'
  • Insert inline equations by enclosing them in $...$ or $$...$$
  • Insert display equations by enclosing them in $$...$$
  • Insert display + equation number: $$...$$ (1)
• 'brackets'
  • Insert inline equations by enclosing them in \(...\)
  • Insert display equations by enclosing them in \[...\]
  • Insert display + equation number: \[...\] (1)

Solve the following simultaneous equations:

\[ 3x + y = 11 \] (1)

\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)

Euler's equation \(e^{i\pi}+1=0\) is a beautiful equation.

$$ 4x + 5y = 16 $$ (3)

$$\frac{10x}{3} + \frac{5y}{3} = 8$$ (4)

Finally, the Pythagoras theorem: $c^2 = a^2 + b^2$.

    

      


    
    
    

    


    
    

Additional delimiters are possible by enabling the mathDelimiters plugin.

{% raw %}

\(e^{{\frac{1}{3}} + 1}\)

{% endraw %}

    

      


    
    
    

    


    
    

More info on allowed symbols: https://katex.org/docs/support_table.html

Solve the following simultaneous equations:

\[ 3x + y = 11 \] (1)

\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)

Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.