記事で使える装飾一覧

イントロダクション

ここでは、このブログで利用できる Markdown 記法、Shiki によるコードハイライト、および各種スタイルの見え方を紹介します。

見出し

見出しは # の数でレベルを表します。目次にも自動で反映されます。

小見出し (h3)

さらに細かいセクション分けができます。

テキスト装飾

通常の文章に対して、太字、斜体、打ち消し線、インラインコード が使えます。

また、太字と 斜体 を組み合わせることも可能です。

リスト

順不同リスト

• 箇条書き項目
• 入れ子も可能
  • 子項目 A
  • 子項目 B
• 親項目に戻る

番号付きリスト

1. 最初の手順
2. 次の手順
3. 最後の手順
   1. サブ手順
   2. サブ手順

引用

これは引用ブロックです。 複数行にわたる場合はこのように表示されます。

引用の中でも太字 や コード が使えます。

コードハイライト

インラインコード

変数 count を += 1 するとインクリメントできます。

シンプルなコードブロック

const greeting = "Hello, world!";
console.log(greeting);

差分表示

+ export const newFeature = () => true;
- const oldFeature = () => false;
  const unchanged = () => null;

タイトル付きコードブロック

export function add(a: number, b: number): number {
  return a + b;
}

様々な言語

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

fn main() {
    println!("Hello, Rust!");
}

.card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
}

横に長いコード (スクロール確認用)

// prettier-ignore
const veryLongLine = "これは非常に長いコード行で、画面幅を超えた場合に横スクロールが有効になることを確認するためのサンプルです。本当に長い行だと pre 要素に overflow-x: auto が設定されているので、この行がはみ出してスクロールできるようになります。";

テーブル

リンク

外部リンクは Zenn のように表示されます。

内部リンクは About ページ や 記事一覧 も問題なく動作します。

URL 埋め込み

URL を単独行に書くと自動的にカードとして表示されます。

yukikamome316 - Overview

Security Engineer; trying harder❤️‍🔥. yukikamome316 has 35 repositories available. Follow their code on GitHub.

https://github.com/yukikamome316

GitHub - yukikamome316/yukikamo.me: https://yukikamo.me

https://yukikamo.me. Contribute to yukikamome316/yukikamo.me development by creating an account on GitHub.

https://github.com/yukikamome316/yukikamo.me

注釈ブロック

HTML を使うことで、簡易的な注釈ブロックを表現できます。

水平線

トピックの区切りには --- で水平線を引きます。

LaTeX (数式)

LaTeX 記法で数式が書けます。インライン数式は $...$、ブロック数式は $$...$$ です。

インライン: $E = mc^2$

ブロック数式:

まとめ

以上が、このブログで利用できる主な装飾一覧です。新しい記法が追加されたら随時この記事を更新していきます。