Reader-Facing Features

Headings

Heading level 3

...

Heading level 6

details...


Text Styles

Bold, Italic, Bold and Italic, Inline Code Strike through, Super Bold, Underline, Highlight, Dim, Large, Small, Superscript, Subscript

details...


Blockquotes

Blockquote, first paragraph

Second paragraph

Nested blockquote

details...


Lists
  1. Item 1
    1. Sub item 1.1
    2. Sub item 1.2
  • Item 2
    • item 2.1
  • Item 3
  • Item 4

details...


Code
<foo>
  <bar type="name">goo</bar>
</foo>

Syntax coloring for inline code: <bar type="name">goo</bar> too!

details...


Horizontal Rules

details...


MarkBind home is at here.

details...


Footnotes
1 + 1 = 2 ^[Math]

details...


Images

alt text here

details...


Classes, Attributes & Identifiers
* Apply to the list item itself like so {.text-success #list-item-id} * Curly groups after newlines apply to the closest nested list {.text-danger} {.bg-light} * Curly groups two lines after the last line apply to the top most list {.alert-info}

details...


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

details...


Emoji

šŸ‘ ā—ļø āŒ šŸš§

details...


Icons

details...


Embeds

Embedded YouTube video:

Embedded slide deck:

details...


Dates

CODE:

{% set base1 = "2019-08-12" %}
{% set format1 = "DD MM YYYY" %}
{% set format2 = "ddd Do MM" %}
{{ base1 | date }}
{{ base1 | date(format1) }}
{{ base1 | date(format1, 10) }}
{{ base1 | date(format2, 10) }}

OUTPUT:

Mon 12 Aug
12 08 2019
22 08 2019
Thu 22/08

details...


Math Formulae

Solve the following simultaneous equations:

3x+y=11 3x + y = 11 (1)
2x3+2y3=8\frac{2x}{3} + \frac{2y}{3} = 8(2)

Euler's equation eiĻ€+1=0 e^{i\pi}+1=0 is a beautiful equation.

details...


Badges

Primary Success

Feature Y stable

details...


Boxes
default
info
warning
success
important
wrong
tip
definition

details...


Panels

minimal type panel

seamless type panel


info type panel

...

danger type panel


warning type panel


success type panel


details...


Tabs
Content of the first tab
Contents of the second tab
Third tab group šŸ“ŗ
Some stuff about stars ...
Some stuff about the moon ...

details...


Pictures
Logo MarkBind Logo

details...


Annotations
Sample Image

details...


Thumbnails

details...


Diagrams

Sequence Diagram:

Use Case Diagram:

Class Diagram:

Activity Diagram:

Component Diagram:

State Diagram:

Object Diagram:

Gantt Diagram:

Entity Relation Diagram:

Ditaa Diagram:

Archimate Diagram:

details...


Tree
C:/course/ ā”œā”€ā”€ textbook/ ā”‚ ā””ā”€ā”€ index.md ā”œā”€ā”€ index.md ā”œā”€ā”€ reading.md ā””ā”€ā”€ site.json

details...


Tooltips

Hover to see a tooltip.

details...


Popovers

Hover over the keyword to see the popover.

details...


Modals

Hover here to open a modal.

details...


Search Bars

details...


details...


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

details...


Questions and Quizzes

Click start to begin

0 questions

details...



  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.