Markdown Cheatsheet

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: :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 mark1, [^1]: for the note
  • Use {% raw %}{% raw %}{% endraw %}{% endraw %} if the markdown cause you trouble on {% raw %}{{}} or {%%}{% endraw %}
  • Youtube Video {% raw %}{% youtube [youtube id] %}{% endraw %}
ActionMarkdownSample
subH~2~0H20
supx^2^x^2^
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:

| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |{% endraw %}

Result:

DefaultLeftCenterRight
1111
22222222
333333333333

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"}
:::

Result:

neoalienson's avatar

neoalienson

@neoalienson

📁 --
Repositories
⭐ --
Stars
📈 --
Commits
👥 --
Followers
🔄 --
Pull Requests
❗ --
Issues

A repository

Code:

:::githubCard{user="neoalienson" repo="pachinko"}
:::

Result:

📖

neoalienson/pachinko

Loading repository data...

⭐ -- 🍴 -- Language: --

Mermaid JS

block-beta columns 1 db(("DB")) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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

Echarts

Simple bar chart:

{ "title": { "text": "Ephemeral Port Ranges by OS" }, "tooltip": {}, "xAxis": { "type": "category", "data": ["Linux", "Windows", "macOS", "FreeBSD"] }, "yAxis": { "type": "value", "name": "Ports" }, "series": [{ "type": "bar", "data": [28233, 16384, 16384, 55536] }] }

Line chart:

{ "title": { "text": "API Calls Over Time" }, "tooltip": {}, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri"] }, "yAxis": { "type": "value" }, "series": [{ "type": "line", "data": [320, 532, 401, 634, 590], "areaStyle": {} }] }

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. :::

Footnotes

  1. Footnote sample ↩