Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

自分がよく使うMarkdown記法



markdownの記法で自分がよく使う、モノを自分用のチートとして集めました。

見栄えの調整

目次の自動生成

  • 見え方


---

[:contents]

---

表示の折りたたみ

  • 見え方

    ここをクリック

    (空行) 折りたたまれる内容が記述されるエリア

  • 記述方法

<details><summary>ここをクリック</summary>

 (空行)
折りたたまれる内容が記述されるエリア

</details>

コードブロック内部に色を付ける(シンタックスハイライト)

  • 各コードブロック領域毎に言語を指定すると自動でそれっぽい色付けをしてくれます。
<span style="color:#ff0000;font-weight:bold;">色がついているほうが、読みやすいことが多い</span>
 ```html
<span style="color:#ff0000;font-weight:bold;">色がついているほうが、読みやすいことが多い</span>
 ```

色のついたメッセージ領域(Hatena未対応)

:::message ここにメッセージを記入する :::

:::message alert ここに警告メッセージを記入する :::

:::message
ここにメッセージを記入する
:::

:::message alert
ここに警告メッセージを記入する
:::

文字の加工

赤い太字

  • 見え方

    • 赤い太字
  • 記述方法

<span style="color:#ff0000;font-weight:bold;">赤い太字</span>

リンクの作成

[ブログのTopページ](https://overworker.hatenablog.jp/)

画像の処理

画像の貼り付け(一般)

  • 見え方

プロフィール画像

  • 記述方法
![プロフィール画像](https://~省略~.png)

画像の貼り付け(サイズ指定・センター配置(HatenaBlog))

  • 見え方

 縦幅50を指定:


 縦幅100を指定:


  • 記述方法
縦幅50を指定:<br>
<div align="center">
[f:id:~省略~:plain:h50]<br>
</div>

縦幅100を指定:<br>
<div align="center">
[f:id:~省略~:plain:h100]<br>
</div>

mermaid関連