😀

Markdown記法の使い方

2022/10/22に公開約4,200字

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

見出し

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

結果

H1タグ

H2タグ

H3タグ

H4タグ

H5タグ
H6タグ



本文

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

結果

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




引用

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

結果

引用本文

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




リスト

- リスト1
  - リスト1-2(前にスペースを2つ付ける) 
- リスト2
1. リスト3
  2. リスト3-1
2. リスト4

結果

  • リスト1
    • リスト1-2(前にスペースを2つ付ける)
  • リスト2
  1. リスト1
  2. リスト2



チェックボックス

- [ ] チェックボックス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独自の記法は公式アカウントの記事をご覧いただくと良いと思います。
https://zenn.dev/zenn/articles/markdown-guide

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

Discussion

ログインするとコメントできます