Markdown記法について
Code-コードの挿入
```ruby:qiita.rb
puts 'The best way to log and share programmers knowledge. '
puts 'The best way to log and share programmers knowledge. '
「Ruby」で記述したコードをファイル名「qiita.rb」として投稿したい時は、バッククオート(') かチルダ(~)を使用する。
Code spans-コードスパン
`puts 'Qiita'`と書くことでインライン表示することができる
結果
puts 'Qiita'と書くことでインライン表示することができる
コードスパンの中身がCSSの<color>型
コードスパンの中身がCSSの<color>型のRGB16進数表記、rgb() ,rgba() ,hsl() ,hsla()の場合、横にその色が表示されます。
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
結果
#ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)
Format Text テキストの装飾
Headings 見出し
# これはh1タグです
## これはh2タグです
###### これはh6タグです
Emphasis /Strong Emphasis -強調・強勢
*italic type* _italic type_
**太字** __太字__
結果
italic type italic type
太字 太字
_か * で囲むとHTMLのemタグになります。Qiitaでは italic type になります。
__か**で囲むとHTMLのstrongタグになります。Qiitaでは 太字 になります。
Strikethrough -打ち消し線
~~打ち消し~~
結果
打ち消し
打ち消し線を使うには~~で囲みます。
Details -折りたたみ
<details><summary>サンプルコード</summary>
(上に空行が必要）
```rb
puts 'Hello,World'
結果
サンプルコード
(上に空行が必要）puts 'Hello,world'
追加情報としたい内容を、detailsタグで囲みます。そして、要約として表示したい文章を summaryタグで記載します。
Note -補足説明
:::note info
インフォメーション
infoは省略可能です。
:::
:::note warn
警告
○○に注意してください
:::
:::note alert
より強い警告
○○しないでください
:::
結果
インフォメーション
infoは省略可能です。
警告
○○に注意してください
より強い警告
○○しないでください
目を引く形で補足説明をしたい場合、補足したい内容を :::note infoと:::で囲みます。
補足したい内容と:::note infoと:::はそれぞれ別の行にする必要があります。
noteの後のinfoは省略可能です。また、noteの後にwarnをつけると警告メッセージに、alertをつけるとより警告メッセージとして表現することができます。
Lists -リスト
Bullet List-順序なしリスト
- 文頭に
*+-のいずれかを入れると順序なしリストになります - 要点をまとめる際に便利です
-
*+-の後にはスペースが必要です
Ordered List-番号付きリスト
1. くだもの
1. やさい
1. おにく
結果
- くだもの
- やさい
- おにく
＿＿
- 文頭に
数字.を入れると番号付きリストになります - 要点をまとめる際に便利です
- ネストをする時には段落と同じ数のスペースが必要です
Description List -説明リスト
HTMLの<dl>タグをそのまま使うことで実現できます。
Checkbox-チェックボックス
- [ ] tasuku1
* [ ] tasuku2
* [x] tasuku3
結果
- tasuku1
- tasuku2
- tasuku3
順序なしリストの記述の後ろに[ ]を入れるとチェックボックスが生成されます。
チェックが入った状態のボックスを生成する場合は[x]を入力します。
前後にスペースが必要です。
Blockquotes -引用
> 文頭に>を置くことで引用になります。
> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
> **引用の上下にはリストと同じく空行がないと正しく表示されません**
> 引用の中に別のMarkdownを使用することも可能です。
>
> > これはネストされた引用です。
結果
複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
引用の上下にはリストと同じく空行がないと正しく表示されません
引用の中に別のMarkdownを使用することも可能です。これはネストされた引用です。
Horizontal rules-水平線
下記は全て水平線として表示されます。
* * *
***
*****
- - -
-----------------------------
Links -リンク
タイトル付きのリンクを投稿できます。（タイトルは、リンク上にマウスホバーすることで表示されます。）
[リンクテキスト](URL "タイトル")
例
[Qiita](http://qiita.com "Qiita Home")
結果
Qiita
[Qiita](http://qiita.com)
結果
Qiita
[ここ][link-1]と[この][link-1] リンクは同じになります。
[link-1] という書き方もできます。
[link-1]: http://qiita.com/
結果
こことこの リンクは同じになります。
link-1 という書き方もできます。
Images-画像の埋め込み
## タイトルありの画像を埋め込む
## タイトル無しの画像を埋めこむ
例
結果
またHTMLで入力すると画像のサイズ調整などができます。
例
<img width="50" src="http://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png">
結果
テーブル
手動で入力する場合
| Left align | Right align | Center align |
| :----------|------------:|-------------:|
| This | This | This |
上記のように書くと、以下のように表示されます。
| Left align | Right align | Center align |
|---|---|---|
| This | This | This |
目次（TOC）の自動挿入
目次は記事内の見出しを元に自動生成し、右に自動挿入されます。
脚注
本文中に[^1]や[^example}のように文字列を記述することで、脚注へのリンクを表現できます。注釈内容は、同じく本文中に[^1]:...というように記述します。
絵文字
厳密にはMarkdouwn記法の外ですが、:で囲って、絵文字を埋め込めます。
例
\:kissing_closed_eyes: chu
結果
chu
リンクカード
URLをリンクカードとして表示します。URLの前後に空行が必要です。
例
(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)
ダイアグラム
以下の方法で文章内に図を表示することができます。
PlantUMLを使う
コードブロックの言語名をplantumlとすることで、PlantUMLによるダイアグラムを表示することができます。
````plantuml
Bob->Alice : Hello!
結果
Mermaidを使う
コードブロックの言語名をmermaidとすることで、Mermaidによるダイアグラムを表示することができます。
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
結果