hgc

hgc

ホームアーカイブ

マークダウン構文

#博客#工具89
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
これはMarkdown形式の教育ファイルで、Markdownファイルの練習に使用されます。内容は以下の通りです： 1. **目次**: TOCは自動的に生成され、文書のタイトルに基づいています。 2. **文字修飾**: 太字、斜体、取り消し線、下線などの文字装飾が可能です。 3. **分割線**: 三つのアスタリスクまたはハイフンで分割線を作成できます。 4. **リスト**: - 有序リストは数字と点を使用。 - 無序リストはプラスまたはマイナス記号を使用。 - タスクリストも作成可能。 5. **引用**: 大なり記号を使用して引用を作成します。 6. **コードブロック**: 行内コードと多行コードがあり、インデントを使って整形します。 7. **表**: 縦線でセルを分け、横線でヘッダーを分けます。 8. **ハイパーリンク**: リンクテキストとURLを使用してリンクを作成します。 9. **画像の挿入**: ローカル画像、ネット画像、Markdownファイル内の画像、HTMLタグを使って画像を挿入できます。 10. **文字の上下標**: 上下標を使用して数式や記号を表現できます。 11. **文字の略語**: HTMLタグを使用して略語を作成します。 このファイルはMarkdownの基本的な使い方を説明しており、実践的な例が含まれています。

1. md 教学#

これは md 形式の教育ファイルで、主に md ファイルの練習や記事の執筆に使用されます。文章が急いで書かれているため、不足や誤りがあれば指摘していただけると幸いです。ご理解とご支援に感謝します。

1.1 md 目次#

TOC は現在の文書の目次を自動生成します。目次は現在の文書のタイトルに基づいて生成され、TOC が文書のどの位置に書かれているかによって、目次もその位置に表示されます。

一部のウェブサイトは TOC 機能をサポートしていません。

1.2 md 文字修飾#

markdown 文書では、文字に太字、斜体、取り消し線、下線を追加できます。もちろん、これらの効果は重ねて使用することも可能です。例えば、英語では斜体を使用するのが適しています。例えば：This is a test mark down text. そして、すでに書いた内容が他人を誤解させる場合や明らかに誤っている場合、取り消し線を使って文字を削除できます。例えば：太陽は東から出ている もちろん、太字を使って強調することもできますし、文に横線を引く方法もあります。例えば：この方法を使用すると横線を引くことができます

1.3 md 分割線#

md ファイルでは、分割線は 3 つのアスタリスクまたは 3 つの "-" を使用して実現されます。具体的な効果は、私のタイトルの間の内容を見てください。

1.4 リスト#

  • 順序付きリスト
    順序付きリストは数字と点を使用して完成します。これは非常に理解しやすいです。なぜなら、私たちの日常のタスクリストもこの形式に似ているからです。例えば、象を冷蔵庫に入れるには何ステップか：
  1. 冷蔵庫のドアを開ける
  2. 象を冷蔵庫に入れる
  3. 冷蔵庫のドアを閉める
  • 順序なしリスト
    順序なしリストは非常に簡単で、プラスマイナス記号またはアスタリスクを使用するだけで実現できます。先ほどの例を使います。
    • 冷蔵庫のドアを開ける
    • 象を冷蔵庫に入れる
    • 冷蔵庫のドアを閉める
  • タスクリスト
    タスクリストは、物事が完了したかどうかを示すために主に使用されます。例えば、以下の内容：
    • [] ブログサイトを作成する
    • [] 高等数学と数理論を復習する
    • だらける
  • リストのネスト
    この部分の内容は特に教育する必要はないと思います。非常に簡単です。次の行の前に Tab を一度使用するだけです。

1.5 引用#

  • 一次引用
    引用には大なり記号を使用します。例えば、私の下の文：

横眉冷対千夫指，俯首甘为孺子牛

  • 多重引用
    何重引用かによって、いくつかの > を使用します。自分で試してみてください。

1.6 コードブロック#

コードの使用法は 2 種類あります。インラインコードとマルチラインコード。以下はいくつかの具体例です：

  1. インラインコード
    C 言語の第一課ではHello,Worldが教えられました。
  2. マルチラインコード
	int a,b,c;
	scanf("%d",&a,&b);
	c=a+b;
	printf("%d",c);

注釈：マルチラインコードのインデントを実現するには、前に空行が必要で、各行にタブが必要です。

1.7 表#

表の書き方も比較的簡単です。縦線を使用して異なるセルを区切り、横線 - を使用してヘッダーと他の行を区切ります。以下は遺伝病の分類を例にした内容です。

一般的な遺伝病例
単一遺伝子病白化病、先天性耳聾
多因子遺伝病糖尿病、高血圧
染色体病ダウン症
体細胞遺伝病悪性腫瘍
ミトコンドリア病レーバー遺伝性視神経症

1.8 ハイパーリンク#

  1. 表示方法
    ハイパーリンクの表示方法は以下の通りです：
    [ハイパーリンク文字] (URL)、したがって、最後に見えるのは実際には文字だけですが、実際には文字が URL にリンクされています。例えば：[私のブログ] (https://kkkk33t.github.io/)
  2. リンクを直接表示
    <> 記号でリンクアドレスを囲みます。例えば< https://www.baidu.com/ >
  3. アンカーを使用
    アンカーを使用するには、まずアンカーを定義し、次にアンカーを参照します。アンカーの使用については次回さらに詳しく紹介します。

1.9 画像#

画像を挿入する方法は 4 つあります：

  • ローカル画像を挿入
  • ネットワーク画像を挿入
  • 画像を Markdown ファイルに保存
  • HTML <img>タグを使用

画像を挿入する基本形式は![説明](パス)です。自分に合った方法を選択できます。

1.9.1 ローカル写真を挿入#

![画像の説明](画像のローカルパス) 例えば： ![niubi](23-06-01/wallhaven-m3ppwy.jpg)
** 注釈：** ここでのパスは相対的でもローカルでもかまいません。

1.9.2 ネットワーク画像を挿入#

![](画像のネットワークリンク)
この方法は公認の最良の方法だと思いますが、重要なのは画像ホスティングの選択です。画像ホスティングについては次回さらに詳しく紹介します。

1.9.3 画像を Markdown ファイルに保存#

画像を base64 エンコード形式で Markdown に保存するとファイルサイズが増加しますが、この方法の利点は画像を文書に直接埋め込むことができ、別途画像ファイルを参照する必要がないことです。以下は具体的な手順です：
Markdown ファイルに保存する画像を base64 エンコード形式に変換します。オンラインツールを使用して実現できます。例えば：
https://www.base64-image.de/
Markdown ファイルに以下の構文を追加します：
![説明文字](data:image/png;base64,base64エンコード内容)ここで、説明文字は画像の文字説明で、base64 エンコード内容は第一ステップで得られた base64 エンコード文字列です。
複数の画像を Markdown ファイルに保存する必要がある場合、画像の base64 文字列を個別に宣言できます。例えば：
[画像1]: data:image/png;base64,base64エンコード内容1 [画像2]: data:image/png;base64,base64エンコード内容2
本文中に画像を挿入：
![説明文字1][画像1] ![説明文字2][画像2]
この方法はあまり便利ではなく、使用頻度は非常に低いため、推奨しません。

1.9.4 HTML<img>タグを使用#

私はこれが非常に良い方法だと思います。主に画像のサイズを比較的簡単に制御できるからです。上記のいくつかの方法のサイズ調整方法についてはまだ研究中です。具体的には今後の補足を見てください。
例：

<img src="https://cdn.jsdelivr.net/gh/kkkk33t/cdntc/*img/*wallhaven-m3ppwy.jpg" width=100/>

1.9.5 補足：<img>タグを使用して画像のサイズを変更し、幅、高さ、配置方法などの属性を設定できます。#

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="600" />

説明：属性の後の数値もパーセンテージ形式で記述できます。例えば width = “60%”
サイズ指定の画像は、width = “600”、height = “600” を同時に指定する必要があります。
幅が決まっている高さの比率の画像は、width = “600” を指定するだけで済みます。
高さが決まっている幅の比率の画像は、height = “600” を指定するだけで済みます。

1.9.5.1 配置方法の調整 1#

<img>タグ内に align=“center” 属性を追加することで、画像の配置方法を変更できます。

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  align = "right"  width="600" />

説明：この方法でも左画像右文字または左文字右画像の効果を実現できます。
中央揃え：align = “middle”、なぜか CSDN でテストしたときに中央揃えが機能しませんでした。
左揃え：align = “left”
右揃え：align = “right”

1.9.5.2 配置方法の調整 2（推奨）#

<img>タグを<p align=“center”> . . . </p>タグで囲むことで、画像の配置方法を変更できます。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

この方法を使用すると、複数の画像を並べて配置することも可能です。<p align=“center”> . . . </p>タグ内に複数行の<img>タグを追加するだけです。各行の画像の数は、画像のサイズとブラウザウィンドウのサイズに応じて自動的に調整されます。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

説明：単一の画像と複数の画像の両方に有効です。html で画像を挿入する際はalign=を省略できますが、画像を右に配置する場合は省略できません。

1.9.5.3 左画像右文または左文右画像の効果を実現する。#

<img>タグを<p > . . . </p>タグで囲み、<img>タグ内に align=“left” 属性を追加することで実現できます。

（1）左画像右文
説明：左右に混在するテキストは<p > . . . </p>タグ内に配置し、<img>タグ行の下に配置する必要があります。<p > . . . </p>タグの外に配置された場合、通常の上下配置スタイルになります。
左画像右文：align = “left”
左文右画像：align = “right”

<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="400"  align="left" />
文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。文字は右側にあり、画像は左側にあります。
</p>

（2）左文右画像

image 文字は左側にあり、画像は右側にあります。文字は左側にあり、画像は右側にあります。文字は左側にあり、画像は右側にあります。文字は左側にあり、画像は右側にあります。文字は左側にあり、画像は右側にあります。

1.9.5.4 画像にキャプションを追加：#

image

Figure 1. レナ



2.0 文字の上下標#

上付き文字は、下付き文字はを使用します。以下のように：

下付き文字：X<sub>2</sub>
上付き文字：Y<sup>2</sup>
下付き文字の説明：X<sub>下付き文字の説明</sub>
上付き文字の説明：Y<sup>上付き文字の説明</sup>

効果は以下の通りです：
下付き文字：X2


上付き文字：Y2


下付き文字の説明：X 下付き文字の説明


上付き文字の説明：Y 上付き文字の説明

2.1 文字の略語#

文字の略語は HTML タグを使用します。以下のように：

<abbr title="Hyper Text Markup Language">HTML</abbr> はマークアップ言語です。

効果は以下の通りです：

HTML はマークアップ言語です。

2.2 脚注#

脚注の使用は 2 ステップに分かれます。1 つは脚注を定義し、もう 1 つは脚注を使用します。
脚注を定義する構文は以下の通りです：

[^脚注名]:脚注内容
中括弧内には上向きの尖った括弧 ^ があり、その後に脚注名が続きます。中括弧の後にはコロン：があり、その後に脚注内容があります。一般的に、脚注の定義は文書の最後に表示され、複数の脚注定義は同じ行に書くことはできません。脚注を使用する際は、注釈が必要な文字の後に [^ 脚注名] を追加するだけです。以下のように：

脚注の例[^note]
脚注の例2[^note2]
[^note]:これは脚注の例の内容です。        
[^note2]:これは脚注の例の内容2です。

効果：
脚注の例1

脚注の例 22

2.3 Markmap マインドマップ#

Markmap は Markdown 構文をサポートするマインドマップツールです。Markmap を使用すると、Markdown 構文を使用してマインドマップを生成できます。Markmap はオープンソースで無料で、簡単に使用できます。ここで、あなたが書いた Markdown 文書をマインドマップに変換できます。
Markmap でサポートされている Markdown 記号は：

  • タイトル記号#

  • 順序なしリスト記号 -

  • 分割記号 ---

  • ハイパーリンク記号 と <>

  • 文字修飾、例えば太字、斜体、取り消し線

  • コードブロック、インラインコードブロックとマルチラインコードブロックを含む
    Markmap はサポートしています：

  • タイトル記号

    • 一次タイトル
    • 二次タイトル
    • 三次タイトル

  • 順序なしリスト

    • リスト 1
    • リスト 2

  • 分割記号
    `- 第一部
    ---``

    • 第二部
      --- ``
    • 第三部
    • 第四部
      `

  • ハイパーリンク

- <https://www.google.com>
- [Google](https://www.google.com)

  • 文字修飾
    • 斜体
    • 太字
    • 取り消し線

コードブロック
- 単行コードブロック -

マルチラインコードブロック1
マルチラインコードブロック2
マルチラインコードブロック3

その効果は以下の通りです：

image

Footnotes#

  1. これは脚注の例の内容です。 ↩

  2. これは脚注の例の内容 2 です。 ↩

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。