日本語

GitHub Flavored Markdown デモ

· 5 分で読めます· デモ著者
デモマークダウンgfm

この記事では、このテーマでサポートされている GitHub Flavored Markdown (GFM) の全機能とコードのシンタックスハイライトをデモンストレーションします。

見出し

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

テキストフォーマット

通常のテキスト段落。吾輩は猫である。名前はまだ無い。

太字テキスト と これも太字

斜体テキスト と これも斜体

太字かつ斜体 と これも太字かつ斜体

取り消し線テキスト

これは下付き文字で、これは上付き文字です

リンク

インラインリンク

タイトル付きリンク

参照スタイルリンク

自動リンク URL: https://github.com

画像

サンプル画像

リスト

順序なしリスト

  • アイテム 1
  • アイテム 2
    • ネストしたアイテム 2.1
    • ネストしたアイテム 2.2
      • 深くネストしたアイテム
  • アイテム 3

順序付きリスト

  1. 最初のアイテム
  2. 2番目のアイテム
    1. ネストしたアイテム 2.1
    2. ネストしたアイテム 2.2
  3. 3番目のアイテム

タスクリスト

  • 完了したタスク
  • もう一つの完了したタスク
  • 未完了のタスク
  • もう一つの未完了のタスク

引用

これは引用です。 複数行にわたることができます。

ネストした引用：

これはネストされています

さらに深くネスト

フォーマット付き引用

  • リストを含むことができます
  • その他の要素も
コードブロックも

コード

インラインコード

JavaScript では定数に const、変数に let を使用します。

npm install package-name でパッケージをインストールします。

コードブロック

JavaScript / TypeScript

// ES6+ JavaScript の例
const greet = (name) => {
  console.log(`こんにちは、${name}さん！`);
};

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('エラー:', error);
    throw error;
  }
}

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `私は${this.name}、${this.age}歳です。`;
  }
}
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

type UserRole = 'admin' | 'editor' | 'viewer';

function getUserById(id: number): Promise<User | null> {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .catch(() => null);
}

Python

from dataclasses import dataclass
from typing import List, Optional
import asyncio

@dataclass
class User:
    id: int
    name: str
    email: str
    is_active: bool = True

class UserService:
    def __init__(self, db_connection):
        self.db = db_connection

    async def get_user(self, user_id: int) -> Optional[User]:
        """IDでユーザーを取得する。"""
        query = "SELECT * FROM users WHERE id = ?"
        result = await self.db.fetch_one(query, user_id)
        return User(**result) if result else None

    async def get_active_users(self) -> List[User]:
        """アクティブな全ユーザーを取得する。"""
        query = "SELECT * FROM users WHERE is_active = true"
        results = await self.db.fetch_all(query)
        return [User(**row) for row in results]

# リスト内包表記とラムダ
numbers = [1, 2, 3, 4, 5]
squared = list(map(lambda x: x ** 2, numbers))
evens = [n for n in numbers if n % 2 == 0]

Go

package main

import (
	"context"
	"encoding/json"
	"fmt"
	"net/http"
	"time"
)

type User struct {
	ID        int       `json:"id"`
	Name      string    `json:"name"`
	Email     string    `json:"email"`
	CreatedAt time.Time `json:"created_at"`
}

func (u *User) String() string {
	return fmt.Sprintf("User{ID: %d, Name: %s}", u.ID, u.Name)
}

func fetchUser(ctx context.Context, id int) (*User, error) {
	url := fmt.Sprintf("https://api.example.com/users/%d", id)

	req, err := http.NewRequestWithContext(ctx, "GET", url, nil)
	if err != nil {
		return nil, err
	}

	resp, err := http.DefaultClient.Do(req)
	if err != nil {
		return nil, err
	}
	defer resp.Body.Close()

	var user User
	if err := json.NewDecoder(resp.Body).Decode(&user); err != nil {
		return nil, err
	}

	return &user, nil
}

Rust

use std::collections::HashMap;
use std::sync::Arc;
use tokio::sync::RwLock;

#[derive(Debug, Clone)]
struct User {
    id: u64,
    name: String,
    email: String,
}

impl User {
    fn new(id: u64, name: &str, email: &str) -> Self {
        Self {
            id,
            name: name.to_string(),
            email: email.to_string(),
        }
    }
}

struct UserCache {
    cache: Arc<RwLock<HashMap<u64, User>>>,
}

impl UserCache {
    async fn get(&self, id: u64) -> Option<User> {
        let cache = self.cache.read().await;
        cache.get(&id).cloned()
    }

    async fn set(&self, user: User) {
        let mut cache = self.cache.write().await;
        cache.insert(user.id, user);
    }
}

HTML / CSS

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <nav class="nav-menu">
      <a href="/" class="nav-link">ホーム</a>
      <a href="/about" class="nav-link">概要</a>
    </nav>
  </header>
  <main id="content">
    <article class="post">
      <h1>ようこそ</h1>
      <p>こんにちは、世界！</p>
    </article>
  </main>
</body>
</html>
:root {
  --primary-color: #0969da;
  --background-color: #ffffff;
  --text-color: #1f2328;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d1117;
    --text-color: #f0f6fc;
  }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--background-color);
  border-bottom: 1px solid #d0d7de;
}

Shell / Bash

#!/bin/bash

# 変数
PROJECT_NAME="my-project"
BUILD_DIR="./dist"

# 関数定義
build_project() {
    echo "$PROJECT_NAME をビルド中..."

    # 前回のビルドをクリーン
    rm -rf "$BUILD_DIR"
    mkdir -p "$BUILD_DIR"

    # ビルドコマンドを実行
    npm run build || {
        echo "ビルドが失敗しました！"
        exit 1
    }

    echo "ビルドが正常に完了しました！"
}

# メイン実行
if [[ "$1" == "--production" ]]; then
    export NODE_ENV=production
fi

build_project

JSON / YAML / TOML

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "typescript": "^5.0.0"
  }
}
# Docker Compose 設定
version: '3.8'

services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
# Hugo 設定
baseURL = "https://example.com/"
languageCode = "ja"
title = "私のブログ"
theme = "primer-blog"

[params]
  description = "テクノロジーについてのブログ"
  author = "山田太郎"

SQL

-- ユーザーテーブルを作成
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- サンプルデータを挿入
INSERT INTO users (username, email)
VALUES
    ('taro_yamada', 'taro@example.com'),
    ('hanako_sato', 'hanako@example.com');

-- JOIN を使ったクエリ
SELECT
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.author_id
GROUP BY u.id, u.username, u.email
ORDER BY post_count DESC;

Diff

--- a/config.js
+++ b/config.js
@@ -1,7 +1,8 @@
 module.exports = {
   name: 'my-app',
-  version: '1.0.0',
+  version: '1.1.0',
   settings: {
-    debug: true
+    debug: false,
+    logging: true
   }
 };

テーブル

シンプルなテーブル

名前年齢都市
田中28東京
鈴木32大阪
佐藤25名古屋

配置指定テーブル

左揃え中央揃え右揃え
左中央右
テキストテキストテキスト

水平線

3つの異なる方法で水平線を作成：

キーボードキー

Ctrl + C でコピーします。

Cmd + Shift + P でコマンドパレットを開きます。

脚注

これは脚注付きの文章です1。

もう一つの脚注2。

詳細 / 折りたたみ

クリックして展開

このコンテンツはデフォルトで非表示です。

  • アイテム 1
  • アイテム 2
  • アイテム 3
console.log('隠されたコード！');
デフォルトで展開

このセクションは open 属性により、デフォルトで表示されます。

アラート / ノート (GitHub スタイル)

[!NOTE] これはノートのコールアウトです。

[!TIP] これはヒントのコールアウトです。

[!IMPORTANT] これは重要なコールアウトです。

[!WARNING] これは警告のコールアウトです。

[!CAUTION] これは注意のコールアウトです。

絵文字

:smile: :heart: :thumbsup: :rocket: :sparkles:

まとめ

このページでは、GitHub Flavored Markdown の全機能をデモンストレーションしました。正しくレンダリングされない要素がある場合は、テーマの設定と Hugo の設定を確認してください。

  1. これは最初の脚注です。 ↩︎

  2. これは2番目の脚注です。 ↩︎

共有

Twitter Facebook LinkedIn