数年前に GitHub で遊び始めてから、Markdown に触れた後、私はそれを深く愛するようになりました。ドキュメントの編集にはできるだけ Markdown を使用し、使用できない場合でも条件を作って使用します - README、ブログ、API ドキュメントなど、すべてに使用します。
これらの数年間で、多くのウェブサイトやプログラムが Markdown をサポートするようになったことに気付きました。最初に触れた GitHub、Jekyll から、簡書、CSDN など、他の人が良いドキュメントを作成している中から、「奇技淫巧」を学びました。したがって、この記事は Markdown の基本的な構文の紹介ではなく、比較的高度で、Markdown をさらに多様化させるための小技を紹介します。
注：以下のテクニックのほとんどは、Markdown が一部の HTML タグをサポートしている特性を利用しています。すべてのウェブサイトやソフトウェアで完全にサポートされているわけではないため、主に GitHub のサポートを基準にしています。
表のセル内で改行する#
HTML の <br /> を使用して実現します。
サンプルコード：
| ヘッダー1 | ヘッダー2 |
| ------- | -------------------------------- |
| アイテム1 | 1. one<br />2. two<br />3. three |
サンプルの結果：
| ヘッダー 1 | ヘッダー 2 |
|---|---|
| アイテム 1 | 1. one 2. two 3. three |
画像とテキストの混在#
タグを使用して画像を挿入し、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