😀

Markdown記法の使い方

2022/10/22に公開

これから学んだことを少しずつ投稿して行こうと思っております、フロントエンドエンジニア志望の学生です。投稿するにあたってまずMarkdown記法を学びましたので投稿してみました。皆様の参考になればと思います。

見出し

# H1タグ
## H2タグ
### H3タグ
#### H4タグ
##### H5タグ
###### H6タグ

結果

H1タグ

H2タグ

H3タグ

H4タグ

H5タグ

H6タグ

本文

何もつけずに記入します。  段落を分けるためには半角スペースを二つ入れます。

結果

何もつけずに記入します。
段落を分けるためには半角スペースを二つ入れます。

引用

>引用本文
>>入れ子構造にする場合は>>を入れる

結果

引用本文

入れ子構造にする場合は>>を入れる

チェックボックス

- [ ] チェックボックス1
- [x] チェックボックス2

結果

チェックボックス1
チェックボックス2

水平線

***
* * *
---
- - -

結果

リンク

https://zenn.dev/asatooi
[Asatoさんの記事一覧](https://zenn.dev/asatooi)

結果

https://zenn.dev/asatooi
Asatoさんの記事一覧

Ctrl + Kのショートカットで挿入可。

強調

*強調(イタリック体)*
**強調(Bold体)**
***強調(イタリック＆Bold体)***

結果

強調(イタリック体)
強調(Bold体)
強調(イタリック＆Bold体)

画像

![ダミー画像](https://placehold.jp/150x150.png)  
*キャプション*

結果

ダミー画像
キャプション

打ち消し

~~打ち消し~~

結果

~~打ち消し~~

注釈

本文本文本文[^1]  
[^1]:注釈の内容を入力します。

結果

本文本文本文^[1]

コード

```js:sample.js
const hoge = "codeの挿入の仕方"
console.log(hoge);
```

```html:sample.html
<div class="sample">
  <p>Hello world</p>
<div>
```  

```diff js:sample.js
- console.log("hello");
+ console.log("good morning");
```   

`print("hello world");`と書くことでインライ表示することもできます。    
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。

sample.js

const hoge = "codeの挿入の仕方" 
console.log(hoge);

sample.html

<div class="sample">
  <p>Hello world</p>
<div>

sample.js

- console.log("hello");
+ console.log("good morning");

print("hello world");と書くことでインライ表示することもできます。
`バッククオート` や ``2連続バッククオート`` を埋め込むことができます。

コメントアウト

<!-- 公開されません！ -->

結果

テーブル

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

結果

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

Mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

結果

数式

$$
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

結果

\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

KaTeX

GitHubで使用可能

補足説明

> **Note**  
> githubでは反応します。

> **Warning**  
> githubでは反応します。

結果

↓githubでの様子

絵文字

:smiley:
:smile:
:laughing:
:innocent:
:drooling_face:

結果

↓githubでの様子

絵文字一覧

Zenn独自の記法は公式アカウントの記事をご覧いただくと良いと思います。

脚注

注釈の内容を入力します。 ↩︎

見出し

結果