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

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, Super^script, Sub_script

Center-align

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

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

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:

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

Radio-button lists:

CODE:

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

OUTPUT:

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

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

CODE:

```java {.line-numbers 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

Wrap text button

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

User Guide: Using Plugins → Plugin: codeBlockWrapButtons

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:

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

*****
-----
______________

Links

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

Autolinks

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

Intra-Site Links

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.

Auto-conversion of extension

You may link to markdown files using its original extension (.md) as it will automatically be converted to a html extension (.html) when the site is generated.

Example Click [here](index.md) --- auto-conversion ---> Click [here](index.html)

If you wish to disable the auto-conversion, you may use the no-convert attribute in your link.

Example Click [here](index.md){no-convert}

Absolute paths

Links should start with {{ baseUrl }} (which represents the root directory of the site).

Example Here's how to specify a link to (1) a page, and (2) an image, using the {{ baseUrl }}:

Click [here]({{ baseUrl }}/userGuide/reusingContents.html).
![]({{ baseUrl }}/images/preview.png)

To ensure that links in the _markbind/ folder work correctly across the entire site, they should be written as absolute paths, prepended with {{ baseUrl }}.

Relative paths

Example Assuming that we have the following folder structure:

C:\course
├── textbook\ │ ├── subsite.md │ ├── image.png │ └── site.json ├── index.md └── site.json

Within textbook/subsite.md, we can refer to the image using:

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

Within index.md, we can also display the image using

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

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.

Link validation

Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.

Disabling link validation

Link validation is enabled by default.

If you wish to only disable validation for a specific link, you may use the no-validation attribute.

Example Click [here](index.md){no-validation}

However, if you wish to disable this feature entirely, you may simply modify your site.json like this .

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

MarkBind home is at [here][1].

[1]: https://markbind.org

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.

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

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.

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

Tables

CODE:

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

OUTPUT:

Animal	Trainable?	Price
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

CODE:

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

OUTPUT:

👍 ❗️ ❌ 🚧

the list of supported emoji.

:+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, 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 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 its cover! 👎
font icons: Don't judge the by its 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

Decide which icon you want to use from the list of available icons.
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)
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

Decide which icon you want to use from list of provided glyphicons.
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

Decide which icon you want to use from list of available Octicons.
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
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.
If your background is dark, you may use :octiconlight-*: to render the icon as white.

Using Material Icons

Decide which icon you want to use from list of available icons.
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)
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)

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.

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 in square brackets and the equation number in round 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

(1)

\frac{2x}{3} + \frac{2y}{3} = 8

(2)

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

If you would like to use as the delimiter, you will need to enable the texWithDollars plugin.

$2_3$

$$
\frac{1}{2}
$$

The above will be rendered as:

$2_3$

\frac{1}{2}

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.

Relevant Tips & Tricks

Escaping Characters

MarkBind Syntax Overview

Using Components

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.