Hexo Blogging Cheatsheet

Hexo Blogging Cheatsheet

  1. Useful links
  2. My blog’s information
  3. Design
  4. Frequently used Emoji
  5. CSS
    1. Keys
  6. Markdown (with plugins)
    1. Table Column Alignment
    2. Blockquote
    3. Ordered list
    4. Unordered list
    5. Horizontal rule
    6. Code block
  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

Code:

{% githubCard user:neoalienson repo:pachinko %}

Result:

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:

DB
   
A
A wide one in the middle
C
D

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