Hexo Blogging Cheatsheet

Hexo Blogging Cheatsheet

  1. Useful links
  2. My blog’s information
  3. Design
  4. Frequently used Emoji
  5. CSS
  6. Markdown (with plugins)
  7. Github Card
  8. Mermaid JS
  9. Barchart

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

My blog’s information

Design

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 &#x21E7;</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 H20
sup x^2^ x2
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://example.com) link text
Image ![alt text](https://example.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:

  1. item 1
  2. 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

📁 41
Repositories
⭐ 22
Stars
📈 57
Commits
👥 14
Followers
🔄 27
Pull Requests
❗ 0
Issues
JavaScript 41.2% Swift 11.8% Dart 8.8% Python 8.8% TypeScript 8.8% Other 20.6%

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

Barchart from easy charts

Result:

Code:

{% barchart 'Sample Chart' %}
Apple | Orange | Banana | Lemon
50 | 740 | 218 | 193
{% endbarchart %}

  1. Footnote sample ↩︎

Share