Tutorial Post

2 minute read

Basic

Headers

Header 1

Header 2

Header 3

Styling

Bold

Italics

Bold and Italics

Hidden Text

Blurred Text, slowly faded in Spoilers Spoilers Spoilers Spoilers Spoilers

Collapsible Markdown

CLICK ME

hidden code blocks!

```html import numpy as np def hello_world(): print('Hello World!'')
That's All Folks
```

1
2
3
import numpy as np
def hello_world():
    print('Hello World!'')

1
2
3
4
5
<div class="demo-thats-all-container">  
    <div class="demo-thats-all-folks">
        That's All Folks
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">More Info</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
        its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
        plug-ins. Test-Driven Development.
      </p>
    </div>
  </div>
</div>

Lists

  1. Item 1

  2. Item 2

  • Unordered Item

    • Sub Item 1

      1. Bold Sub Sub Ordered Item

In-Line

I’m a reference-style link 1

I’m a reference-style link 1

Images

Hold your pointer clicked over the image to expand the view.

Description

Code

Inline code.

1
2
3
import numpy as np
def hello\_world():
    print('Hello World!'')

MathJax

Use MathJax for Math.

Mermaid Visualization

  • Markdown

  • HTML

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h

Quotes

War does not decide who is right, only who is left.

Rule


HTML

Can write the whole post or sections in HTML for very specific needs. [For the advanced user or the code savvy.]

Advanced Functionality

Head over to the documentation page for tutorials on some basic html formatting and some extensions you can use for cool stuff like interactive 3D visualizations.

Color and Alignment

This text is centered.

This is a red text with blue and green inline text.

Some Advanced Features

Data Projector

STL