Hexoブログチートシート

Hexoブログチートシート

  1. 便利なリンク
  2. 私のブログの情報
  3. デザイン
  4. よく使う絵文字
  5. CSS
  6. Markdown（プラグイン付き）
  7. Githubカード
  8. Mermaid JS
  9. 棒グラフ

このページは、投稿やページで使用されるコンポーネントのテストにも使用されます。

便利なリンク

私のブログの情報

デザイン

よく使う絵文字
😄 :D(ショートカット)
😄 :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:

その他はEmoji Cheatsheetから

CSS

キー

  • Control <kbd>Contro</kbd>
  • Shift ⇧ <kbd>Shift &#x21E7;</kbd> - Unicode文字を使用

Markdown（プラグイン付き）

  • ++挿入++ 挿入
  • 脚注 [^1]マーク用[1]、[^1]:注釈用
  • {% raw %}{% endraw %}を使用（markdownが{{}}または{%%}で問題を起こす場合）
  • Youtube動画 {% youtube [youtube id] %}
アクション Markdown サンプル
下付き H~2~0 H20
上付き x^2^ x2
太字 **太字** 太字
斜体 *斜体* 斜体
太字と斜体 ***太字と斜体*** 太字と斜体
マーク ==マーク== マーク
取り消し線 ~~取り消し線~~ 取り消し線
インラインコード `インラインコード` インラインコード
リンク [リンクテキスト](https://neo01.com) リンクテキスト
画像 ![代替テキスト](https://neo01.com/image.jpg)

スタイルクラスを持つ属性、例：

# ヘッダー {.style-me}
段落 {data-toggle=modal}
段落 *スタイルを適用*{.red} さらにテキスト

出力

<h1 class="style-me">ヘッダー</h1>
<p data-toggle="modal">段落</p>
<p>段落 <em class="red">スタイルを適用</em> さらにテキスト</p>

テーブル列の配置

コード：

| デフォルト | 左 | 中央 | 右 |
| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |

結果：

デフォルト 左 中央 右
1 1 1 1
22 22 22 22
333 333 333 333

引用

コード：

> 引用テキスト

結果：

引用テキスト

順序付きリスト

コード：

1. アイテム1
2. アイテム2

結果：

  1. アイテム1
  2. アイテム2

順序なしリスト

コード：

- アイテム1
- アイテム2

結果：

  • アイテム1
  • アイテム2

水平線

コード：
---

結果：

コードブロック

結果：

コードブロック

コード：

~~~
コードブロック
~~~

Githubカード

ユーザー

コード：

{% githubCard user:neoalienson %}

neo.alienson

@neoalienson

📍 Hong Kong

🔗 https://01man.com

📁 43
Repositories
⭐ 22
Stars
📈 28
Commits
👥 14
Followers
🔄 22
Pull Requests
❗ 0
Issues
JavaScript 44.4% Swift 11.1% Dart 8.3% Python 8.3% TypeScript 8.3% Other 19.4%

リポジトリ

コード：

{% githubCard user:neoalienson repo:pachinko %}

結果：

📖

neoalienson/pachinko

An iOS 'pinball' game using SpriteKit and Swift with physics engine

⭐ 7 Stars 🍴 1 Forks Language: C++

Mermaid JS

事前レンダリング。

コード：

{% mermaid %}
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["中央の幅広いもの"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
{% endmermaid %}

結果：

block-beta columns 1 db(("DB")) blockArrowId6<["   "]>(down) block:ID A B["中央の幅広いもの"] C end space D ID --> D C --> D style B fill:#969,stroke:#333,stroke-width:4px

ライブレンダリング

block-beta
columns 1
  db(("DB"))
  blockArrowId6<["   "]>(down)
  block:ID
    A
    B["中央の幅広いもの"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px

棒グラフ

結果：

コード：

{% echarts %}
{
  "title": {
    "text": "オペレーティングシステム別エフェメラルポート範囲"
  },
  "tooltip": {},
  "xAxis": {
    "type": "category",
    "data": ["Linux (旧)", "Linux (新)", "Windows", "FreeBSD", "macOS"]
  },
  "yAxis": {
    "type": "value",
    "name": "ポート数"
  },
  "series": [{
    "type": "bar",
    "data": [28233, 28232, 16384, 55536, 16384],
    "itemStyle": {
      "color": "#1976d2"
    }
  }]
}
{% endecharts %}

  1. 脚注サンプル ↩︎

シェア