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)

<script> ⚠

1
2
3
4
5
6
7
8
9

stars: <span id="stargazers_count"></span>

<script>
fetch('https://api.github.com/repos/ikeq/hexo-theme-inside')
  .then(res => res.json())
  .then(json => {
    document.getElementById('stargazers_count').innerHTML = json.stargazers_count || json.message;
  });
</script>

stars:

To enable code minification, run npm install terser.

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]