hgc

hgc

ホームアーカイブ

Markdownの文法

#博客#工具59
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
1. md教学是一个md格式的教学文件，用于进行md文件练习和文章撰写。希望指出不足和错误，感谢理解和支持。 1.1 md目录是根据当前文档的标题自动生成的目录，位置取决于TOC的位置。有些网站不支持TOC功能。 1.2 md文字修饰可以为文字添加加粗、斜体、删除线和下划线等效果。 1.3 md分割线使用三个星号或三个"-"来实现。 1.4 列表分为有序列表、无序列表和待办列表，可以嵌套使用。 1.5 引用使用大于号表示一级引用，可以多级引用。 1.6 代码块分为行内代码和多行代码，可以使用制表符进行缩进排版。 1.7 表格使用竖线和横线来分隔单元格和表头。 1.8 超级链接使用方括号和括号表示链接文字和网址。 1.9 图片插入有四种方式，包括插入本地图片、插入网络图片、将图片存入Markdown文件和使用HTML标签。 2.0 文字的上下标使用上标和下标标签表示。 2.1 文字缩写使用HTML标签表示。

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 配置方法の調整一#

<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 配置方法の調整二（推奨）#

<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. Lena



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 ステップに分かれます。まず脚注を定義し、次に脚注を使用します。
脚注を定義する構文は以下の通りです：

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

脚注の例[^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 です。 ↩

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