• 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 stying, 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.

    Alternate syntax: https://www.markdownguide.org/basic-syntax#line-breaks

    This is the second sentence.<br>
            
            This should be on 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%%
    

    OUTPUT:

    Super Bold, Underline, Highlight, Dim

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

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

    Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim


    Blockquotes

    CODE:

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

    OUTPUT:

    Normal text

    Blockquote, first paragraph

    Second paragraph

    Nested blockquote

    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

    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

    MarkBind can provide syntax coloring for a code block (aka Fenced Code Blocks).

    CODE:

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

    OUTPUT:

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

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

    In addition, MarkBind can apply syntax-coloring on inline code too.

    CODE:

    Consider the xml code `<bar type="name">goo</bar>`{.xml},
    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.


    Images

    CODE:

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

    OUTPUT:

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


    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 while Glyphicons are provided by Glyphicons via Bootstrap 3.

    MarkBind supports using Font Icons provided by Font Awesome and Glyphicons.

    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:


    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:


    Relevant Tips & Tricks

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

    MarkBind Syntax Overview

    Using Components