Formatting Contents

User Guide → Formatting Contents

Formatting Contents

MarkBind supports a wide collection of Markdown-like basic content formatting syntax such as text styling, tables, lists, images, links, etc.

Headings

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

CODE:

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

OUTPUT:

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.

CODE:

This is the first paragraph.

This is another paragraph. This is the second sentence.

OUTPUT:

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.

CODE:

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

OUTPUT:

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


Text Styles

Markdown text styles:

CODE:

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

OUTPUT:

Bold, Italic, Bold and Italic, Inline Code

Additional syntax from GFMD:

CODE:

~~Strike through~~

OUTPUT:

Strike through

Syntax added by MarkBind:

CODE:

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

OUTPUT:

Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript,

Center-align

Additional font colouring syntax:

CODE:

#r#Coloured Text##

OUTPUT:

Coloured Text

Full list of colours:

Letter Colour
r red
g green
b blue
c cyan
m magenta
y yellow
k black
w white

To escape the syntax, simply put a backslash in front of it (e.g. \#b#, \##).

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~

Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript


Blockquotes

CODE:

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

OUTPUT:

Normal text

Blockquote, first paragraph

Second paragraph

Nested quoteblock

Alternatively, you can use <blockquote> tags:

CODE:

Normal text
<blockquote>
Blockquote, first paragraph

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

OUTPUT:

Normal text

Blockquote, first paragraph

Second paragraph

Nested blockquote

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

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

Blockquote, first paragraph

Second paragraph

Nested blockquote


Lists

Unordered lists:

CODE:

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

OUTPUT:

  • Item 1
    • Sub item 1.1
    • Sub item 1.2
      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.

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
    • Item 3.1
  • Item 4
    • Item 4.1
  • Item 5
    • Item 5.1

Customization will be carried over to the other items within the same level of the list. Example:

CODE:

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

OUTPUT:

  • Item 1
    • Item 1.1
  • Item 2

The customised icon appears for Item 2 but not for Item 1.1.

Hence, if you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form. If you wish to remove the customization from the following levels, you can set text and/or icon to be an empty string "".

Example:

CODE:

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

OUTPUT:

  • Item 1
  • Item 2

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 may need to add escape characters when using special characters for Markdown in text.

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

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
    • 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.

CODE:

* 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

OUTPUT:

  • Item 1
  • Item 2
    • 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.

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
  • Item 3

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
  • Item 3

You can utilize any CSS size unit.

You can also use images as icons.

CODE:

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

OUTPUT:

  • Icon​​
    Item 1
  • Icon​​
    Item 2
  • Icon​​
    Item 3

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 can be further customized by adding a i-class and t-class attribute respectively.

CODE:

* 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" }
  * 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" }
  * Item 3.1 
  * Item 3.2  { icon="fas-question-circle" i-class="badge rounded my-1 bg-danger text-white" }
  * Item 3.3

OUTPUT:

  • Icon​​
    Item 1
  • Icon​​
    Item 2
    • Item 2.1
    • Item 2.2
    • Item 2.3
  • Icon​​
    Item 3
    • Item 3.1
    • Item 3.2
    • Item 3.3

The spacing between the icon and the content can be customized by using a i-spacing attribute.

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
  • Item 3

Similar to the icon and text attribute, other icon attributes such as i-class, i-width, i-height, i-spacing, t-size and t-class apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's i-class overrides Item 2.1's and applies up to Item 3.1.

The spacing between the icon and the content can be customized by using a i-spacing attribute.

CODE:

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

OUTPUT:

  • Item 1
  • Item 2
  • Item 3

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

CODE:

* #### 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.

OUTPUT:

  • Icon​​

    Heading 1: Overview

    Content 1: This section provides a summary of the document or topic. It sets the context and purpose of the content to follow.
  • Icon​​

    Heading 2: Detailed Description

    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:

CODE:

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

OUTPUT:

  1. Item 1
    1. Sub item 1.1
    2. Sub item 1.2
  2. Item 2
  3. Item 3
You can also start an ordered list at a particular number by changing the !

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

Task lists (from GFMD):

CODE:

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

OUTPUT:

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

Radio-button lists:

CODE:

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

OUTPUT:

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
  1. Item 1
    1. Sub item 1.1
    2. Sub item 1.2
  • Item 2
    • item 2.1
  • Item 3
  • Item 4

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.

CODE:

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

OUTPUT:

<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:

CODE:

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

OUTPUT:

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

CODE:

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

OUTPUT:

<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.

CODE:

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

OUTPUT:

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

CODE:

```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;
}
```

OUTPUT:

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

Substring highlight

CODE:

```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;
}
```

OUTPUT:

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

Character-bounded highlight

CODE:

```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;
}
```

OUTPUT:

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

Word-bounded highlight

CODE:

```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;
}
```

OUTPUT:

// 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

CODE:

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

OUTPUT:

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

Sample Combined Usage

CODE:

```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);
    }
}
```

OUTPUT:

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:

Type Format Example
Full text highlight
Highlights the entirety of the text portion of the line
The line numbers as-is (subject to the starting line number set in start-from). 3, 5
Substring highlight
Highlights all occurrences of a substring in the line
lineNumber[part]

Limitations: part must be wrapped in quotes. If part contains a quote, escape it with a backslash (\).
3['Inventory'],4['It\'s designed']
Character-bounded highlight
Highlights a specific range of characters in the line
lineNumber[start:end], highlights from character position start up to (but not including) end.

Character positions start from 0 as the first non-whitespace character, upwards.

Omit either start/end to highlight from the start / up to the end, respectively.
19[1:5],30[10:],35[:20]
Word-bounded highlight
Highlights a specific range of words in the line
lineNumber[start::end], highlights from word position start up to (but not including) end.

Word positions start from 0 as the first word (sequence of non-whitespace characters), upwards.

Omit either start/end to highlight from the start / up to the end, respectively.
5[2::4],9[1::],11[::5]
Full line highlight
Highlights the entirety of the line
lineNumber[:] 7[:]

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 (-).

Type Format Example
Ranged full text highlight
Highlights from the first non-whitespace character to the last non-whitespace character
lineStart-lineEnd 2-4
Ranged full line highlight
Like ranged full text highlight, but highlights the entirety of the lines
lineStart[:]-lineEnd or lineStart-lineEnd[:] 1[:]-5,10-12[:]
Ranged character-bounded highlight
Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character
lineStart[start:]-lineEnd or lineStart-lineEnd[:end] 3[2:]-7, 4-9[:17]
Ranged word-bounded highlight
Like ranged character-bounded highlight, but starts/ends at an arbitrary word
lineStart[start::]-lineEnd or lineStart-lineEnd[::end] 16[1::]-20,22-24[::3]
Heading

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

CODE:

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

OUTPUT:

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

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

CODE:

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

OUTPUT:

Bold, Italic, Bold and Italic, Strike through, Super Bold, Underline, Highlight, 👍 ❗️ ❌ 🚧
We support page breaks
<foo></foo>
Using multiple features

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

CODE:

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

OUTPUT:

Heading title
<foo>
  <bar type="name">goo</bar>
</foo>
Copy button

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

User Guide: Using Plugins → Plugin: codeBlockCopyButtons



Wrap text button

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

User Guide: Using Plugins → Plugin: codeBlockWrapButtons



Printing optimization
Markbind enhances the readability of your code blocks for printing by
  • Applying soft wrapping, ensuring code doesn't get cut off
  • Adding line numbers to maintain context when wrapping occurs
  • Automatically changing dark code theme to light
  • Removing codeBlockCopyButtons and codeBlockWrapButtons
There are some issues with printing in Firefox. Please use other browsers such as Chrome if these issues persist.

Inline Code

Syntax coloring

MarkBind can apply syntax-coloring on inline code too.

CODE:

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

OUTPUT:

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

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>

Syntax coloring for inline code: <bar type="name">goo</bar> too!


Horizontal Rules

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

CODE:

*****
-----
______________

OUTPUT:




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

CODE:

--- {.dotted}

--- {.dashed}

--- {.double}

OUTPUT:




Available size classes:

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

CODE:

--- {.thick}

--- {.thick-1}

--- {.thick-2}

--- {.thick-3}

OUTPUT:





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

  • border-info
  • border-primary
  • etc

CODE:

--- {.border-primary}

--- {.border-secondary}

--- {.border-danger}

--- {.border-info}

--- {.border-success}

OUTPUT:






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

CODE:

--- {.dashed .thick-3}

--- {.double .border-secondary}

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

OUTPUT:




*****
-----
______________


Basic style:

CODE:

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

OUTPUT:

MarkBind home is at here.

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

CODE:

MarkBind home is at [here][1].

[1]: https://markbind.org

OUTPUT:

MarkBind home is at here.

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

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

CODE:

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

OUTPUT:

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://markbind.org

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

MarkBind home is at [here][1].

[1]: https://markbind.org

MarkBind home is at here.


Footnotes

CODE:

**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.]

OUTPUT:

Normal footnotes: Here is a footnote reference,[1] and another.[2]

Inline footnotes: Here is an inline note.[3]

Normal footnotes won't work when used inside the attributes of MarkBind components!
For example, it won't work in the header attribute of panels.

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

1 + 1 = 2 [1]


Images

CODE:

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

OUTPUT:

URLs can be specified as relative references. More info in: Intra-Site Links
![alt text here](https://markbind.org/images/logo-lightbackground.png "title here")

alt text here

Adjusting image dimension

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

CODE:

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

OUTPUT:

This image has a width of 100px:

The width of images cannot exceed that of their parent container. If the specified width is too large, it will be ignored.

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.

CODE:

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

OUTPUT:

Click on the image to open the image: logo

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

CODE:

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)

OUTPUT:

Clicking on this image will bring you to the MarkBind homepage (instead of opening the image): logo

If you want to display images with captions, or have the image auto-resize to fit its container, take a look at MarkBind's pic component.


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.

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

OUTPUT:

Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings) by leaving a space before '{'

heading


Apply the same to inline markdown (eg. bold text) by omitting the space

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

Unordered and Ordered lists

CODE:

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

OUTPUT:

  • Apply to the list item itself like so
    • Curly groups after newlines apply to the closest nested list
  • Curly groups two lines after the last line apply to the top most list

Fenced code blocks

Refer to the above section!

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

Formatting features listed above this section support this syntax for attributes, classes and identifiers. Those below this section do not.
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

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

  • Apply to the list item itself like so
    • Curly groups after newlines apply to the closest nested list
  • Curly groups two lines after the last line apply to the top most list

Tables

CODE:

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

OUTPUT:

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|
Animal Trainable? Price Remarks
Ants no 5
Bees no 20
Cats yes 100

Emoji

CODE:

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

OUTPUT:

👍 ❗️ ❌ 🚧 😃 😕 😄

The list of supported emoji and emoticon shortcuts.

:+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.

The advantage of font icons over emojis is font icons can be styled to fit your needs. e.g.,

  • emoji: Don't judge the 📖 by its cover! 👎
  • font icons: Don't judge the by its cover!
Using Font Awesome Icons

MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed changes between versions, refer to Font Awesome's documentation.

  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!

:glyphicon-hand-right: :fa-brands-github: :fa-solid-home:

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. (actual name Perm Media, MarkBind name mif-perm-media)
    • Outlined (prefix: mio-) e.g., (actual name Perm Media, MarkBind name mio-perm-media)
    • Rounded (prefix: mir-): e.g., (actual name Perm Media, MarkBind name mir-perm-media)
    • Sharp (prefix: mis-): e.g., (actual name Perm Media, MarkBind name mis-perm-media)
    • Two tone (prefix: mit-): e.g., (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


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.

CODE:

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

OUTPUT:

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:

CODE:

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

OUTPUT:

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

Embedded slide deck:


Dates

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

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

20 days after 1st Jan 2020:

{{ "2020-01-01" | date("ddd, Do MMM, YYYY", 20) }} Tue, 21st Jan, 2020

The baseDate follows the format: YYYY-MM-DD

The default output format is "ddd D MMM" e.g. Fri 6 Mar

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

Brief reference


Full formatting reference available here and here.

CODE:

{% set base1 = "2019-08-12" %}
{% set format1 = "DD MM YYYY" %}
{% set format2 = "ddd Do MM" %}
{{ base1 | date }}
{{ base1 | date(format1) }}
{{ base1 | date(format1, 10) }}
{{ base1 | date(format2, 10) }}

OUTPUT:

Mon 12 Aug
12 08 2019
22 08 2019
Thu 22/08

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

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)

CODE:

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$.

OUTPUT:

Solve the following simultaneous equations:

3x+y=11 3x + y = 11 (1)
2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

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

4x+5y=16 4x + 5y = 16 (3)
10x3+5y3=8\frac{10x}{3} + \frac{5y}{3} = 8(4)

Finally, the Pythagoras theorem: c2=a2+b2c^2 = a^2 + b^2.

Additional delimiters are possible by enabling the mathDelimiters plugin.

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

{% 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.

Solve the following simultaneous equations:

3x+y=11 3x + y = 11 (1)
2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

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


Relevant Tips & Tricks

Escaping Characters




  1. Here is the footnote. Footnotes will appear at the bottom of the page.

  2. Here's one with multiple blocks.

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

  3. Inline notes are easier to write, since you don't have to pick an identifier and move down to type the note.

  4. Math