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~

OUTPUT:

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

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

Ordered lists:

CODE:

1. Item 1
   1. Sub item 1.1
   1. Sub item 1.2
1. Item 2
1. 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 first number
Example

CODE:

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

OUTPUT:

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

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.

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 provided by default. To hide line numbers, add the class no-line-numbers to the code block as below

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 example code block below for a visual demonstration of all the possible ways of highlighting a code block.

CODE:

```java {highlight-lines="1[:],3['Inventory'],4['It\'s designed'],5,6[8: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



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

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




*****
-----
______________


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

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.^[Inlines 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 ^[Math]

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")


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

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:

OUTPUT:

👍 ❗️ ❌ 🚧

:+1: :exclamation: :x: :construction:

👍 ❗️ ❌ 🚧


Icons

Acknowledgement: Font Awesome icons are provided by Font Awesome under their free license, Glyphicons are provided by Glyphicons via Bootstrap 3, and Octicons are copyright of GitHub.

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

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 it's cover! 👎
  • font icons: Don't judge the by it's cover!

The syntax for icons has changed, and the earlier {{ prefix_name }} syntax has been deprecated.
Please use the new :prefix-name: syntax instead.

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 three different styles for their icons, each with their own type prefix. Here is an example from each type:

    • Solid (prefix: fas-) e.g., (actual name file-code, MarkBind name fas-file-code)
    • Regular (prefix: far-) e.g., (actual name file-code, MarkBind name far-file-code)
    • Brands (prefix: fab-): e.g., (actual name github-alt, MarkBind name fab-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: :fab-github: :fas-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.

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)

Page variables

Dates can be supplied using page variables for convenience.

Inside variables.md or referencing 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.

Example

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

{{ "2019-08-12" | date("DD.MM.YYYY", 10) }} ``

22.08.2019


Math Formulae

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

Insert inline equations by enclosing them in round brackets \( ... \).

Insert display equations by enclosing them in square brackets \[ ... \].

Insert numbered display equations by enclosing the equation square brackets and the equation number in curly brackets \[ ... \] (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.

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=0 e^{i\pi}+1=0 is a beautiful equation.

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




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

    Here's one with multiple blocks.

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

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

  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. Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.