この記事は、ブログで使用可能な全ての要素を含むサンプル記事です。
見出しの例
H3見出し
このテーマではH4以降の見出しは定義されていませんが、必要に応じて src/styles/post.css で定義できます。
テキスト装飾
通常のテキストに加えて、太字、イタリック、取り消し線、そしてインラインコードを使用できます。
複数の装飾を組み合わせることも可能です：太字かつイタリック、コード内の**太字**は表示されません。
引用
優れたコードは、それが何をするのかを明確に示すべきです。
— Martin Fowler1
リスト
順序付きリスト
- 最初の項目
- 2番目の項目
- 3番目の項目
- ネストされた項目
- もう一つのネスト項目
順序なしリスト
- 項目1
- 項目2
- サブ項目A
- サブ項目B
- 項目3
タスクリスト
- 未完了のタスク1
- 完了したタスク
- 未完了のタスク2
- もう一つの完了タスク
テーブル
| 機能 | 説明 | 対応状況 |
|---|---|---|
| Markdown | 基本的なMarkdown記法 | ✅ 対応 |
| MDX | Reactコンポーネントの使用 | ✅ 対応 |
| コードハイライト | シンタックスハイライト | ✅ 対応 |
| 埋め込みコンテンツ | YouTube、Spotifyなど | ✅ 対応 |
テーブル内でもイタリック、太字、コードを使用できます。
HTML要素
下付き文字と上付き文字
化学式: H2O（水）
数学式: Xn + Yn = Zn（フェルマーの最終定理）
略語
HTML と CSS はウェブ開発の基礎です。
キーボード入力
ショートカットキー: CTRL + C でコピー、CTRL + V で貼り付け。
ハイライト
重要な部分をハイライト表示できます。
コードブロック
TypeScript
// TypeScriptの例
interface User {
id: number
name: string
email?: string
}
const user: User = {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
function greet(user: User): string {
return `Hello, ${user.name}!`
}JavaScript
// JavaScriptの例
export function debounce(func, wait) {
let timeout
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout)
func(...args)
}
clearTimeout(timeout)
timeout = setTimeout(later, wait)
}
}Python
# Pythonの例
def fibonacci(n: int) -> list[int]:
"""フィボナッチ数列を生成"""
if n <= 0:
return []
elif n == 1:
return [0]
elif n == 2:
return [0, 1]
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
print(fibonacci(10))Rust
// Rustの例
fn main() {
let numbers = vec![1, 2, 3, 4, 5];
let doubled: Vec<i32> = numbers
.iter()
.map(|x| x * 2)
.collect();
println!("{:?}", doubled);
}CSS
/* CSSの例 */
.button {
padding: 12px 24px;
background-color: var(--color-primary);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.button:hover {
background-color: var(--color-primary-hover);
}埋め込みコンテンツ
リンクカード
YouTube
Spotify
トラックの例：
GitHubリポジトリ
--
X（旧Twitter）投稿
画像
画像には自動的にキャプションが追加されます（altテキストがある場合）。
キャプションを非表示にするには、altテキストを空にするか、アンダースコアで始めます：
脚注の例
この文章には脚注2が含まれています。複数の脚注3も使用できます。
複合的な例
以下は、複数の要素を組み合わせた例です：
重要: このブログは以下の技術スタックを使用しています：
- Astro - 静的サイトジェネレーター
- TypeScript - 型安全性
- Markdown/MDX - コンテンツ記述
まとめ
この記事では、ブログで使用可能な以下の要素を紹介しました：
- ✅ 基本Markdown要素（見出し、段落、リスト、テーブルなど）
- ✅ テキスト装飾（太字、イタリック、コードなど）
- ✅ HTML要素（sub, sup, abbr, kbd, mark）
- ✅ コードブロック（複数言語対応、シンタックスハイライト）
- ✅ 埋め込みコンテンツ（YouTube、Spotify、GitHub、X、リンクカード）
- ✅ 画像（キャプション付き）
- ✅ 脚注
- ✅ 引用
これらの要素を組み合わせることで、豊富なコンテンツを作成できます。