Aa の ほーむぺーじ。

Markdown 表示テスト

  • #Markdown

この記事は、ブログで対応しているMarkdownの表示と操作を確認するためのテストページです。各項目のサンプルを、PC幅とスマートフォン幅で見比べてください。

文字の大きさ、行間、要素の前後の余白、折り返しを確認します。コードのコピー、折りたたみの開閉、目次や脚注からの移動、外部コンテンツの埋め込み表示も確認できます。

文章・見出し・文字装飾

段落と改行

短い段落の表示例です。

日本語の文章に English words や数字の 1234567890、記号の & / % が混ざった場合も、読みやすい間隔が保たれているかを確認してください。これは複数行にわたる段落の表示を見るための、少し長めの文章です。画面の幅を変えたときの折り返しと、前後の段落との余白を確認します。

この行の末尾には明示的な改行があります。
同じ段落の中で、次の行に移ります。

こちらは空行で区切った別の段落です。

見出しレベル 3

目次に表示される小見出しです。記事タイトルがレベル1、各章がレベル2に対応します。

見出しレベル 4

具体的な手順や補足をまとめる見出しです。

見出しレベル 5

さらに細かい項目の表示例です。

見出しレベル 6

最も深い見出しの表示例です。見出しレベル3〜6の大きさと余白を比較します。

長い見出しが画面の幅に合わせて複数行に折り返されたときの行間と余白を確認する

文字が重ならず、本文との区切りがわかるかを確認します。

文字装飾とリンク

通常の文章に、太字、斜体 / Italic text、太字と斜体、取り消し線、太字と取り消し線を含めています。

ファイル名の index.md、太字の中にある code、バッククォートを含む `code` はインラインコードの表示例です。

記事一覧、このテスト記事、参照形式のリンクで、色や下線、マウスを重ねたときの変化を確認します。

*強調しないアスタリスク*、# 見出しにしない記号、<タグ> の表示例です。HTMLの Ctrl + C、H2O、x2 も確認します。

リスト・チェックリスト・引用

箇条書きと入れ子

  • 短い項目
  • 強調したテキスト、リンク、inline code を含む項目
  • 長い文章を含む項目です。画面の幅を狭くして複数行に折り返したときに、二行目以降の開始位置が箇条書きの記号ではなく本文の先頭に揃うかを確認します。
  • 親の項目
    • 子の項目 A
      • 孫の項目 A-1
      • 孫の項目 A-2
    • 子の項目 B

番号付きリストと混在

  1. ページを開きます。

  2. 表示する内容を確認します。

    1. 見出しの大きさを確認します。
    2. 本文の行間を確認します。

  3. 画面の幅を変えます。

    • 箇条書きとの字下げの違い
    • 折り返しと余白

    この段落は三番目の項目に含まれます。

    リスト内のコードブロック

    コードの後も同じ項目に属しているかを確認します。

引用と入れ子

短い引用です。本文との違いと、左側の余白を確認します。

引用の直後に置いた通常の段落です。

複数の段落を含む引用

引用の中にも、リンクや code を含めることができます。

  • 引用内の箇条書き

  • 二つ目の項目

入れ子の引用です。枠線と字下げを確認します。

表・画像・区切り線

表の配置と装飾

要素確認する内容優先度項目数
見出し大きさと前後の余白高6
リンク記事一覧へのリンク中2
コードindex.md の背景色中3

左寄せ・中央寄せ・右寄せと、表から本文までの余白を確認します。

横に長い表

ファイルパス確認する表示PC幅スマートフォン幅備考
index.mdarticles/test/index.md長い文字列と複数列の表示列幅と余白横スクロールテーブル全体を最後の列まで確認します
upload-settings.jsonsrc/features/article-management/components/image-upload/configuration/upload-settings.json改行しにくいパスの表示文字の重なりページ全体のはみ出し本文との境界を確認します

画像とリンク付き画像

表示確認用の代替画像

図1：画像の幅、縦横比、前後の余白を確認します。

記事一覧へのリンク付き画像

図2：画像をクリックすると記事一覧へ移動します。

区切り線

区切り線の前の段落です。

区切り線の後の段落です。線の色・太さ・上下の余白を確認します。

コード

基本と横スクロール

インラインコードの sample.txt と、複数行のコードブロックを見比べます。

articles/
  test/
    index.md
 
title: Markdown 表示テスト
status: draft

次は、長い一行のはみ出しや横スクロールを確認する例です。

abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789-abcdefghijklmnopqrstuvwxyz-0123456789

ファイル名とコードの強調

コードフェンスの言語名に続けて title="ファイル名" を指定すると、コードの上にファイル名を表示できます。{行番号} は行全体、/文字列/ は一致する単語の強調です。

ファイル名と行の強調

次のコードは title="src/lib/articles.ts" {3,6-8} showLineNumbers を指定しています。3行目と6〜8行目を強調し、通常の行との背景色の違いを確認できます。

src/lib/articles.ts
type Article = {
  title: string;
  draft: boolean;
};
 
export function getPublishedArticles(articles: Article[]) {
  return articles.filter((article) => !article.draft);
}

単語の強調

/isUploading/ /finally/ を指定して、状態の確認・更新と、後処理のキーワードを強調しています。同じ単語が複数回出てくる場合の表示も確認できます。

src/upload.js
let isUploading = false;
 
async function upload(file) {
  if (isUploading) return;
  isUploading = true;
 
  try {
    await sendImage(file);
  } finally {
    isUploading = false;
  }
}

行と単語の強調を組み合わせる

{2-3} /timeoutMs/ のように組み合わせると、強調した行の中でも特定の単語を目立たせられます。この例には行番号を付けていません。

config/upload.json
{
  "timeoutMs": 15000,
  "maxSizeBytes": 5000000,
  "allowedTypes": ["image/jpeg", "image/png"]
}

長いファイル名

画面幅が狭いときのファイル名の折り返しと、タイトルからコードまでの余白を確認します。

src/features/article-management/components/image-upload/configuration/upload-settings.json
画像のアップロード設定を管理するファイルです。

言語指定なし

言語を指定しないコードです。
<Note>コード内では補足枠になりません。</Note>

ファイル名付きの差分

追加・削除の文字色、ファイル名、行番号を確認します。コピー時に先頭の + と - が残ることも確認してください。

sample.ts
-const message: string = "変更前";
+const message: string = "変更後";
 console.log(message);

言語別のシンタックスハイライト

キーワード、文字列、数値、コメント、関数名の色を見比べます。各コードのコピーボタンから、改行とインデントを含めてコピーできることを確認します。

JavaScript

// 公開済みの記事だけを取り出す
const articles = [{ title: "Hello, world!", published: true, views: 42 }];
 
function getPopularTitles(items, minViews = 10) {
  return items
    .filter((item) => item.published && item.views >= minViews)
    .map((item) => `${item.title} (${item.views} views)`);
}
 
console.log(getPopularTitles(articles));

TypeScript

type Article = {
  title: string;
  tags: string[];
  published: boolean;
};
 
// 型引数とオプショナルチェーン
function first<T>(items: readonly T[]): T | undefined {
  return items[0];
}
 
const article: Article = { title: "表示テスト", tags: ["web"], published: true };
const tag = first(article.tags)?.toUpperCase() ?? "UNTAGGED";

HTML

<!-- 属性と日本語のテキスト -->
<article class="card" data-id="42">
  <h2>Markdown 表示テスト</h2>
  <p>コードの <strong>色分け</strong> を確認します。</p>
  <a href="/articles/test" aria-label="テスト記事を読む">続きを読む &rarr;</a>
</article>

CSS

/* セレクター、単位、カスタムプロパティ */
.card {
  --accent: #38bdf8;
  display: grid;
  padding: clamp(16px, 4vw, 32px);
  gap: 1.5rem;
  border: 1px solid var(--accent);
}
 
.card:hover {
  background: rgb(15 23 42 / 80%);
}

Python

from dataclasses import dataclass
 
 
@dataclass
class Article:
    title: str
    views: int = 0
 
 
# 条件分岐と f-string
def summarize(article: Article) -> str:
    if article.views >= 100:
        return f"人気記事: {article.title} ({article.views:,})"
    return "まだ集計中です"
 
 
print(summarize(Article("Hello, Python!", 128)))

Rust

#[derive(Debug)]
struct Article<'a> {
    title: &'a str,
    views: u32,
}
 
fn main() {
    // パターンマッチとマクロ
    let article = Article { title: "Hello, Rust!", views: 42 };
    let label = match article.views {
        0 => "未読",
        1..=99 => "新着",
        _ => "人気",
    };
    println!("{}: {}", label, article.title);
}

diff

diff --git a/settings.json b/settings.json
--- a/settings.json
+++ b/settings.json
@@ -1,4 +1,4 @@
 {
-  "theme": "light",
-  "highlight": false
+  "theme": "github-dark",
+  "highlight": true
 }

折りたたみ・補足・警告

補足と警告

補足・警告の外側に戻った通常の段落です。

折りたたみの開閉と入れ子

閉じた折りたたみ内の確認位置へ移動すると、折りたたみが開いて対象へ移動します。

開いてMarkdown・数式・図を確認する

折りたたみ内のリンク先です。

太字、記事一覧へのリンク、次のリストが通常どおり表示されることを確認します。

  • 折りたたみ内の項目
  • 二つ目の項目
1n∑i=1nxi\frac{1}{n}\sum_{i=1}^{n} x_i
さらに内側の折りたたみ 
入れ子の中でもコピーできます。
最初から開いている折りたたみ

初期表示で本文が見え、閉じたり開いたりできることを確認します。

数式・Mermaid

インライン数式と独立した数式

文章の中に E=mc2E = mc^2 や 12\frac{1}{2} を含め、前後の文字との間隔と行の高さを確認します。

f(x)=12πσ2exp⁡(−(x−μ)22σ2)f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} \exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)

数式の後の段落です。$x^2$ は数式ではなくインラインコード、$5 は通常の文字として表示します。

フローチャート

シーケンス図

脚注・ページ内リンク

脚注への参照です。1 同じ脚注をもう一度参照します。1 別の脚注も確認します。2

文章の章へ戻るリンクと、折りたたみ内へのリンクで移動を確認します。脚注の戻るリンクから、参照元へ戻れることも確認してください。

外部コンテンツの埋め込み

外部サービスのURLを単独の段落に置くと、対応する埋め込みに変換されます。以下の公開URLを使い、リンクカードやコード、投稿、動画の表示を確認します。

リンクカード・GitHub・Gist

リンクカードは一般のURL、GitHubはファイルのURLと行範囲、GistはGistのURLと任意のファイル指定を使います。

JavaScript | MDNMDNMDNMozillaJavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, garbage-collected, dynamic language, supporting multiple paradigms such as imperative, functional, and object-oriented.developer.mozilla.org
    BaseNodeFactory,
    CreateSourceFileOptions,
    EmitHelperFactory,
    GetCanonicalFileName,
rAF.jsLines 1 to 31
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 
// MIT license
 
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

X・YouTube・CodePen

Xは会話表示、YouTubeは開始位置、CodePenは初期表示タブを指定できます。

Footnotes

  1. 脚注の文字サイズ、番号、前後の余白を確認します。 ↩ ↩2

  2. 脚注から本文への戻り先と、複数の参照元がある場合のリンクを確認します。 ↩