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

Code:

{% mermaid %}
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
{% endmermaid %}

Result:

Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Car

Barchart

Barchart from easy charts

Result:

Code:

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

  1. Footnote sample ↩︎

Share