Hexo Blogging Cheatsheet

Useful links
My blog’s information
Design
Frequently used Emoji
CSS
Markdown (with plugins)
Github Card
Mermaid JS
Barchart

This page also used for testing components used in the posts and pages.

Useful links

My blog’s information

Check if my domain is blocked in mainland

Design

Font Awesome

Frequently used Emoji


😄 `:D`(shortcut)
😄 `:smile:`	😊 `:blush:`	😍 `:heart_eyes:`
😓 `:sweat:`	👍 `:thumbsup:`	😋 `:yum:`
😰 `:cold_sweat:`	😱 `:scream:`	😭 `:sob:`
😜 `:stuck_out_tongue_winking_eye:`	😗 `:kissing:`	😪 `:sleepy:`
💩 `:poop:`	✌️ `:v:`	💯 `:100:`
🙈 `:see_no_evil:`	🙉 `:hear_no_evil:`	🙊 `:speak_no_evil:`
💋 `:kiss:`	💀 `:skull:`	💧 `:droplet:`
🎆 `:fireworks:`	📢 `:loudspeaker:`	⚠️ `:warning:`
🚫 `:no_entry_sign:`	✅ `:white_check_mark:`	❌ `:x:`
㊙️ `:secret:`	⁉️ `:interrobang:`	‼️ `:bangbang:`

and more from Emoji Cheatsheet

CSS

Keys

Control <kbd>Contro</kbd>
Shift ⇧ <kbd>Shift ⇧</kbd> - use Unicode characters

Markdown (with plugins)

++Inserted++ Inserted
Footnote [^1] for the mark^[1], [^1]: for the note
Use {% raw %}{% endraw %} if the markdown cause you trouble on {{}} or {%%}
Youtube Video {% youtube [youtube id] %}

Action	Markdown	Sample
sub	`H~2~0`	H₂0
sup	`x^2^`	x²
Bold	`bold`	bold
Italic	`italic`	italic
Bold and Italic	`*bold and italic*`	bold and italic
Marked	`==marked==`	marked
Strikethrough	`~~strikethrough~~`	~~strikethrough~~
Inline code	`inline code`	`inline code`
Link	`[link text](https://neo01.com)`	link text
Image	`![alt text](https://neo01.com/image.jpg)`

Attributes with style class, eg:

# header {.style-me}
paragraph {data-toggle=modal}
paragraph *style me*{.red} more text

output

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
<p>paragraph <em class="red">style me</em> more text</p>

Table Column Alignment

Code:

| Default | Left | Center | Right |
| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |

Result:

Default	Left	Center	Right
1	1	1	1
22	22	22	22
333	333	333	333

Blockquote

Code:

> Some quote text

Result:

Some quote text

Ordered list

Code:

1. item 1
2. item 2

Result:

item 1
item 2

Unordered list

Code:

- item 1
- item 2

Result:

item 1
item 2

Horizontal rule

Code:
---

Result:

Code block

Result:

Code block

Code:

~~~
Code block 
~~~

Github Card

User

Code:

{% githubCard user:neoalienson %}

neo.alienson

@neoalienson

📍 Hong Kong

🔗 https://01man.com

📁 44

Repositories

⭐ 22

Stars

📈 33

Commits

👥 13

Followers

🔄 20

Pull Requests

❗ 0

Issues

JavaScript 52.6% Swift 10.5% TypeScript 7.9% Dart 5.3% C++ 5.3% Other 18.4%

A repository

Code:

{% githubCard user:neoalienson repo:pachinko %}

Result:

📖

neoalienson/pachinko

An iOS 'pinball' game using SpriteKit and Swift with physics engine

⭐ 7 Stars 🍴 1 Forks Language: C++

Mermaid JS

Prerendered.

Code:

{% mermaid %}
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
{% endmermaid %}

Result:

block-beta columns 1 db(("DB")) blockArrowId6<[" "]>(down) block:ID A B["A wide one in the middle"] C end space D ID --> D C --> D style B fill:#969,stroke:#333,stroke-width:4px

Live rendering

block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px

Barchart

Result:

Code:

{% echarts %}
{
  "title": {
    "text": "Ephemeral Port Ranges by Operating System"
  },
  "tooltip": {},
  "xAxis": {
    "type": "category",
    "data": ["Linux (Old)", "Linux (New)", "Windows", "FreeBSD", "macOS"]
  },
  "yAxis": {
    "type": "value",
    "name": "Number of Ports"
  },
  "series": [{
    "type": "bar",
    "data": [28233, 28232, 16384, 55536, 16384],
    "itemStyle": {
      "color": "#1976d2"
    }
  }]
}
{% endecharts %}

Footnote sample ↩︎