Ikeq Cheng

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

Sep 5, 2018733 words in 4 min


Inside Theme Showcase

Heading (h2)

h3

h4

h5
h6

Image (click to zoom in/out)

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

space

Inline image

Not bad.yes

  • Travis CI build status: build-img
  • Lastest release: release-img
  • License: license-img

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

Hear no evil Speak no evil See no evil
🙉 🙊 🙈

Text align

Hear no evil Speak no evil See no evil
🙉 🙊 🙈

Headless

1
2
3
&nbsp;   | &nbsp;     | &nbsp;
:-------:|:----------:|:-:
One | Two | Three
One Two Three

Long table

Sun With Face Grinning Face Smiling Face Grinning Face With Big Eyes Smiling Face With Smiling Eyes Full Moon Face Grinning Face With Smiling Eyes Face With Monocle Cowboy Hat Face Thinking Face Face Vomiting
🌞 😀 ☺️ 😃 😊 🌝 😄 🧐 🤠 🤔 🤮

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)

_.compactUnderscore.js
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)

JSFiddle

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

<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:

For the lastest ES grammar and code minification.
Run the following command in the root directory of Hexo (not themes/inside):

1
npm install babel-core babel-preset-env html-minifier terser --save

Canvas ⚠

Syntax:

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 a \ne 0 , there are two solutions to ax^2 + bx + c = 0 and they are

x = {-b \pm \sqrt{b^2-4ac} \over 2a}.

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
:::
  • 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>
Click to show a secret

🥱 You got me !

footnote

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


  1. Here is the footnote. ↩︎

  2. Here’s one with multiple blocks. ↩︎

Buy me a cup of coffee ☕.

Load Disqus