Syntax Cheat Sheet

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>

Code
```xml
<foo>
  <bar type="name">goo</bar>
</foo>
```
`<bar type="name">goo</bar>`{.xml}

Dates
{{ "2019-08-12" | date("DD.MM.YYYY", 10) }}

22.08.2019


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:

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.

Front Matter
<frontmatter>
  title: Binary Search Tree
  pageNav: 2
</frontmatter>

Headings
### Heading level 3
...
###### Heading level 6

Horizontal Rules
*****
-----
______________

Icons

:glyphicon-hand-right: :fab-github: :fas-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>

Page Navigation Menus

Example In the page that you want to have page navigation, you may show only <h1> and <h2> headings in the pageNav, and set a custom pageNav title like so:

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

Then, in your layout file, use the <page-nav /> component to position the pageNav.

Example Example usage of the <page-nav /> component


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

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="text">...</question>
</quiz>

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

CODE:

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

OUTPUT:


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

Global variables:

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