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. Admonition Blocks
  10. 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://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:

  1. item 1
  2. item 2

Unordered list

Code:

- item 1
- item 2

Result:

  • item 1
  • item 2

Horizontal rule

Code:
---

Result:

Github Card

User

Code:

{% githubCard user:neoalienson %}

neo.alienson

@neoalienson

📍 Hong Kong

🔗 https://01man.com

📁 45
Repositories
⭐ 29
Stars
📈 77
Commits
👥 13
Followers
🔄 1
Pull Requests
❗ 7
Issues
JavaScript 55.0% Swift 10.0% TypeScript 7.5% Dart 5.0% C++ 5.0% Other 17.5%

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

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

Admonition Blocks

anote - General Notes

📝 Quick Note

This is a general note block for observations and additional context.

info - Additional Information

💡 Pro Tip

Use absolute paths when referencing assets in localized content.

todo - Task Reminders

✅ Action Items

  • Add excerpt to all blog posts
  • Verify tag capitalization
  • Test mermaid diagrams

warning - Important Warnings

⚠️ Breaking Change

Hexo 8.x requires Node.js 14.0.0 or higher. Update your environment before upgrading.

error - Critical Issues

❌ Common Mistake

Do not use note type - it conflicts with CSS. Always use anote instead.

success - Positive Outcomes

✅ Build Successful

Your site has been generated successfully and is ready for deployment.

tip - Best Practices

💡 Performance Optimization

Enable lazy loading for images to improve page load times.

question - Considerations

🤔 Design Decision

Should we use Git Flow or GitHub Flow for this project?

quote - Citations

💬 Linus Torvalds

Talk is cheap. Show me the code.

Advanced Formatting Inside Blocks

Lists Inside Admonition

⚠️ Security Checklist

Before deploying:

  1. Remove all API keys and secrets
  2. Enable HTTPS
  3. Update dependencies
    • Check for vulnerabilities
    • Run npm audit fix
  4. Test in staging environment

Blockquote Inside Admonition

📋 Design Philosophy

Simplicity is the ultimate sophistication. — Leonardo da Vinci

This principle applies to code architecture and user interface design.

Mixed Content

💻 Complete Setup Guide

Step 1: Install dependencies

npm install hexo-cli -g

Step 2: Create new project

  • Initialize: hexo init blog
  • Navigate: cd blog
  • Install: npm install

Step 3: Configuration checklist

  1. Update _config.yml
  2. Set site title and description
  3. Configure deployment settings

Note: Always backup your configuration before major changes.

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 %}

  1. Footnote sample ↩︎

Share