Post Template

Mathjax

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are

markdown:

When $$a \ne 0$$, there are two solutions to $$ax^2 + bx + c = 0$$ and they are
$$x_1 = {-b + \sqrt{b^2-4ac} \over 2a}$$
$$x_2 = {-b - \sqrt{b^2-4ac} \over 2a} \notag$$

After MathJax is enabled, you can set mathjax_autoNumber: true to have equations be numbered automatically. You can use \notag or \nonumber to prevent individual equations from being numbered.

Image Sizes

Extreme Small

<img class="image image--xs" src=""/>

Small

<img class="image image--sm" src=""/>

Middle

<img class="image image--md" src=""/>

Large

<img class="image image--lg" src=""/>

Extreme Large

<img class="image image--xl" src=""/>

Image Borders

Border

![Image](path-to-image){:.border}

Shadow

![Image](path-to-image){:.shadow}

Rounded

![Image](path-to-image){:.rounded}

Circle

![Image](path-to-image){:.circle}

Mixture

![Image](path-to-image){:.border.rounded}

Alert

Success Text.

Info Text.

Warning Text.

Error Text.

markdown:

Success Text.
{:.success}

Info Text.
{:.info}

Warning Text.
{:.warning}

Error Text.
{:.error}

Tag

success

info

warning

error

markdown:

`success`{:.success}

`info`{:.info}

`warning`{:.warning}

`error`{:.error}

Youtube

markdown:

<div>{%- include extensions/youtube.html id='wbY97-hdD5c' -%}</div>

Mermaid

graph TB;
    A[Do you have a problem in your life?]
    B[Then don't worry]
    C[Can you do something about it?]
    A--no-->B;
    A--yes-->C;
    C--no-->B;
    C--yes-->B;

markdown:

```mermaid
graph TB;
    A[Do you have a problem in your life?]
    B[Then don't worry]
    C[Can you do something about it?]
    A--no-->B;
    A--yes-->C;
    C--no-->B;
    C--yes-->B;
```

Mermaid supports 3 kinds of diagram:

• Flowchart

• Sequence Diagram

• Gant Diagram

Chart

{
  "type": "line",
  "data": {
    "labels": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
    ],
    "datasets": [
      {
        "label": "# of bugs",
        "fill": false,
        "lineTension": 0.1,
        "backgroundColor": "rgba(75,192,192,0.4)",
        "borderColor": "rgba(75,192,192,1)",
        "borderCapStyle": "butt",
        "borderDash": [],
        "borderDashOffset": 0,
        "borderJoinStyle": "miter",
        "pointBorderColor": "rgba(75,192,192,1)",
        "pointBackgroundColor": "#fff",
        "pointBorderWidth": 1,
        "pointHoverRadius": 5,
        "pointHoverBackgroundColor": "rgba(75,192,192,1)",
        "pointHoverBorderColor": "rgba(220,220,220,1)",
        "pointHoverBorderWidth": 2,
        "pointRadius": 1,
        "pointHitRadius": 10,
        "data": [
          65,
          59,
          80,
          81,
          56,
          55,
          40
        ],
        "spanGaps": false
      }
    ]
  },
  "options": {}
}

markdown:

```chart
{
  "type": "polarArea",
  "data": {
    "datasets": [
      {
        "data": [
          11,
          16,
          7,
          3,
          14
        ],
        "backgroundColor": [
          "#FF6384",
          "#4BC0C0",
          "#FFCE56",
          "#E7E9ED",
          "#36A2EB"
        ],
        "label": "My dataset"
      }
    ],
    "labels": [
      "Red",
      "Green",
      "Yellow",
      "Grey",
      "Blue"
    ]
  },
  "options": {}
}
```