Syntax Reference

Expand the panels for detailed explanations of the feature or click on the link in the header to go to the corresponding page!
Annotations
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
  <a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet" />
  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1a"/>
  <a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" label="1b" legend="both"/>
</annotate>
Classes, Attributes & Identifiers
add a space before '{' for block level markdown {.class-name attribute="value" attribute=value #id}

don't add a space for **inline**{.text-danger} markdown

For a more detailed guide, see: https://www.npmjs.com/package/markdown-it-attrs

Badges
<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge bg-light text-dark">4</span>
</button>
Blockquotes
> Blockquote, first paragraph
>
> Second paragraph
>> Nested blockquote
Boxes
<box type="warning">
  warning
</box>

<breadcrumb />
CardStacks
<cardstack searchable blocks="2">
    <card header="**Basic Card** :rocket:" tag="Basic Card" keywords="Basic">
        This is a basic card.<br>
        Click on this <trigger for="modal:triggerBait" trigger="click">trigger!</trigger>.
        <modal header="**You clicked on a Trigger!** :rocket:" id="modal:triggerBait">
          <md>You have just triggered a modal controlled by a trigger called trigger! :rofl:</md>
        </modal>
    </card>
    <card header="A *markdown* header" tag="Markdown, header, Cool" keywords="">
        You can apply markdown to headers and body elements!
        <box type="warning">
        <md>>**Like** *this* [cool](#cardstacks) `text` :cool:</md>
        </box>
    </card>
    <card header="Card with Image" keywords="Super duper cool" tag="Image, Cool">
      <annotate src="../../images/annotateSampleImage.png" height="500" alt="Sample Image">
        <a-point x="2%" y="13%" content="I am annotated" header="Annotated point"  opacity="0.2" size="20"/>
      </annotate>
    </card>
    <card header="Disabled card" tag="Disabled" keywords="Disabled" disabled>
      This card is disabled and will not show
    </card>
    <card header="An **interesting** question" tag="Question, Markdown" keywords="">
      <question type="checkbox" header="Which of the following is correct?" hint="Think out of the box! :fas-box:">
        <pic src="/images/math-question.jpg" alt="math question image" height="200" class="d-block mx-auto">
        <small><md>Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)</md>
        </small>
        </pic>
        <q-option correct reason="Multiply the numbers on the left together and add the leftmost number!">
          96
        </q-option>
        <q-option reason="Under normal circumstances, this would be correct.">
          19
        </q-option>
        <q-option correct reason="Simply add the running sum of the results as well!">
          40
        </q-option>
        <q-option>
          811
        </q-option>
      </question>
    </card>
</cardstack>
Code
```xml
<foo>
  <bar type="name">goo</bar>
</foo>
```

`<bar type="name">goo</bar>`{.xml}
Dates
{{ baseDate | date(format, daysToAdd) }}
Diagrams
<puml width=300>
@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
@enduml
</puml>

<dropdown header="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>
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)
Emoji
:+1: :exclamation: :x: :construction: :) :/ :D
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.
Frontmatter
<frontmatter>
  title: Binary Search Tree
  pageNav: 2
</frontmatter>
Headings
### Heading level 3
...
###### Heading level 6
Horizontal Rules
*****
-----
______________
Icons

:glyphicon-hand-right: :fa-brands-github: :fa-solid-home:

Images
![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>
Keywords
<span class="keyword d-none">regress</span>
Line Breaks
This is the second sentence.<br>
This should be on a new line.

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

MarkBind home is at [here][1].

[1]: https://markbind.org
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
Math Formulae

Solve the following simultaneous equations:

\[ 3x + y = 11 \] (1)

\[\frac{2x}{3} + \frac{2y}{3} = 8\] (2)

Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.
Modals
Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
<modal header="Modal header" id="modal:unused">
    Modal content
</modal>

<navbar type="primary">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">
    <li><a href="#navbars" 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>
Page Navigation Menus
<frontmatter>
  pageNav: 2
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<page-nav-print />

# Overview
Content of the page...
Panels
<panel header="primary type panel" type="primary" >
  ...
</panel>
Paragraphs
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" lazy>
  MarkBind Logo
</pic>
Popovers
Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.

<popover id="pop:context-target" header="Popover header" placement="top">
<div slot="content">

description :+1:

</div>
</popover>
Questions and Quizzes
MCQ and Checkbox questions
<!-- use type="checkbox" for checkbox questions -->

<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
  <!-- Insert the reason for the option using the reason attribute -->
  <q-option reason="This option **does not contradict the heuristics recommended**. We need to figure out if a positive test case works!">
    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
  </q-option>
  <q-option>
    It is ok to combine valid values for different inputs.
  </q-option>
  <q-option>
    No more than one invalid test input should be in a given test case.
  </q-option>
  <!-- Use the 'correct' attribute to indicate an option as correct. -->
  <q-option correct>
    All invalid test inputs must be tested together.
    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
    <div slot="reason">
    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
    correctly by the SUT.
    This is because most SUTs return an error message upon encountering the first invalid input.
    </div>
  </q-option>
  <div slot="hint">
  How do you figure out which inputs are wrong? (or correct)
  </div>
</question>
Fill-in-the-Blanks questions

<question type="blanks" hint="Google it!">

  ###### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.

  <q-option keywords="Norbert Elias, Elias" reason="That's his name!"></q-option>
  <q-option keywords="figuration"></q-option>
</question>
Text questions

<question type="text" header="Which country did the Hawaiian pizza originate from?"
          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
  <div slot="hint">

  Watch some pizza commercials! :tv:

  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
  </div>
</question>
Quiz
<quiz>
  <question type="mcq">...</question>
  <question type="checkbox">...</question>
  <question type="blanks">...</question>
  <question type="text">...</question>
</quiz>
Scroll To Top Button
<scroll-top-button
    icon=":fas-arrow-circle-up:"
    icon-size="2x"
    bottom="2%"
    right="2%"
></scroll-top-button>
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>

<site-nav>
* [**Getting Started**](/userGuide/gettingStarted.html)
* **Authoring Contents** :expanded:
  * [Overview](/userGuide/authoringContents.html)
  * [Adding Pages](/userGuide/addingPages.html)
  * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)
  * [Formatting Contents](/userGuide/formattingContents.html)
  * [Using Components](/userGuide/usingComponents.html)
</site-nav>
Tables
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>
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>
Text Styles
**Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
Thumbnails
<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.
Tree
<tree>
C:/course/
  textbook/
    index.md
  index.md
  reading.md
  site.json
</tree>
Variables
Place global variables in `_markbind/variables.md`
<variable name="year">2018</variable>
The year was {{ year }}

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

  4. Math