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>

Breadcrumbs

<breadcrumb />

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>

Dropdowns

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

Links

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>

Nav Bars

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

<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 is **correct**. 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>

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

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

Math