Skip to content

Latest commit

 

History

History
239 lines (161 loc) · 5.35 KB

english-showcase.md

File metadata and controls

239 lines (161 loc) · 5.35 KB
Raw

Theme Showcase

Heading (h2)

h3

h4

h5
h6

Heading link

Image (click to zoom in/out)

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

space

Inline image

Not bad.yes

With link

  • 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

ChecklistA

  • 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

&nbsp; | &nbsp; | &nbsp;
:-----:|:------:|:-:
A      | B      | 🙈
A B 🙈

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.

Seth GodinWelcome to Island Marketing

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

@DevDocstwitter.com/devdocs/status/356095192085962752

Code Block

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_.compact([0, 1, false, 2, '', 3]);
// [1, 2, 3]

Gist

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

JSFiddle

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

script

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

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

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

Canvas

Syntax：

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

{% 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^2+b^2=c^2$, there are two solutions to and they are

Code Color

init i=1
 if i=0{
   then i++
 }