Zenn
👀

マークダウン記法のメモ書き

2022/06/11に公開
Markdown
idea

ちょっとした紹介

  • 拡張子
    .md, .markdownがなどがあるよ

  • どんな場面で使う？

    • ブログの投稿データ
    • HTMLを書くのがめんどくさい
    • 決まったCSSをインポートしていちいちclassをつけたりするのがめんどくさい

  • どうやって使う？

    • HTMLへコンパイルしてから使うよ！

    多分、楽をするためだね！

どうやって書くんだい？

リンク

[click here!](https://example.com)

HTMLに変換するとこんな感じになるよ

<a href="https://example.com">click here!</a>

タイトル

# h1
## h2
### h3
#### h4
##### h5
###### h6

こんな風にもかけます
----

HTMLだと、

<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
<h3 id="h3">h3</h3>
<h4 id="h4">h4</h4>
...
<h2 id="こんな風にもかけます">こんな風にもかけます</h2>

画像

![alt属性に入れたい値](https://example.com/cat.png)

HTMLだと、

<img alt="alt属性に入れたい値" src="https://example.com/cat.png" />

普通の文字

むかしむかし、あるところにおじいさんとおばあさんがいました。
昼間、おじいさんとおばあさんは芝刈りに行ったり川でお洗濯をしているわけですが、

おじいさんはおばあさんが寝静まった頃合いに、お財布とおしゃれなスーツを着て都会の方へと歩いて行きました。
おじいさんが向かった場所は、キャバクラ『おにゃのこクラブ』でした。

HTMLだと、

<p>
  むかしむかし、あるところにおじいさんとおばあさんがいました。
  昼間、おじいさんとおばあさんは芝刈りに行ったり川でお洗濯をしているわけですが、
</p>
<p>
  おじいさんはおばあさんが寝静まった頃合いに、お財布を持ちおしゃれなスーツを着て都会の方へと歩いて行きました。
  おじいさんが向かった場所は、キャバクラ『おにゃのこクラブ』でした。
</p>

文字に装飾

**太文字でごわす**
__オデも太文字だべ__
*ナナメですわ*
_あたくしもナナメですわ_
**_ナナメで太文字_**

HTMLだと、

<p>
  <strong>太文字でごわす</strong>
  <strong>オデも太文字だべ</strong>
  <em>ナナメですわ</em>
  <em>あたくしもナナメですわ</em>
  <strong><em>ナナメで太文字</em></strong>
</p>

下線

aaaa
****
aaaa
____

HTMLだと、

<p>aaaa</p>
<hr/>
<p>aaaa</p>
<hr/>

ソースコードとか

\`\`\`css
.color-red {
  color: red;
}
\`\`\`
`.color-red`を適用すると文字が赤くなります

(``` は、マークダウンで書いているゆえ\でエスケープしています...。)
HTMLだと、

<pre><code>
  .color-red {
    color: red;
  }
</code></pre>
<p>
  <code>.color-red</code>を適用すると文字が赤くなります
</p>

(コンパイラによっては、ソースコードなどに色を付けてくれるよ)

テーブル

|商品名|値段|在庫|
|------|----|----|
|りんご|250|500|
|バナナ|250|500|
|鳥肉|570|300|

HTMLだと、

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>値段</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>リンゴ</td>
      <td>250</td>
      <td>500</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>250</td>
      <td>500</td>
    </tr>
    <tr>
      <td>鶏肉</td>
      <td>570</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

最後にちょっとだけ

物によってはHTMLを挿入できたりもするよ。
様々なフレーバーがあって、書き方がいろいろ違ったりするよ

Discussion