<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>
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
<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>
> Blockquote, first paragraph
>
> Second paragraph
>> Nested blockquote
<box type="warning">
warning
</box>
```xml
<foo>
<bar type="name">goo</bar>
</foo>
```
`<bar type="name">goo</bar>`{.xml}
<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>
@[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)
:+1: :exclamation: :x: :construction:
**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>
title: Binary Search Tree
pageNav: 2
</frontmatter>
### Heading level 3
...
###### Heading level 6
*****
-----
______________
:glyphicon-hand-right: :fab-github: :fas-home:
<include src="foo.md#bar" boilerplate inline trim>
<variable name="x">5</variable>
</include>
<span class="keyword d-none">regress</span>
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
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
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.
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>
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
<panel header="primary type panel" type="primary" >
...
</panel>
This is the first paragraph.
This is another paragraph. This is the second sentence.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
MarkBind Logo
</pic>
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>
<!-- 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>
<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>
<question type="mcq">...</question>
<question type="checkbox">...</question>
<question type="text">...</question>
</quiz>
<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>
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:
Animal | Trainable?| Price | Remarks
:----- | :-------: | ----: | ----
Ants | no | 5 |
Bees | no | 20 |
Cats|yes|100|
<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>
<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>
**Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.
<tree>
C:/course/
textbook/
index.md
index.md
reading.md
site.json
</tree>
Global variables:
_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.
Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.