Inside Theme Showcase

Heading (h2)

h3

h4

h5

h6

Heading link

Image (click to zoom in/out)

1
2
3

<!-- new line -->
![space](https://.../nh-pluto-moonlight.jpg)
<!-- new line -->

Inline image

Not bad.

With link

• Travis CI build status:
• Lastest release:
• License:

hr

Below is a <hr>, I guess.

Above is a <hr>, I guess.

List

Unordered list

• list item
• list item
  • list item
  • list item
    • list item
    • list item
• list item

Ordered list

1. list item
2. list item
   1. list item
   2. list item
      1. list item
      2. list item
3. list item

Checklist

• Get up at 7:00 AM
• Eat breakfast
• Go to bet before 11:00 PM

Table

Text align

Headless

1
2
3

    |       |  
:-------:|:----------:|:-:
One      | Two        | Three

Long table

Blockquote

(https://hexo.io/docs/tag-plugins#Block-Quote)

Every interaction is both precious and an opportunity to delight.

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Code Block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

class Utils {
  animate(element: Element, attr: string, change: { from: number, to: number, duration?: number }, onEnd?: () => void) {
    if (change.from === change.to) return;

    if (!change.duration)
      element[attr] = change.to;

    const easing = (t, b, c, d) => c * ((t = t / d - 1) * t * t + 1) + b,
      { from, to } = change,
      during = Math.ceil((change.duration || 300) / 17) || 1;

    let start = 0,
      instance = null;

    step();

    function step() {
      const value = Math.ceil(easing(start, from, to - from, during));

      start++;
      if (start <= during) {
        element[attr] = value;
        instance = requestAnimationFrame(step);
      }
      else {
        if (onEnd) onEnd();
        cancelAnimationFrame(instance);
      }
    }
  }
}

With caption

(https://hexo.io/docs/tag-plugins#Code-Block)

1
2

_.compact([0, 1, false, 2, '', 3]);
// [1, 2, 3]

With blockquote

1 2 3

interface World { stop: () => never; }

Gist

(https://hexo.io/docs/tag-plugins#Gist)

Embed(iframe)

1 2 3 4

{% canvas [width] [height] %} ctx.fillStyle = 'red'; ctx.fillRect(0, 0, w, h); {% endcanvas %}

width is default to 300, height is default to 150，also the following constants are available in the scope:

constant
ctx	CanvasRenderingContext2D
w	Canvas width
h	Canvas height

For example:

1 2 3 4 5 6

{% canvas 100 100 %} const r = w / 2; ctx.fillStyle = 'antiquewhite'; ctx.arc(r, r, r, 0, Math.PI * 2); ctx.fill(); {% endcanvas %}

-->

MathJax (SSR)

When , there are two solutions to and they are

Extensions

Timeline

1
2
3
4
5
6

::: timeline
- xxx 2020/04/10
- xxx 2020/04/11
- xxx 2020/04/12
- xxx 2020/04/13
:::

Collapsable

1
2
3

::: collapse Click to show a secret
🥱 You got me !
:::

or just use native html tag

1
2
3
4

<details>
  <summary>Click to show a secret</summary>
  <p>🥱 You got me !</p>
</details>

Tree

1
2
3
4
5
6
7
8

# square by default
::: tree
::: tree icon:arrow
::: tree icon:circle
- level 1
  - level 2
    - level 3
:::

footnote

Here is a footnote reference,^[1] and another.^[2]