• HOME
  • USER GUIDE
  • SHOWCASE
  • ABOUT
  • Syntax Cheat Sheet

    Badges
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-pill badge-success">Success</span>
    <button type="button" class="btn btn-primary">
      Difficulty Level <span class="badge badge-light">4</span>
    </button>
    

    Badges

    CODE:

    Normal:
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-light">Light</span>
    <span class="badge badge-dark">Dark</span>
    <br>Pills:
    <span class="badge badge-pill badge-primary">Primary</span>
    <span class="badge badge-pill badge-secondary">Secondary</span>
    <span class="badge badge-pill badge-success">Success</span>
    <span class="badge badge-pill badge-danger">Danger</span>
    <span class="badge badge-pill badge-warning">Warning</span>
    <span class="badge badge-pill badge-info">Info</span>
    <span class="badge badge-pill badge-light">Light</span>
    <span class="badge badge-pill badge-dark">Dark</span>
    

    OUTPUT:

    Normal: Primary Secondary Success Danger Warning Info Light Dark
    Pills: Primary Secondary Success Danger Warning Info Light Dark

    You can use Badges in combination with headings, buttons, links, etc.

    CODE:

    Links:
    <a href="#" class="badge badge-primary">Primary</a>
    <a href="#" class="badge badge-pill badge-warning">Warning</a>
    
    Buttons:
    <button type="button" class="btn btn-primary">
      Difficulty Level <span class="badge badge-light">4</span>
    </button>
    
    Headings:
    
    ### Feature X <span class="badge badge-danger">beta</span>
    ##### Feature Y <span class="badge badge-pill badge-success">stable</span>
    

    OUTPUT:

    Links: Primary Warning

    Buttons:

    Headings:

    Feature X beta

    Feature Y stable

    You can refer to Bootstrap documentation to find more information about Badges.

    <span class="badge badge-primary">
                  Primary</span>
                  
                  <span class="badge badge-pill badge-success">
                  Success</span>
                  
                  <button type="button" class="btn btn-primary">
                  
                  Difficulty Level <span class="badge badge-light">
                  4</span>
                  
                  </button>
                  
                  
                  

    Primary Success

    Feature Y stable
    Blockquotes
    > Blockquote, first paragraph
    >
    > Second paragraph
    >> Nested blockquote
    

    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

    Boxes
    <box type="warning">
      warning
    </box>
    

    Boxes

    Box comes with different built-in types.

    CODE:

    <box>
        default
    </box>
    <box type="info">
        info
    </box>
    <box type="warning">
        warning
    </box>
    <box type="success">
        success
    </box>
    <box type="important">
        important
    </box>
    <box type="wrong">
        wrong
    </box>
    <box type="tip">
        tip
    </box>
    <box type="definition">
        definition
    </box>
    <box type="info" dismissible>
        dismissible info
    </box>
    

    OUTPUT:

    default info warning success important wrong tip definition dismissible info

    You can customize the TipBox's appearance.

    CODE:

    <box background-color="white" border-color="grey" border-left-color="blue">
        default, styled as empty box with blue left border
    </box>
    <box type="info" icon=":rocket:">
        info, with rocket icon
    </box>
    

    OUTPUT:

    default, styled as empty box with blue left border info, with rocket icon

    Options

    Name Type Default Description
    background-color String null
    border-color String null
    border-left-color String null Overrides border-color for the left border.
    color String null Color of the text.
    dismissible Boolean false Adds a button to close the box to the top right corner.
    icon String null
    type String 'none' Supports: info, warning, success, important, wrong, tip, definition, or empty for default.
    ```html warning ``` default info warning success important wrong tip definition
    Code
    ```xml
    <foo>
      <bar type="name">goo</bar>
    </foo>
    ```
    
    `<bar type="name">goo</bar>`{.xml}
    

    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!

    Dropdowns
    <dropdown text="Action" type="primary">
      <li><a href="#dropdown" class="dropdown-item">Action</a></li>
      <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
      <li role="separator" class="dropdown-divider"></li>
      <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
    </dropdown>
    

    You can use Dropdowns as a top level component.

    CODE:

    <dropdown text="Action" type="primary">
      <li><a href="#dropdown" class="dropdown-item">Action</a></li>
      <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
      <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
      <li role="separator" class="dropdown-divider"></li>
      <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
    </dropdown>
    
    <!-- For segmented dropdown, ignore text and add a "before" slot -->
    <dropdown type="info">
      <button slot="before" type="button" class="btn btn-info">Segmented</button>
      <li><a href="#dropdown" class="dropdown-item">...</a></li>
    </dropdown>
    
    <!-- Right aligned list -->
    <dropdown text="Right aligned list" type="primary" menu-align-right>
      <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
    </dropdown>
    

    OUTPUT:

    You can also use Dropdowns as a nested component (e.g. part of a button group).

    CODE:

    <!-- In a button group -->
    <div class="btn-group d-flex" role="group">
      <a href="#dropdown" class="btn btn-danger w-100" role="button">Left</a>
      <!-- With slots you can handle some elements as native bootstrap -->
      <dropdown class="w-100">
        <button slot="button" type="button" class="btn btn-warning dropdown-toggle w-100">
          Action
          <span class="caret"></span>
        </button>
        <ul slot="dropdown-menu" class="dropdown-menu">
          <li><a href="#dropdown" class="dropdown-item">Action</a></li>
          <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
          <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
          <li role="separator" class="dropdown-divider"></li>
          <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
        </ul>
      </dropdown>
      <a href="#dropdown" class="btn btn-success w-100" role="button">Right</a>
    </div>
    

    OUTPUT:

    Options

    Name Type Default Description
    disabled Boolean false Whether Dropdown can be opened.
    menu-align-right Boolean false Whether the dropdown list will be right-aligned.
    text String '' Dropdown button text.
    type String default Supports: default, primary, danger, info, warning, success.

    You may refer to this documentation regarding how you can use the Bootstrap buttons, and how to style them.

    <dropdown text="Action" type=
                  "primary">
                    
                    <li>
                    <a href="#dropdown" class="dropdown-item">
                    Action</a>
                    </li>
                    
                    <li>
                    <a href="#dropdown" class="dropdown-item">
                    Another action</a>
                    </li>
                    
                    <li role="separator" class="dropdown-divider">
                    </li>
                    
                    <li>
                    <a href="#dropdown" class="dropdown-item">
                    Separated link</a>
                    </li>
                    
                    </dropdown>
                    
                    
                    
    Action
  • Action
  • Another action
  • Something else here
  • Separated link
  • ...
  • Embeds
    @[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)
    

    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:

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

    Emoji

    CODE:

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

    OUTPUT:

    👍 ❗️ ❌ 🚧

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

    👍 ❗️ ❌ 🚧

    Footers
    <footer>
      This page is not updated anymore!
    </footer>
    
    <frontmatter>
      footer: commonFooter.md
    </frontmatter>
    

    Footers

    You can specify a page footer using a footer file.

    You can save multiple footer files in the _markbind/footers folder and specify it in the <frontmatter> of the pages in which it should appear.

    Example: _markbind/footers/commonFooter.md:

    <footer>
      This page is not updated anymore!
    </footer>
    

    In the page that you want to include the footer:

    <frontmatter>
      footer: commonFooter.md
    </frontmatter>
    

    Notes:

    • Any inline footers will be removed by MarkBind to ensure compatibility with footer files.
    • If a Layout is specified, the footer file specified in the <frontmatter> will override the footer within the Layout.
    • MarkBind Components and <include> tags are not supported in footers.
    ```html
    This page is not updated anymore!
    ``` ```html footer: commonFooter.md ```

    You can see an example of a footer at the bottom of this page.

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

    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:**
    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]
    Front Matter
    <frontmatter>
      title: Binary Search Tree
      pageNav: 2
    </frontmatter>
    

    Front Matter

    You can use a Front Matter section to specify page properties such as the title and keywords of the page. To specify front matter for a page, insert a <frontmatter> tag in the following format at the beginning of the page.

    <frontmatter>
      property1: value1
      property2: value2
    </frontmatter>
    

    Example: Here, we set the page title attribute as Binary Search Tree.

    <frontmatter>
      title: Binary Search Tree
    </frontmatter>
    

    Page properties:

    • title: The title of the page. Will be used as the <title> attribute of the HTML page generated.
    • Other properties such as keywords, layout, head etc. will be explained in other places of this user guide.

    Note: Page properties that are defined in site.json for a particular page will override those defined in the front matter of the page.

    <frontmatter>
            title: Binary Search Tree pageNav: 2
            </frontmatter>
            
            
    Headers
    <header>
      <div class="bg-primary display-4 text-center text-white" style="height: 200px;">
        Welcome!
      </div>
    </header>
    
    <frontmatter>
      header: welcomeBanner.md
    </frontmatter>
    

    Headers

    You can specify a page header above your page contents and navigation menus using a header file.

    You can save multiple header files in the _markbind/headers folder and specify it in the <frontmatter> of the pages in which it should appear.

    Example: _markbind/headers/welcomeBanner.md:

    <header>
      <div class="bg-primary display-4 text-center text-white">
        Welcome!
      </div>
    </header>
    

    In the page that you want to include the header:

    <frontmatter>
      header: welcomeBanner.md
    </frontmatter>
    

    Notes:

    • Any inline headers will be removed by MarkBind to ensure compatibility with header files.
    • If a Layout is specified, the header file specified in the <frontmatter> will override the header within the Layout.
    • MarkBind Components and <include> tags are not supported in headers.
    ```html
    Welcome!
    ``` ```html header: welcomeBanner.md ```
    Content to be placed at the top of your page.
    Headings
    ### Heading level 3
    ...
    ###### Heading level 6
    

    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
    Horizontal Rules
    *****
    -----
    ______________
    

    Horizontal Rules

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

    CODE:

    *****
    -----
    ______________
    

    OUTPUT:




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

    :glyphicon-hand-right: :fab-github: :fas-home:

    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:

    Images
    ![alt text here](https://markbind.org/images/logo-lightbackground.png "title 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") ```

    Includes
    <include src="foo.md#bar" boilerplate inline trim>
      <variable name="x">5</variable>
    </include>
    
    User Guide → Reusing Contents → Includes

    Includes

    MarkBind has a powerful <include> mechanism which allows you to create documents by combining other content fragments.

    You can use <include> tag to include another markdown or HTML document into the current document.

    Example: Including text from a tip2.md in another file.

    Tip 1. ...
    <include src="tips/tip2.md" />
    Tip 3. ...
    

    You can <include> a fragment of a file by specifying the #fragment-id at the end of the src attribute value, provided the fragment is wrapped in a <div>/<span>/<seg> tag with the matching id.

    Example: Including a fragment from a file:

    Some text
    <include src="docs/tips.md#tip-1" />
    Some other text
    

    docs/tips.md:

    ...
    <div id="tip-1" />
      Tip 1. ...
      ...
    </div>
    Tip 2. ...
    

    When setting the id of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading ## Some Useful Tips, MarkBind will auto-generate an ID some-useful-tips for that heading.

    The <include> tag works for any MarBind source file including the font matter section but it may not work in some special files such as the _markbind/variables.md.

    Attributes:

    • src: specify the source file path.
    • inline (optional): make the included result an inline element. (wrapped in <span> tag). e.g.,
      The title is <include src="../docs/summary.md#title" inline /> while ...
      
    • optional (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,
      <include src="UserStories.md" optional />
      
    • trim (optional): remove leading and trailing whitespace and newlines from the document before including.
      <include src="UserStories.md#epic" trim />
      

    The <include> mechanism can be used inside any MarkBind source file (even inside the front matter section) but it will not work inside some special files such as the _markbind/variables.md.

    <include> Inside an Included File

    Although the src attribute of an <include> is given relative to the current directory, it is converted to an absolute value before the host file is included from another file.

    Example: Suppose you have a MarkBind project with the following file structure.

    c:/mySite/
      ├── bookFiles/
      |      ├── book.md
      |      ├── chapter1.md
      |      └── chapter2.md
      └── reviewFiles/
             └── review.md
    

    The book.md:

    # My Book
    <include src="chapter1.md" />
    <include src="chapter2.md" />
    

    The review.md:

    # My Review
    <include src="../bookFiles/book.md" />
    ...
    

    The content of the chapter1.md and chapter2.md will be included in the review.md (via <include src="../bookFiles/book.md" />) although chapter1.md and chapter2.md are not in reviewFiles directory. i.e., <include src="chapter1.md" /> will be interpreted as <include src="c:/mySite/bookFiles/chapter1.md" />

    In other words, <include> interprets the reused code relative to the original location of the file, not the location in which it is reused.


    Specifying Variables in an <include>

    It is possible to include variables in an <include>.

    Example: Specifying title and author variables in an <include> tag:

    <include src="article.md">
      <variable name="title">My Title</variable>
      <variable name="author">John Doe</variable>
    </include>
    

    In article.md:

    # {{ title }}
    Author: {{ author }}

    These variables work the same way as variables in _markbind/variables.md, except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.

    You can also specify include variables within the <include> tag itself by adding a var- prefix.

    Example: Specifying title and author variables inline:

    <include src="article.md" var-title="My Title" var-author="John Doe" />
    

    If the same variable is defined in a chain of <include>s (e.g. a.md includes b.md includes c.md...), variables defined in the top-most <include> will take precedence. Global variables (_markbind/variables.md) will take precedence over any <include> variables.

    Using Boilerplate Files

    If you find duplicating a boilerplate code fragment in multiple places of your code base, you can use a boilerplate file to avoid such duplication. Note that you cannot use a normal <include> in this case because the code included using a normal <include> stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.

    Example: Suppose you have a MarkBind project with the following file structure.

    c:/mySite/
      ├── chapter1/
      |      ├── chapter.md
      |      ├── text.md
      |      └── exercises.md
      ├── chapter2/
      |      ├── chapter.md
      |      ├── text.md
      |      └── exercises.md
      └── book.md
    

    The book.md:

    # My Book
    <include src="chapter1/chapter.md" />
    <include src="chapter2/chapter.md" />
    

    The chapter1/chapter.md:

    ## Text
    <include src="text.md" />
    ## Exercises
    <include src="exercises.md" />
    

    The chapter2/chapter.md:

    ## Text
    <include src="text.md" />
    ## Exercises
    <include src="exercises.md" />
    

    As you can see, both chapter.md files are exactly the same. If we were to use only one of the chapter.md files and <include> it twice in the book.md, we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, chapter.md contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to chapter1 directory and once relative to chapter2 directory.

    To use a code fragment as a boilerplate file,

    1. Put the code in a file inside the _markbind/boilerplates directory.
    2. <include> the file as if a copy of it exists in any directory you want it to applied, but add the boilerplate attribute to the <include> tag.

    Example: Here's how you can use a boilerplate file to avoid duplicating the chapter.md:

    c:/mySite/
      ├── _markbind/boilerplates/
      |      └── chapter.md
      ├── chapter1/
      |      ├── text.md
      |      └── exercises.md
      ├── chapter2/
      |      ├── text.md
      |      └── exercises.md
      └── book.md
    

    The book.md:

    # My Book
    <include src="chapter1/chapter.md" boilerplate />
    <include src="chapter2/chapter.md" boilerplate />
    

    The _markbind/boilerplates/chapter.md:

    ## Text
    <include src="text.md" />
    ## Exercises
    <include src="exercises.md" />
    

    Consider the line <include src="chapter1/chapter.md" boilerplate />. Note how you can use src="chapter1/chapter.md" there is no such file. MarkBind will use the chapter.md file /_markbind/boilerplates/ but interpret it as if the file exist in chapter1 directory (i.e., interpret the chapter1.md code relative to the chapter1 directory.

    Similarly, <include src="chapter2/chapter.md" boilerplate /> interprets the chapter.md relative to the chapter2 directory.

    If you have many boilerplate files, you can organize them into directories inside the _markbind directory. When using such boilerplate files, you need to replace boilerplate attribute with boilerplate="<path to file relative to _markbind/boilerplates>".

    Example: Suppose the chapter.md is places in a book directory:

    c:/mySite/
      └── _markbind/boilerplates/
             └── book/
                   └── chapter.md
    
    

    It needs to be used as follows:

    <include src="chapter1/chapter.md" boilerplate="book/chapter.md" />
    <include src="chapter2/chapter.md" boilerplate="book/chapter.md" />
    
    <include src="foo.md#bar" boilerplate
            inline trim>
            
            <variable name="x">
            5</variable>
            
            </include>
            
            
            
    Keywords
    <span class="keyword d-none">regress</span>
    

    Keywords

    You can also specify additional keywords to be indexed under a heading by tagging the words with the keyword class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add d-none as a class.

    Example:

    #### Developer Testing
    <span class="keyword d-none">regress</span>
    <span class="keyword d-none">regression testing</span>
    
    This is good for catching <span class="keyword">regressions</span>.
    

    Developer Testing

    This is good for catching regressions.

    You can also set additional keywords to be indexed for an entire page using the keywords attribute inside the <frontmatter> of that page.

    Example:

    <frontmatter>
      keywords: regress, regression testing, regressions
    </frontmatter>
    ...
    
    <span class="keyword d-none">regress</span>
            
            
    Line Breaks
    This is the second sentence.<br>
    This should be on a new line.
    

    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.
            
            
    Links
    MarkBind home is at [here](https://markbind.org).
    
    MarkBind home is at [here][1].
    
    [1]: https://markbind.org
    

    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.

    Lists
    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
    

    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
    Modals
    Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
    <modal title="Modal title" id="modal:unused">
        Modal content
    </modal>
    

    Modals

    Modals are to be used together with the Trigger component for activation.

    CODE:

    More about <trigger for="modal:loremipsum">trigger</trigger>.
    <modal title="**Modal title** :rocket:" id="modal:loremipsum">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </modal>
    <br>
    This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
    
    <trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
    
    <modal title="**Centered** :rocket:" id="modal:centered" center>
      Centered
    </modal>
    
    

    OUTPUT:

    More about trigger. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    This is the same trigger as last one.

    This is a trigger for a centered modal.

    Centered

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name type Default Description
    title String '' Title of the Modal component.
    ok-text String '' Text for the OK button.
    effect String zoom Supports: zoom, fade.
    id String Used by Trigger to activate the Modal by id.
    width Number, String, or null null Passing a Number will be translated to pixels.
    String can be passed CSS units, ( e.g. '50in' or '30vw' ).
    null will default to Bootstrap's responsive sizing.
    large Boolean false Creates a large Modal.
    small Boolean false Creates a small Modal.
    center Boolean false Vertically centers the modal (in addition to the horizontal centering by default).
    backdrop Boolean true Enables closing the Modal by clicking on the backdrop.
    Click <trigger trigger="click" for="modal:unused">here
            </trigger> to open a modal.
            <modal title="Modal title" id="modal:unused">
            Modal content
            </modal>
            
            

    Hover here to open a modal. Modal content

    Nav Bars
    <navbar type="primary">
      <!-- Brand as slot -->
      <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
      <!-- You can use dropdown component -->
      <dropdown text="Dropdown" class="nav-link">
        <li><a href="#navbar" class="dropdown-item">Option</a></li>
      </dropdown>
      <!-- For right positioning use slot -->
      <li slot="right">
        <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
      </li>
    </navbar>
    

    Navbar allows visitors of your website to navigate through pages easily.

    Note: Navbars should be placed within a header file to ensure that they are correctly positioned at the top of the page, above the site navigation and page navigation menus.

    CODE:

    <navbar type="primary">
      <!-- Brand as slot -->
      <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
      <!-- You can use dropdown component -->
      <dropdown text="Dropdown" class="nav-link">
        <li><a href="#navbar" class="dropdown-item">Option</a></li>
      </dropdown>
      <!-- For right positioning use slot -->
      <li slot="right">
        <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
      </li>
    </navbar>
    
    <navbar type="dark">
      <!-- Brand as slot -->
      <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
      <!-- You can use dropdown component -->
      <dropdown text="Dropdown" class="nav-link">
        <li><a href="#navbar" class="dropdown-item">Option</a></li>
      </dropdown>
      <!-- For right positioning use slot -->
      <li slot="right">
        <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
      </li>
    </navbar>
    
    <navbar type="light">
      <!-- Brand as slot -->
      <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
      <!-- You can use dropdown component -->
      <dropdown text="Dropdown" class="nav-link">
        <li><a href="#navbar" class="dropdown-item">Option</a></li>
      </dropdown>
      <!-- For right positioning use slot -->
      <li slot="right">
        <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
      </li>
    </navbar>
    

    OUTPUT:

    Options

    Name Type Default Description
    type String primary Supports: primary, dark, light, none.

    If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the type="none" attribute and insert your own custom styles via the add-class attribute.

    <navbar type="primary">
            <!-- Brand as slot -->
            <a slot="brand" href="/" title=
            "Home" class="navbar-brand">MarkBind</a>
            <!-- You can use dropdown component -->
            <dropdown text="Dropdown" class="nav-link">
            <li><a href="#navbar" class=
            "dropdown-item">Option</a></li>
            </dropdown>
            <!-- For right positioning use slot -->
            <li slot="right">
            <a href="https://github.com/MarkBind/markbind" target="_blank"        class="nav-link">Fork...</a>
            </li>
            </navbar>
            
            
    MarkBind
  • Option
  • Fork...
  • MarkBind
  • Option
  • Fork...
  • MarkBind
  • Option
  • Fork...
  • Page Head

    _markbind/head/myCustomLinks.md:

    <head-top>
    <script src=" {{ baseUrl }} /js/myCustomScript.js"></script>
    </head-top>
    <link rel="stylesheet" href=" {{ baseUrl }} /css/main.css">
    <link rel="stylesheet" href=" {{ baseUrl }} /css/extra.css">

     <frontmatter>
       head: myCustomLinks.md
     </frontmatter>
    

    MarkBind allows you to insert code into the <head> section of the generated HTML page, for example, to add links to custom JavaScript or CSS files.

    Steps:

    1. Put the code you want to insert into the <head> into a file inside the _markbind/head directory.
    2. Specify the file as an attribute named head in the <frontmatter> of the page.

    Example: Suppose you want to insert the code below into the <head> of a page, and you have saved the code as _markbind/head/myCustomLinks.md:

    <script src=" {{ baseUrl }} /js/myCustomScript.js"></script>
    <link rel="stylesheet" href=" {{ baseUrl }} /css/main.css">
    <link rel="stylesheet" href=" {{ baseUrl }} /css/extra.css">

    To specify that you want to insert myCustomLinks.md into the <head> of myPage.html, update the front matter of the myPage.md as follows:

    <frontmatter>
      head: myCustomLinks.md
    </frontmatter>
    ...
    

    All content is inserted at the bottom of the <head> tag by default. You can use the optional <head-top> tag to specify content that should be inserted at the top of the <head> tag instead.

    Example: Here's how you can force the line <script ... > ... </script> to be inserted at the top of the <head> section.

    <head-top>
    <script src=" {{ baseUrl }} /js/myCustomScript.js"></script>
    </head-top>
    <link rel="stylesheet" href=" {{ baseUrl }} /css/main.css">
    <link rel="stylesheet" href=" {{ baseUrl }} /css/extra.css">

    Multiple head files can be included within a page by providing a comma separated list. They will be added to the <head> in the order in which they are listed. You may specify raw .js or .css files as your head file if you wish to do so.

    Example:

    <frontmatter>
      head: customStyles.md, extraScripts.md, extra.css, other.js
    </frontmatter>
    

    _markbind/head/myCustomLinks.md:

    <head-top>
      <script src=" {{ baseUrl }} /js/myCustomScript.js"></script>
    </head-top>
    <link rel="stylesheet" href=" {{ baseUrl }} /css/main.css">
    <link rel="stylesheet" href=" {{ baseUrl }} /css/extra.css">

     <frontmatter>
       head: myCustomLinks.md
     </frontmatter>
    
    Page Layouts
    <frontmatter>
      layout: chapterLayout
    </frontmatter>
    

    Page Layouts

    A layout is a set of page-tweaks that can be applied to a page (or group of pages) in one go.

    A layout consists of the following files:

    1. A header (filename: header.md)
    2. A footer (filename: footer.md)
    3. Tweaks to the <head> (head.md)
    4. A site navigation menu (navigation.md)
    5. Custom styles (styles.css)
    6. Custom scripts (scripts.js)

    A layout is represented by a sub-directory in the _markbind/layouts/ containing the files listed above. The name of the layout is same as the name of the sub-directory.

    To apply the layout, specify it as an attribute named layout in the <frontmatter> of each page, or in the site.json.

    Example: Suppose you have a layout named chapterLayout.

    <root>/_markbind/layouts/
                      └── chapterLayout/
                            ├── header.md
                            ├── footer.md
                            ├── head.md
                            ├── navigation.md
                            ├── styles.css
                            └── scripts.js
    

    You can apply it to the chapter.md by setting its <frontmatter> as follows:

    <frontmatter>
      layout: chapterLayout
    </frontmatter>
    ...
    

    You can apply it to all chapter.md files by adding this entry to the site.json.

    {
      "glob": "**/chapter.md",
      "layout": "chapterLayout"
    }
    

    The layout specified in the site.json overrides the one specified in the <frontmatter>.

    Any files specified in <frontmatter> overrides the corresponding file in the layout applied.

    Example: Suppose a file has the following:

    <frontmatter>
      layout: chapterLayout
      head: myHead.md
    </frontmatter>
    ...
    

    In this case myHead.md will override the chapterLayout/head.md.

    The layout named default (if any) is automatically applied to every single page. When you init a MarkBind site, MarkBind also generates an empty default layout.

    Attaching event listeners in scripts.js

    You can include custom JavaScript in scripts.js. However, DOM manipulations such as attaching event listeners may be overridden after MarkBind setup. To ensure that such changes take effect, include your code in a function that is passed to afterSetup() in scripts.js. Functions passed to afterSetup() will then be called after MarkBind setup is complete.

    Example: Suppose a page has the following:

    <span id="alert">Click here!</span>
    

    To show a JavaScript alert when <span id="alert"> is clicked, we attach an event listener to it in a function passed to afterSetup() in scripts.js:

    afterSetup(() => {
      document.getElementById("alert").addEventListener("click",  () => {
        window.alert("You have just clicked the span!");
      });
    });
    
    <frontmatter>
            layout: chapterLayout
            </frontmatter>
            
            
    Page Navigation Menus
    <frontmatter>
      pageNav: 2
      pageNavTitle: "Chapters of This Page"
    </frontmatter>
    

    A Page Navigation Menu (pageNav for short) is a fixed menu on the right edge of your page contents. You can use a pageNav to show a list of the current page's headings.

    Steps to add a pageNav:

    1. Specify your pageNav within the <frontmatter> of a page with "default" or a heading level.
    2. (Optional) You may also specify a page navigation title within <frontmatter> that will be placed at the top of the page navigation menu.

    Example: In the page that you want to have page navigation:

    <frontmatter>
      pageNav: 2
      pageNavTitle: "Chapters of This Page"
    </frontmatter>
    

    The example above will create a page navigation containing only heading levels of 1 and 2.

    A pageNav has a fixed width of 300 pixels for its contents. It is responsive by design and will be completely hidden when the screen size is smaller than 1300 pixels.

    <frontmatter>
            pageNav: 2 pageNavTitle: "Chapters of This Page"
            </frontmatter>
            
            

    You can see an example of a Page Navigation Bar on the right side of this page.

    Panels
    <panel header="primary type panel" type="primary" >
      ...
    </panel>
    

    Panels

    Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.

    CODE:

    <panel header="This is your header for a Panel, click me to expand!">
      ...
    </panel>
    

    OUTPUT:

    Lorem ipsum ...

    With minimized attribute, panel is minimized into an inline block element. The alt attribute is for you to specify the minimized block header.

    CODE:

    <panel header="How to cultivate a tomato plant at home" alt="Tomatoes" minimized>
      ...
    </panel>
    

    OUTPUT:

    Lorem ipsum ...

    With expanded attribute, you can set the panels to be expanded when loaded in.

    CODE:

    <panel header="Have your readers click less to see the Panel's contents" expanded>
    

    OUTPUT:

    Lorem ipsum ...

    Panel provides many types that change its appearance.

    CODE:

    <panel header="**light type panel (DEFAULT)**" type="light" minimized>
      ...
    </panel>
    <panel header="**dark type panel**" type="dark" minimized>
      ...
    </panel>
    <panel header="**primary type panel**" type="primary" minimized>
      ...
    </panel>
    <panel header="**secondary type panel**" type="secondary" minimized>
      ...
    </panel>
    <panel header="**info type panel**" type="info" minimized>
      ...
    </panel>
    <panel header="**danger type panel**" type="danger" minimized>
      ...
    </panel>
    <panel header="**warning type panel**" type="warning" minimized>
      ...
    </panel>
    <panel header="**success type panel**" type="success" minimized>
      ...
    </panel>
    <panel header="**seamless type panel**" type="seamless" minimized>
      ...
    </panel>
    

    OUTPUT:

    Click the Panels to see the expanded style.

    Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ...

    Show/Hide buttons using no-switch or no-close.

    CODE:

    <panel header="This panel does not have a switch button" no-switch>
      ...
    </panel>
    <panel header="This panel does not have a close button" no-close>
      ...
    </panel>
    <panel header="This panel does not have either buttons" no-close no-switch>
      ...
    </panel>
    

    OUTPUT:

    ... ... ...

    Use markdown in the header (only inline level markdown are supported).

    CODE:

    <panel header="**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)" type="seamless">
      ...
    </panel>
    

    OUTPUT:

    ...

    If src attribute is provided, the panel will take content from the src specified and add it to the Panel body.

    CODE:

    <panel header="Content loaded in from 'src'" src="extra/loadContent.html#fragment" minimized></panel>
    

    OUTPUT:

    If popup-url attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.

    CODE:

    <panel header="Try clicking on my pop-up button" popup-url="/userGuide/syntax/extra/loadContent.html">
      This panel has a popup.
    </panel>
    

    OUTPUT:

    This panel has a popup.

    If preload attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.

    CODE:

    <panel header="Right click and inspect my HTML before expanding me!" src="extra/loadContent.html#fragment" preload>
      <p>You should be able to find this text before expanding the Panel.</p>
    </panel>
    

    OUTPUT:

    You should be able to find this text before expanding the Panel.

    You can nest Panels or other components within a Panel.

    CODE:

    <panel header="Parent Panel">
      <panel header="Level 1 Nested Panel">
        <panel header="Level 2 Nested Panel">
          <tip-box type="success">
            I'm a nested tip-box
          </tip-box>
        </panel>
      </panel>
      <panel header="Level 1 Nested Panel" type="info">
        Some Text
      </panel>
    </panel>
    

    OUTPUT:

    I'm a nested tip-box Some Text

    Options

    Name Type Default Description
    header String '' The clickable text on the Panel's header.
    alt String Panel header The clickable text on the minimised Panel.
    expandable Boolean true Whether Panel is expandable.
    expanded Boolean false Whether Panel is expanded or collapsed when loaded in.
    minimized Boolean false Whether Panel is minimized.
    no-close Boolean false Whether to show the close button.
    no-switch Boolean false Whether to show the expand switch.
    bottom-switch Boolean true Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
    popup-url String The url that the popup window will navigate to. The url can be absolute or relative.
    preload Boolean false Whether the content is loaded immediately from src.
    src String The url to the remote page to be loaded as the content of the panel.
    type String light The type of color for the tab (single).
    Supports: light, dark, primary, secondary, info, success, warning, danger, seamless.
    <panel header="primary type panel" type="primary"        >
            ...
            </panel>
            
            
    ... ... ... ... ...

    ... ... ... ...
    Paragraphs
    This is the first paragraph.
    
    This is another paragraph. This is the second sentence.
    

    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.
    
    Pictures
    <pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
      MarkBind Logo
    </pic>
    

    Pictures

    A pic component allows you to add captions below the image.

    CODE:

    <pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
      MarkBind Logo
    </pic>
    

    OUTPUT:

    MarkBind Logo

    Options

    Name Type Default Description
    alt string This must be specified.
    The alternative text of the image.
    height string The height of the image in pixels.
    src string This must be specified.
    The URL of the image.
    The URL can be specified as absolute or relative references. More info in: Intra-Site Links
    width string The width of the image in pixels.
    If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
    <pic src="https://markbind.org/images/logo-lightbackground.png" width=
            "300" alt="Logo">
            MarkBind Logo
            </pic>
            
            
    MarkBind Logo
    Popovers
    Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
    
    <popover id="pop:context-target" title="Popover title" placement="top">
    <div slot="content">
    
    description :+1:
    
    </div>
    </popover>
    

    Popovers

    CODE:

    <popover effect="fade" content="Lorem ipsum dolor sit amet" placement="top">
      <button class="btn btn-secondary">Popover on top</button>
    </popover>
    <popover effect="fade" content="Lorem ipsum dolor sit amet" placement="left">
      <button class="btn btn-secondary">Popover on left</button>
    </popover>
    <popover effect="fade" content="Lorem ipsum dolor sit amet" placement="right">
      <button class="btn btn-secondary">Popover on right</button>
    </popover>
    <popover effect="fade" content="Lorem ipsum dolor sit amet" placement="bottom">
      <button class="btn btn-secondary">Popover on bottom</button>
    </popover>
    <hr>
    <h4>Title</h4>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="top">
      <button class="btn btn-secondary">Popover on top</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="left">
      <button class="btn btn-secondary">Popover on left</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="right">
      <button class="btn btn-secondary">Popover on right</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="bottom">
      <button class="btn btn-secondary">Popover on bottom</button>
    </popover>
    <hr />
    <h4>Trigger</h4>
    <p>
      <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
        <button class="btn btn-secondary">Mouseenter</button>
      </popover>
      <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
        <button class="btn btn-secondary">Contextmenu (right click)</button>
      </popover>
    </p>
    <h4>Markdown</h4>
    <p>
      <popover effect="scale" title="**Emoji title** :rocket:" content="++emoji++ content :cat:">
        <button class="btn btn-secondary">Hover</button>
      </popover>
    </p>
    <h4>Content using slot</h4>
    <popover effect="scale" title="**Emoji title** :rocket:">
      <div slot="content">
        This is a long content...
      </div>
      <button class="btn btn-secondary">Hover</button>
    </popover>
    <br />
    <br />
    <h4>Wrap Text</h4>
    <popover header="false" content="Nice!">What do you say</popover>
    

    OUTPUT:


    Title


    Trigger

    Markdown

    Content using slot

    This is a long content...


    Wrap Text

    What do you say

    Using trigger for Popover:

    CODE:

    More about <trigger for="pop:trigger_id">trigger</trigger>.
    <popover id="pop:trigger_id" content="This popover is triggered by a trigger"></popover>
    <br>
    This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.
    

    OUTPUT:

    More about trigger.
    This is the same trigger as last one.

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name Type Default Description
    trigger String hover How the Popover is triggered.
    Supports: click, focus, hover, contextmenu.
    effect String fade Transition effect for Popover.
    Supports: scale, fade.
    title String '' Popover title, supports inline markdown text.
    content String '' Popover content, supports inline markdown text.
    header Boolean true Whether to show the header.
    placement String top How to position the Popover.
    Supports: top, left, right, bottom.
    Hover over the <trigger for="pop:context-target">keyword</trigger>
            to see the popover.
    
            <popover id="pop:context-target" title="Popover title"
            placement="top">
            <div slot="content">
    
            description :+1:
    
            </div>
            </popover>
            
            

    Hover over the keyword to see the popover.

    description 👍

    Questions
    <question>
      The question body
      <div slot="hint">
        Question hint.
      </div>
      <div slot="answer">
        Question answer.
      </div>
    </question>
    

    Questions

    Question component consists of a question body, a hint and an answer.

    CODE:

    <question>
      The question body. <md>:grey_question:</md>
      <div slot="hint">
        Question hint. <md>:crystal_ball:</md>
      </div>
      <div slot="answer">
        Question answer. <md>:pencil:</md>
      </div>
    </question>
    

    OUTPUT:

    The question body.
    Question hint. 🔮
    Question answer. 📝

    If you leave the hint and answer <div> blank, a default hint and answer will be provided instead.

    CODE:

    <question>
      This question has no hint or answer.
      <div slot="hint"></div>
      <div slot="answer"></div>
    </question>
    

    OUTPUT:

    This question has no hint or answer.

    Use the has-input attribute to add a text input box for users to enter their answer.

    CODE:

    <question has-input>
      What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
      <div slot="hint">It is between 300,000 and 400,000 km</div>
      <div slot="answer">384,000 km <md>:full_moon:</md></div>
    </question>
    

    OUTPUT:

    What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
    It is between 300,000 and 400,000 km
    384,000 km 🌕

    You are able to omit the hint or answer <div> independently, and they will not render.

    CODE:

    <question>
      This question with an omitted hint.
      <div slot="answer">42 <md>:star:</md></div>
    </question>
    
    <question>
      This question with an omitted answer.
      <div slot="hint">The number of exponent bits in a 64-bit Floating Point. <md>:computer:</md></div>
    </question>
    
    <question>
      This question only has the question body.
    </question>
    

    OUTPUT:

    This question with an omitted hint.
    42 ⭐️
    This question with an omitted answer.
    The number of exponent bits in a 64-bit Floating Point. 💻
    This question only has the question body.

    Use the minimized Panel component to create and group questions inline.

    CODE:

    <panel header="Q1 :crown:" minimized>
      <question has-input>
        Who is the first king of Thailand?
      </question>
    </panel>
    <panel header="Q2 :pizza:" minimized>
      <question has-input>
        Which country did the Hawaiian pizza originate from?
        <div slot="hint">
          Not Italy or Haiwaii <md>:smirk:</md>
        </div>
      </question>
    </panel>
    

    OUTPUT:

    Who is the first king of Thailand? Which country did the Hawaiian pizza originate from?
    Not Italy or Haiwaii 😏

    Questions can also be loaded in from another file using Panel's src attribute.

    CODE:

    <panel header="Questions loaded in from `quiz.md`" src="extra/quiz.md"></panel>
    

    OUTPUT:

    Options

    Name Type Default Description
    has-input Boolean false Whether Question has a text input box.
    <question>
            The question body
            <div slot="hint">
            Question hint.
            </div>
            <div slot="answer">
            Question answer.
            </div>
            </question>
            
            
    The question body
    Question hint.
    Question answer.
    Search Bars
    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
    
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
      </form>
    </li>
    

    Search Bars

    The searchbar component allows users to search all headings within any page on the site.

    CODE:

    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
    <searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>
    

    To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.

    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
      </form>
    </li>
    

    OUTPUT:

    Enter a search term (eg. 'search bar') to see the search result dropdown.

    Options

    Name Type Default Description
    algolia Boolean false Whether the searchbar should be connected to Algolia DocSearch.
    data Array The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "searchData".
    menu-align-right Boolean false Whether the search bar's dropdown list will be right-aligned.
    on-hit Function A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "searchCallback".
    placeholder String '' The placeholder text shown when no keywords are entered in the search bar.

    Note: If you are using MarkBind's search functionality, then enableSearch must be set to true in site.json.

    See: User Guide: Site Configuration → enableSearch.

    Related topic: User Guide: Making the Site Searchable.

    Related topic: User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch.

    <searchbar :data="searchData" placeholder="Search"        :on-hit="searchCallback" menu-align-right></searchbar>
            
            
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
      </form>
    </li>
    

    Site Navigation Menus
    # Site Map
    <navigation>
    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs :expanded:
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
    </navigation>
    <frontmatter>
      siteNav: mySiteNav.md
    </frontmatter>
    ...
    

    A Site Navigation Menu (siteNav for short) is a fixed menu on the left edge of a page, that can be used to show a road map of the main pages of your site.

    Steps to add a siteNav:

    1. Format your siteNav as an unordered Markdown list and save it inside the _markbind/navigation directory.
    2. Specify the file as the value of the siteNav attribute in the <frontmatter> of the page.

    Example: Here is an example siteNav code saved in _markbind/navigation/mySiteNav.md file:

    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
      * [Google Search](https://www.google.com/)
      * [YouTube Search](https://www.youtube.com/)
    * [Contact]({{ baseUrl }}/contact.html)

    Here's how another page can make use of the above siteNav:

    <frontmatter>
      siteNav: mySiteNav.md
    </frontmatter>
    ...
    

    Here's how the above siteNav will appear:

    You can append the :expanded: to a parent menu item to make it expand by default. In the example above, * Docs :expanded: will make the menu item Docs expand by default.

    A parent menu item that is also linked will not be collapsible e.g., the Search menu item in the above example.

    You may have additional HTML and Markdown content in a siteNav file, in which case the code for the siteNav should be enclosed in a <navigation> tag. There should only be one <navigation> tag in the file.

    Example: A siteNav code using a <navigation> tag.

    # Site Map
    <navigation>
    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
    </navigation>

    More than one siteNav file can be in _markbind/navigation/ directory but a page may not have more than one siteNav.

    A siteNav has a fixed width of 300 pixels for its contents. A siteNavs is responsive in that it will collapse to a menu button when the screen width is smaller than 992 pixels. It will then be completely hidden when the screen size is smaller than 576 pixels.

    There is no limit to the number of nesting levels or the number of items in the menu, but note that any content exceeding a height of 1000 pixels will be cut off.

    # Site Map
    <navigation>
    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs :expanded:
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
    </navigation>
    <frontmatter>
      siteNav: mySiteNav.md
    </frontmatter>
    ...
    

    You can see an example of a Page Navigation Bar on the left side of this page.

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

    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
    Tabs
    <tabs>
      <tab header="First tab">
        Content of the first tab
      </tab>
      <tab header="Second tab">
        Contents of the second tab
      </tab>
      <tab-group header="Third tab group :tv:">
        <tab header="Stars :star:">
          Some stuff about stars ...
        </tab>
        <tab header="Moon">
          Some stuff about the moon ...
        </tab>
      </tab-group>
    </tabs>
    

    Tabs

    CODE:

    <tabs>
      <tab header="First tab">
        ...
      </tab>
      <tab header="Disabled second tab :x:" disabled>
      </tab>
      <tab-group header="Third tab group :milky_way:">
        <tab header="Stars :star:">
          star facts
        </tab>
        <tab header="Disabled Moon :new_moon:" disabled>
        </tab>
      </tab-group>
      <tab-group header="Disabled fourth tab group" disabled>
        <tab header="Hidden tab">
          ...
        </tab>
      </tab-group>
    </tabs>
    

    OUTPUT:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. Aenean leo lacus, congue vel auctor a, tincidunt sed nunc. Integer in odio sed nunc porttitor venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam fringilla tincidunt augue a pulvinar. Some stuff about stars ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.

    Options

    tabs:

    Name Type Default Description
    active Number 0 Active Tab index (0-based)

    tab:

    Name Type Default Description
    header String null Tab title.
    disabled Boolean false Whether Tab is clickable and can be activated.

    tab-group:

    Name Type Default Description
    header String null Tab Group title.
    disabled Boolean false Whether Tab Group is clickable and can be activated.
    <tabs>
            <tab header="First tab">
            Content of the first tab
            </tab>
            <tab header="Second tab">
            Contents of the second tab
            </tab>
            <tab-group header="Third tab group :tv:">
            <tab header="Stars :star:">
            Some stuff about stars ...
            </tab>
            <tab header="Moon">
            Some stuff about the moon ...
            </tab>
            </tab-group>
            </tabs>
            
            
    Content of the first tab Contents of the second tab Some stuff about stars ... Some stuff about the moon ...
    Tags
    <p tags="language--java advanced">System.out.println("Hello world");</p>
    <p tags="language--C# basic">Console.WriteLine("Hello world");</p>
    
    <frontmatter>
      title: "Hello World"
      tags: ["language--java"]
    </frontmatter>
    

    filterTags: Toggling alternative contents in a page

    You can use tags to selectively filter HTML elements when building a site.

    Tags are specified by the tags attribute, and can be attached to any HTML element. During rendering, only elements that match tags specified in the site.json files will be rendered.

    Example: Attaching tags to elements:

    # Print 'Hello world'
    
    <p tags="language--java">System.out.println("Hello world");</p>
    <p tags="language--C#">Console.WriteLine("Hello world");</p>
    <p tags="language--python">print("Hello world")</p>
    

    You need to specify the tags to include in the pluginsContext, under tags:

    {
      ...
      "plugins" : [
        "filterTags"
      ],
      "pluginsContext" : {
        "filterTags" : {
          "tags": ["language--java"]
        }
      }
    }
    

    All other tagged elements will be filtered out. In this case, only the element with the language--java tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.

    If the filterTags plugin is not enabled in site.json, all tagged elements will be rendered.

    You can also use multiple tags in a single HTML element. Specify each tag in the tags attribute separated by a space. An element will be rendered if any of the tags matches the one in site.json.

    Example: Attaching multiple tags to an element:

    # For loops
    
    <p tags="language--java language--C#">for (int i = 0; i < 5; i++) { ... }</p>
    

    As long as the language--java or language--C# tag is specified, the code snippet will be rendered.

    Alternatively, you can specify tags to render for a page in the front matter.

    Example: Specifying tags in front matter:

    <frontmatter>
      title: "Hello World"
      tags: ["language--java"]
    </frontmatter>
    
    <p tags="language--java advanced">System.out.println("Hello world");</p>
              <p tags="language--C# basic">Console.WriteLine("Hello world");</p>
              
              
    <frontmatter>
      title: "Hello World"
      tags: ["language--java"]
    </frontmatter>
    

    Tags in site.json will be merged with the ones in the front matter, and are processed after front matter tags. See Hiding Tags for more information.

    Advanced Tagging Tips

    You can use a * in a tag name to match elements more generally. A * in a tag will match any number of characters at its position.

    Example: Using general tags:

    <frontmatter>
      title: "Hello World"
      tags: ["language--*"]
    </frontmatter>
    
    <p tags="language--java">System.out.println("Hello world");</p>
    <p tags="language--C#">Console.WriteLine("Hello world");</p>
    <p tags="language--python">print("Hello world")</p>
    

    All 3 <p>s will be shown.

    Hiding Tags

    Using - at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.

    Example: Using general tags:

    index.md
    
    <frontmatter>
      title: "Hello World"
      tags: ["language--java"]
    </frontmatter>
    
    <p tags="language--java">System.out.println("Hello world");</p>
    <p tags="language--C#">Console.WriteLine("Hello world");</p>
    <p tags="language--python">print("Hello world")</p>
    
    site.json
    
    {
      ...
      "plugins" : [
        "filterTags"
      ],
      "pluginsContext" : {
        "filterTags" : {
          "tags": ["-language--*", "language--C#"]
        }
      }
    }
    

    language--java is overridden by -language--*, so only language--C# is shown.

    This only works because tags are processed left to right, so all language--* tags are hidden before language--C#. Tags in site.json are processed after tags in <frontmatter>.

    ```html # Print 'Hello world'

    System.out.println("Hello world");

    Console.WriteLine("Hello world");

    print("Hello world")

    ``` ```json { ... "plugins" : [ "filterTags" ], "pluginsContext" : { "filterTags" : { "tags": ["language--java"] } } } ```
    <p tags="language--java advanced">System.out.println("Hello world");</p>
            <p tags="language--C# basic">Console.WriteLine("Hello world");</p>
            
            
    <frontmatter>
      title: "Hello World"
      tags: ["language--java"]
    </frontmatter>
    
    Text Styles
    **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
    ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%
    

    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

    Thumbnails
    <thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
    

    Thumbnails

    A thumbnail component allows you to insert thumbnails using text, images, or icons.

    CODE:

    <thumbnail circle src="../../images/deer.jpg" size="100"/>
    <thumbnail circle text=":book:" background="#dff5ff" size="100"/>
    <thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
    <thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
    
    <thumbnail src="../../images/deer.jpg" size="100"/>
    <thumbnail text=":book:" background="#dff5ff" size="100"/>
    <thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
    <thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
    

    OUTPUT:

    📖 CS

    📖 CS

    Options

    Name Type Default Description
    alt string This must be specified if src is specified
    The alternative text of the image.
    background string Specifies the background color.
    Accepts any valid CSS background property
    border string Specifies the border thickness, type, and color.
    Accepts any valid CSS border property
    circle boolean false If this option is enabled, the thumbnail will be circle shaped instead of square
    font-color string The color of the text, affects normal text and icons (but not emojis)
    font-size string Text size, defaults to half of size, affects text, icons and emojis
    size string 100 The size of the thumbnail in pixels
    src string The URL of the image.
    The URL can be specified as absolute or relative references. More info in: Intra-Site Links
    text string The text to use in the thumbnail, icons, emojis and markdown are supported here

    If both text and src are specified, src will take higher priority.

    <thumb circle src="https://markbind.org/images/logo-lightbackground.png"        size="100"/>
            
            
    Tooltips
    Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.
    

    Tooltips

    CODE:

    <tooltip header content="Lorem ipsum dolor sit amet" placement="top">
      <button class="btn btn-secondary">Popover on top</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="left">
      <button class="btn btn-secondary">Popover on left</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="right">
      <button class="btn btn-secondary">Popover on right</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="bottom">
      <button class="btn btn-secondary">Popover on bottom</button>
    </tooltip>
    <hr />
    Trigger
    <p>
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
        <button class="btn btn-secondary">Click</button>
      </tooltip>
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
        <button class="btn btn-secondary">Contextmenu (right click)</button>
      </tooltip>
      <br />
      <br />
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
        <input placeholder="Focus"></input>
      </tooltip>
    </p>
    <h4>Markdown</h4>
    <tooltip effect="scale" content="*Hello* **World**">
      <a href="">Hover me</a>
    </tooltip>
    <br />
    <br />
    <h4>Free Text</h4>
    <tooltip content="coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules."><i>coupling</i></tooltip>
    

    OUTPUT:


    Trigger



    Markdown: Hover me

    Free Text: coupling

    Using trigger for Tooltip:

    CODE:

    More about <trigger for="tt:trigger_id">trigger</trigger>.
    <tooltip id="tt:trigger_id" content="This tooltip triggered by a trigger"></tooltip>
    <br>
    This is the same <trigger for="tt:trigger_id">trigger</trigger> as last one.
    

    OUTPUT:

    More about trigger.
    This is the same trigger as last one.

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name Type Default Description
    trigger String hover How the tooltip is triggered.
    Supports: click, focus, hover, contextmenu.
    content String '' Text content of the tooltip.
    placement String top How to position the tooltip.
    Supports: top, left, right, bottom.
    Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip>
            to see a tooltip.
            
            

    Hover here to see a tooltip.

    Variables

    Global variables:

    _markbind/variables.md:

    <variable name="year">2018</span>
    

    The year was {{ year }}.

    Page variables:
    <variable name="full_name">John Doe</variable>

    The name was {{ full_name }}.

    User Guide → Reusing Contents → Variables

    Variables

    MarkBind variables are ideal for reusing small bits of code in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring the variable instead of duplicating the code bit.

    Global Variables

    Global variables are to be defined in the _markbind/variables.md file. Each variable must have an name and the value can be any MarkBind-compliant code fragment. The name should not contain - and .. For example, search-option and search.options are not allowed.

    Example: Here's how you can define two variables year and options:

    <variable name="year">2018</variable>
    
    <variable name="options">
    * yes
    * no
    * maybe
    </variable>
    

    To include a variable value in your code, give the variable id enclosed in double curly braces.

    Example: Here's how you can use the variable year:

    The year was {{ year }}. The year was 2018.

    MarkBind variables are global; they are available from anywhere in the code base.

    MarkBind provides a number of built-in variables.

    Built-in Global Variables

    Built-in Variable: baseUrl

    Represents the root directory of the project. Used for specifying 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.

    Absolute paths:

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

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

    1. Click [here]( {{ baseUrl }} /userGuide/reusingContents.html).
    2. ![]( {{ 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" />
    

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

    <img src="textbook/image.png" />
    

    or by including subsite.md:

    <include src="textbook/subsite.md" />
    
    Relative links to resources (e.g. images, hrefs) should be valid relative to the original, included file. In other words, the links should be accessible when traversing starting from the location of the included file.
    In the example above, image.png is in the same directory as subsite.md. When using relative references, the correct path is image.png and not textbook/image.png.
    Built-in Variable: timestamp

    {{ timestamp }} is the time stamp (in UTC) that indicates when the page was generated.

    Example: Page generated at: {{ timestamp }} Page generated at: Sun, 21 Jul 2019 12:20:37 GMT

    Built-in Variable: MarkBind

    {{MarkBind}} represents a code snippet that specifies the MarkBind version in use and is linked to the MarkBind website.

    Example: Page generated by: {{ MarkBind }} Page generated by: MarkBind 2.5.3

    Variables: Defaults

    You can specify a default value for a variable, which is displayed when the variable is not specified in variables.md and by any of the includes of the page. This is done by adding or defaultValue within the curly braces.

    Example: If name is not declared in variables.md:
    My name is {{ name or "Anonymous" }}. My name is Anonymous.

    Page Variables

    You can also declare variables for use within a single page. These variables work exactly the same as regular variables, except that their values only apply to the page they are declared in. This can be done by using the <variable> tag.

    Example: Declaring page variables:

    <variable name="full_name">John Doe</variable>
    My name is {{ full_name }}. This is {{ full_name }}'s site.

    Note: These variables will not be applied to <include> files. Additionally, global variables (_markbind/variables.md) will take precedence over any page variables. See also: Specifying Variables in an <include>.

    Variables: Tips and Tricks

    Variables can refer to other variables that are declared earlier, including built-in variables.

    Example: This variable uses a built-in variable:
    <variable name="time">{{ timestamp }}</variable>

    Here, the second variable will be assigned the contents of the first variable.
    <variable name="first">This is the first variable.</variable>
    <variable name="second">{{ first }}</variable>

    This will not work, as the fourth variable is declared below the line that refers to it.
    <variable name="third">{{ fourth }}</variable>
    <variable name="fourth">This is the fourth variable.</variable>

    Note that if the variable being referenced contains HTML tags, MarkBind may escape the tags and render it literally.

    Example: If we declare the variables as follows,

    <variable name="note"><span style="color: blue">Note: </span></variable>
    <variable name="note_2">{{ note }}</variable>
    <variable name="const_note">{{ note_2 }} This is a constant.</variable>

    the result will be,

    {{ const_note }} <span style="color: blue">Note: </span> This is a constant.

    You must use the safe filter when using such variables:

    Example: If we use the safe filter for the second variable:

    <variable name="note"><span style="color: blue">Note: </span></variable>
    <variable name="note_2">{{ note | safe }}</variable>
    <variable name="const_note">{{ note_2 }} This is a constant.</variable>

    {{ const_note }} Note: This is a constant.

    Global variables:

    _markbind/variables.md:

    <variable name="year">2018</span>
            
            

    The year was {{ year }}.

    Page variables:
    <variable name="full_name">John Doe</variable>

    The name was {{ full_name }}.


    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.