数年前に GitHub で遊び始めてから、Markdown に触れた後、私はそれに深く魅了されました。ドキュメントの編集に Markdown が使用できる場合は、できるだけ使用し、使用できない場合でも条件を作って使用します - README、ブログ、API ドキュメントなど、すべてに使用します。
これらの数年間で、多くのウェブサイトやプログラムが Markdown をサポートするようになったことに気づきました。最初に触れた GitHub、Jekyll から、簡書、CSDN など、他の人が良いドキュメントを作成している中から、いくつかの「奇技淫巧」を学びました。したがって、この記事は Markdown の基本的な構文の紹介ではなく、比較的高度で、Markdown をより多様に使用するための小技を紹介します。
注：以下のテクニックのほとんどは、Markdown と互換性のある一部の HTML タグの特性を利用しています。すべてのウェブサイトやソフトウェアで完全にサポートされているわけではないため、主に GitHub のサポートを基準としています。
テーブルのセル内で改行する#
HTML の <br /> を使用して実現します。
コード例：
| ヘッダー1 | ヘッダー2 |
| ------- | -------------------------------- |
| アイテム1 | 1. 一つ<br />2. 二つ<br />3. 三つ |
効果例：
| ヘッダー 1 | ヘッダー 2 |
|---|---|
| アイテム 1 | 1. 一つ 2. 二つ 3. 三つ |
画像とテキストの混在#
タグを使用して画像を表示し、align 属性を指定します。
コード例：
<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>
これはサンプル画像です。
画像はN行のテキストの右側に表示されます。
Nは画像の高さに関連しています。
スクロール行。
スクロール行。
ここまで影響を受けないはずです。この行は画像の真下まで延びるはずですので、異なる画面で効果が確認できるように十分に長くする必要があります。
画像のサイズと位置を制御する#
標準の Markdown 画像タグ では、画像のサイズと位置を指定することはできません。デフォルトの画像サイズとデフォルトの左揃えに依存するしかありません。
しかし、元の画像が大きすぎて少し縮小したい場合や、画像を中央に配置したい場合は、HTML タグを使用して実現する必要があります。画像を中央に配置するには、
コード例：
デフォルトの画像表示効果：
制御を追加した効果：
<div align="center">
<img
width="65"
height="75"
src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"
/>
</div>
見やすくなりませんか？
絵文字の使用#
これは GitHub が標準の Markdown タグを拡張したもので、テキストを少し活気づけることができます。
コード例：
私と私の仲間たちは笑いました。:smile:
効果例：
私と私の仲間たちは笑いました。😄
詳細な使用可能な絵文字コードは、https://www.webpagefx.com/tools/emoji-cheat-sheet/ を参照してください。
行頭のインデント#
Markdown 内でスペースとタブキーを使用してインデントすると、レンダリング後に無視されます。行頭にスペースを追加するために HTML エスケープ文字を使用する必要があります。 は半角スペースを表し、 は全角スペースを表します。
コード例：
  春がやってきて、万物が復活する季節です。
数式の表示#
GitHub Pages や Hexo を使用している場合は、http://wanguolin.github.io/mathmatics_rending/ を参照して、数式をエレガントに表示するために MathJax を使用することができます（画像ではなく）。
GitHub プロジェクトの README などの場合、現在私が見つけることができる解決策は画像を貼ることだけです。以下は比較的便利な画像貼り付けの方法です：
https://www.codecogs.com/latex/eqneditor.php のウェブページの上部の入力ボックスに LaTeX の数式を入力します。例えば $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$；
ウェブページの下部から URL エンコードされたコンテンツをコピーします。例えば、上記の数式から生成されるものは https://latex.codecogs.com/png.image?%5Chuge%20%5Cdpi%7B300%7D%5Cdpi%7B200%7D%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20=%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20+%20C
- ドキュメントで必要な場所に上記の URL を貼り付けます。例えば
タスクリスト#
GitHub や GitLab などのウェブサイトでは、順序付きリストや順序なしリストの他に、タスクリストを使用することもできます。いくつかのアイテムをリストアップする場面に非常に適しています。
コード例：
**買い物リスト**
- [ ] 使い捨てカップ
- [x] スイカ
- [ ] 豆乳
- [x] コカ・コーラ
- [ ] 小茗同学
目次の自動メンテナンス#
長い文書をメンテナンスする場合、文書の見出しに基づいて目次（Table of Contents）を自動的に生成し、見出しが変更された場合に自動的に目次を更新することで、作業量を軽減し、エラーを防ぐことができます。
Vim エディタを使用している場合は、プラグイン vim-markdown-toc を使用して完璧に解決できます。
[[toc]]
他のエディタを使用している場合でも、対応する解決策を見つけることができる場合があります。例えば、Atom エディタの markdown-toc プラグイン、Sublime Text の MarkdownTOC プラグインなどがあります。
まとめ#
以上が奇技淫巧の一連の内容です。これらを理解した後、皆さんが何か得るものがあることを願っています。
この記事がお役に立ちましたら、私のチャンネルをフォローして、より多くの役立つコンテンツを入手してください。
参考#
https://raw.githubusercontent.com/matiassingers/awesome-readme/master/readme.md
https://www.zybuluo.com/songpfei/note/247346
https://www.youtube.com/channel/UCOE6Ckq2Pip08Ia1Zg6dUGA