Markdown記法　練習

目次

出力

コードの挿入
diffの追加
色の視覚化

テキストの装飾
見出し

書き方

<dl>
 　 <dt>装飾</dt>
      <dd>・<strong>強調</strong></dd>
      <dd>・Italic</dd>
      <dd>・打ち消し線</dd>
      <dd>・折り畳み</dd>
</dl>


* 画像
  * 引用
    * リンク

出力

装飾: ・強調; ・Italic; ・打ち消し線; ・折り畳み

画像
- 引用
  - リンク

-テーブル

順序なしリストにする場合 * + -の後にはスペースが必要

コードの挿入

「```」or 「~~~」で囲んだ部分はコードブロックになる

入力

書き方

``` ruby:test.rb
puts 'Hello,World!'
```

出力

test.rb

puts 'Hello, World!'

diffの追加

diff_名前　とすることで追加可能、-, + でdiffを表現

test.rb

+puts 'Hello, World!'
+puts 'abc'
-puts 'こんにちは'
-puts 'あいうえお'

色の視覚化

The background color is #ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)

テキストの装飾

見出し

入力

書き方

# h1
## h2
  :
######h6

出力

h1タグ

h2タグ

h3タグ

h4タグ

h5タグ

h6タグ

装飾

入力

書き方

強調：　  **文字**
italic:  *文字*
打ち消し線: ~~文字~~
折り畳み:

<details><summary>サンプルコード</summary>

```rb
puts 'Hello, World'
```
</details>

出力

強調：　文字
italic: 文字
打ち消し線: 文字

サンプルコード

puts 'Hello, World'

前後に半角スペースか改行文字を入れる

チェックボックス

入力

書き方

- [x] Progate html&css
- [ ] Progate Ruby
- [ ]  Ruby on rails
- [ ] React
- [x] Node.js

出力

Progate html&css
Progate Ruby
Ruby on rails
React
Node.js

引用

書き方

> 文頭に>を置くことで引用になる
> >クライアントとサーバーという言葉は「client」「server」が語源
> 
> > > Web Client→ Web Serverへの要求をリクエスト
> > > > Web Server→ Web Clientへの応答をレスポンス

文頭に>を置くことで引用になる

クライアントとサーバーという言葉は「client」「server」が語源

Web Client→ Web Serverへの要求をリクエスト

Web Server→ Web Clientへの応答をレスポンス

Link

書き方

1.[Qiita](http://qiita.com "Qiita Home")
2.[trend] と [timeline] リンク。

[trend]: https://qiita.com/trend
[timeline]: https://qiita.com/timeline

出力
1.Qiita
2.trend と timeline リンク。

画像

書き方

![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

出力

htmlでの入力だと画像サイズ変更可能

テーブル

書き方

| 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

3x2と記入することでテーブルを自動入力することも可能
xはエックスである。