ハイライト

ハイライトは、文書内の重要なテキストを強調するMarkdownの拡張構文です。読者が重要な情報を素早く識別できるようにし、文書をより鮮明で効果的にします。

基本的な構文

ハイライトのマーキング

ハイライトをサポートするほとんどのMarkdown拡張では、ハイライトするコンテンツを2つの等号（==）で囲みます：

markdown

これは、==ハイライトされたテキスト==を含む例文です。

レンダリング効果：

これは、==ハイライトされたテキスト==を含む例文です。

単語とフレーズのハイライト

個々の単語やフレーズにハイライトを適用できます：

markdown

プログラミングでは、==変数==はデータを格納するための名前付きスペースです。

ドキュメントの==重要な注意事項と警告==を必ず読んでください。

レンダリング効果：

プログラミングでは、==変数==はデータを格納するための名前付きスペースです。

ドキュメントの==重要な注意事項と警告==を必ず読んでください。

高度な使用法

他の書式との組み合わせ

ハイライトは他のMarkdown書式と組み合わせることができます：

markdown

==**太字ハイライト**==

==*斜体ハイライト*==

==***太字斜体ハイライト***==

==`コードハイライト`==

==[リンクハイライト](https://www.markdownlang.com)==

レンダリング効果：

==太字ハイライト==

==斜体ハイライト==

==太字斜体ハイライト==

==コードハイライト==

==リンクハイライト==

ブロックレベルのハイライト

一部のMarkdown実装では、カスタムコンテナ構文を使用して、ブロックレベルのコンテンツ全体にハイライトを適用できます：

::: highlight
これは、ハイライトされた段落ブロックです。

複数行のコンテンツを含むことができ、リストも含めることができます：
- アイテム1
- アイテム2
- アイテム3
:::

注意: ブロックレベルのハイライトのサポートは、Markdownプロセッサによって異なります。上記の例は、カスタムコンテナをサポートするVitePressなどのプラットフォームで利用可能です。

互換性と実装の違い

さまざまなプラットフォームでのサポート状況

プラットフォーム/ツール	ハイライトサポート	構文
GitHub Markdown	❌	サポートされていません
GitLab Markdown	✅	`==highlight==`
Hugo	✅	markタグまたは`==highlight==`を使用
VitePress	✅	`==highlight==`
Pandoc	✅	`==highlight==` または `[highlight]{.mark}`
Jekyll	✅	使用するテーマとプラグインに依存
CommonMark	❌	サポートされていません

HTML出力形式

ハイライトをサポートするほとんどのMarkdownプロセッサは、ハイライトされたテキストをHTML内の<mark>タグまたは特定のCSSクラスに変換します：

html

<!-- markタグを使用 -->
<p>これは、<mark>ハイライトされたテキスト</mark>を含む例文です。</p>

<!-- カスタムクラスを使用 -->
<p>これは、<span class="highlighted">ハイライトされたテキスト</span>を含む例文です。</p>

代替構文

ハイライト構文をサポートしていないプラットフォームでは、HTMLタグを代替として使用できます：

markdown

これは、<mark>ハイライトされたテキスト</mark>を含む例文です。

<!-- またはカスタムスタイルを使用 -->
これは、<span style="background-color: yellow;">ハイライトされたテキスト</span>を含む例文です。

使用シナリオ

文書の強調

ハイライトは、文書内の重要なコンテンツを強調するのに適しています：

markdown

# インストールガイド

インストール前に==データを完全にバックアップしてください==。システムインストールプロセスはターゲットパーティションをフォーマットします。

インストール手順：
1. インストーラをダウンロード
2. インストールウィザードを実行
3. ==「カスタムインストール」オプションを選択==
4. 画面の指示に従ってインストールを完了

レンダリング効果：

インストールガイド

インストール前に==データを完全にバックアップしてください==。システムインストールプロセスはターゲットパーティションをフォーマットします。

インストール手順：

インストーラをダウンロード
インストールウィザードを実行
==「カスタムインストール」オプションを選択==
画面の指示に従ってインストールを完了

教育資料

ハイライトは、教育およびトレーニング資料で特に有用です：

markdown

## Python変数

Pythonでは、変数の代入に`=`記号を使用します：

```python
x = 10  # 変数xに値10を代入

==Pythonは動的型付け言語で、変数の型は代入時に自動的に決定されます。==

一般的な変数型には以下があります：

整数 (int)
浮動小数点数 (float)
文字列 (str)
ブール値 (bool)


### テキストの比較と改訂

ハイライトは、文書内の変更や違いを強調するために使用できます：

```markdown
## 文書バージョンの比較

### 元のバージョン
サーバーは毎週日曜日午前2時にメンテナンスを行います。

### 更新されたバージョン
サーバーは毎週日曜日午前2時にメンテナンスを行います。==メンテナンスは2時間続く予定です。==

レンダリング効果：

文書バージョンの比較

元のバージョン

サーバーは毎週日曜日午前2時にメンテナンスを行います。

更新されたバージョン

サーバーは毎週日曜日午前2時にメンテナンスを行います。==メンテナンスは2時間続く予定です。==

引用と注釈

ハイライトは、引用文の重要なポイントをマークするために使用できます：

markdown

> 「これは引用文で、==この部分が特に重要==であり、読者の特別な注意を必要とします。」
> 
> — ある有名な作者

レンダリング効果：

「これは引用文で、==この部分が特に重要==であり、読者の特別な注意を必要とします。」
— ある有名な作者

スタイルのカスタマイズ

CSSのカスタマイズをサポートする環境では、ハイライトされたテキストのスタイルを変更できます：

css

/* カスタムハイライトスタイル */
mark, .highlighted {
  background-color: #ffeb3b;  /* 黄色の背景 */
  color: #000;                /* 黒のテキスト */
  padding: 0 3px;            /* パディング */
  border-radius: 3px;        /* 角丸 */
}

/* さまざまな種類のハイライト */
.highlight-warning {
  background-color: #ffcdd2;  /* 赤の警告ハイライト */
}

.highlight-success {
  background-color: #c8e6c9;  /* 緑の成功ハイライト */
}

カスタムスタイルの使用：

markdown

これは<mark class="highlight-warning">警告情報</mark>、これは<mark class="highlight-success">成功情報</mark>です。

ベストプラクティス

使用推奨事項

markdown

✅ 推奨プラクティス：

ハイライト ​

基本的な構文 ​