• HOME
  • USER GUIDE
  • SHOWCASE
  • ABOUT
  • 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 ommitted, joined by -).

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

    ```markdown ### 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%%, Super^script^, Sub~script~
    

    OUTPUT:

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

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

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

    Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim, 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

    To highlight lines, add the attribute highlight-lines as shown below.

    You can specify highlighting in many different ways, depending on how you want it to be. There are two main variants:

    Text-only highlighting

    To highlight only the text portion of the line, you can just use the line numbers as is.

    For ranges of lines, join the two line numbers with a dash sign (-).

    Whole-line highlighting

    If you wish to highlight a full line (including whitespaces) or ranges of it, you can leverage MarkBind's own line-slice syntax. Line-slices are in the form of lineNumber[:], e.g. 2[:].

    This variant's format is very similar to the previous, but instead use line-slices rather than line numbers.

    For ranges, you only need to use line-slices on either ends.

    CODE:

    ```java {highlight-lines="1,3[:],6-8,10[:]-12"}
    import java.util.List;
    
    public class Inventory {
        private List<Item> items;
    
        public int getItemCount(){
            return items.size();
        }
        
        public bool isEmpty() {
            return items.isEmpty();
        }
    
        //...
    }
    ```
    

    OUTPUT:

    import java.util.List;
    
    public class Inventory {
        private List<Item> items;
    
        public int getItemCount(){
            return items.size();
        }
        
        public bool isEmpty() {
            return items.isEmpty();
        }
    
        //...
    }
    
    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>
    

    Inline Code

    Syntax coloring

    MarkBind can apply syntax-coloring on inline code too.

    CODE:

    Consider the xml code `<bar type="name" cwf="C:\Users\ZeYu\Desktop\markbind\docs\userGuide\syntax\codeAndOutput.md">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 goo ``` ```` ``` `goo`{.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:




    ```markdown ***** ----- ______________ ```

    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 ```markdown ![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
      • 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:
    

    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:

    <variable name="date_pagevar">2020-03-06</variable>
    

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

    Token Output
    D 1
    Do 1st
    DD 01
    M 1
    MM 01
    MMM Jan
    MMMM January
    YY 19
    YYYY 2019

    Full formatting reference available here.

    Example

    CODE:

    {% set base1 = "2019-08-12" %}
    {% set format1 = "DD MM YYYY" %}
    {% set format2 = "ddd Do MM" %}
    {{ base1 | date }} <!-- Mon 12 Aug -->
    {{ base1 | date(format1) }} <!-- 12 08 2019 -->
    {{ base1 | date(format1, 10) }} <!-- 22 08 2019 -->
    {{ base1 | date(format2, 10) }} <!-- Thu 22/08 -->

    OUTPUT:

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

    {{ "2019-08-12" | date("DD.MM.YYYY", 10) }} <!-- 22.08.2019 -->

    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:

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

    Euler's equation e i π + 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:

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

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


    Relevant Tips & Tricks

    Escaping Characters

    For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash (\) in front of the character.

    CODE:

    \* item 1
    
    * item 1
    

    OUTPUT:

    * item 1

    • item 1


    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.

    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.