umi_mori@umi_mori
Improve article
Send edit request
Article information
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?
たまたま集まった技術＆もの作りが好きな人たち Advent Calendar 2019Day 10

【保存版】サンプルでまとめてみた『Markdownチートシート』

HTMLMarkdownWebまとめチートシート

はじめに

Mardown入門者・経験者の両方に向けて、書きました。
文章ではなく、直感でわかりやすい「サンプルでまとめる」形式を取りました。（Qiitaの記法を採用しています。）

A. 最頻出コマンド

1. 見出し（#）

# タイトル
## サブタイトル

タイトル

サブタイトル

2. 太字（**）

markdownはとても**便利**です。

markdownはとても便利です。

3. リスト（-）

- 普通のリスト 1
- 普通のリスト 2
- 普通のリスト 3

1. 番号付きリスト 1
2. 番号付きリスト 2
3. 番号付きリスト 3

- [ ] チェックボックス 1
- [ ] チェックボックス 2
- [x] チェックボックス 3
  • 普通のリスト 1
  • 普通のリスト 2
  • 普通のリスト 3
  1. 番号付きリスト 1
  2. 番号付きリスト 2
  3. 番号付きリスト 3
  • チェックボックス 1
  • チェックボックス 2
  • チェックボックス 3

4. 画像（![]()）

![画像が読み込めなかった時に表示するテキスト](画像のリンク)

![サンプル写真](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png)

サンプル写真(画像が読み込めなかった時に表示するテキスト)

サイズ指定

画像のサイズを指定する場合、HTMLで書くこともできます。

<img width="500" alt="サンプル写真(画像が読み込めなかった時に表示するテキスト)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png">

サンプル写真(画像が読み込めなかった時に表示するテキスト)

5. リンク（[]()）

[表示する文字](リンク)

[【保存版】サンプルでまとめてみた『Markdownチートシート』](https://qiita.com/umi_mori/private/24f7b47563cffcc5fd86)

【保存版】サンプルでまとめてみた『Markdownチートシート』

6. 短いコード（`）

バッククオート（`）という少し変わった記号を用いる。

`var x = 7;`

var x = 7;

7. 長いコード（```）

同様に、バッククオート（）を用いる。（`を書いているが、実際は書かない。）

\```python:sample.py
from flask import Flask, render_template, request
import logging

app = Flask(__name__)

@app.route('/')
def index():
    sample_title = "title"
    sample_array = ['x', 'y', 'z']
    sample_json = {"title": "sample_title", "desc": "sample_desc"}
    return render_template('index.html', title=sample_title, array=sample_array, json=sample_json)

@app.route('/test', methods=['GET', 'POST'])
def test():
    if request.method == 'GET':
        logging.log(30, 'warning')
        logging.log(100, 'test1')
        res = request.args.get('get_value')
    elif request.method == 'POST':
        res = request.form['post_value']
    return res

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0', port=8080)
\```
sample.py
from flask import Flask, render_template, request
import logging

app = Flask(__name__)

@app.route('/')
def index():
    sample_title = "title"
    sample_array = ['x', 'y', 'z']
    sample_json = {"title": "sample_title", "desc": "sample_desc"}
    return render_template('index.html', title=sample_title, array=sample_array, json=sample_json)

@app.route('/test', methods=['GET', 'POST'])
def test():
    if request.method == 'GET':
        logging.log(30, 'warning')
        logging.log(100, 'test1')
        res = request.args.get('get_value')
    elif request.method == 'POST':
        res = request.form['post_value']
    return res

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0', port=8080)

B. 知ってて便利コマンド

8. 表

|概要 (中央寄せ)|担当 (左寄せ)|備考 (右寄せ)|
|:---:|:---|---:|
|概要 1|Aさん|備考 1|
|概要 2|Bさん|備考 2|
|概要 3|Cさん|備考 3|
概要 (中央寄せ) 担当 (左寄せ) 備考 (右寄せ)
概要 1 Aさん 備考 1
概要 2 Bさん 備考 2
概要 3 Cさん 備考 3

9. 引用

> 私たちの最大の弱点は諦めることにある。
> 成功するのに最も確実な方法は、
> 常にもう一回だけ試してみることだ。
> 『トーマスエジソン』より

私たちの最大の弱点は諦めることにある。
成功するのに最も確実な方法は、
常にもう一回だけ試してみることだ。
『トーマス・エジソン』より

10. 水平線

---

11. 打ち消し線 / イタリック

~~打ち消される文字~~
*イタリックな文字*

打ち消される文字
イタリックな文字

C. 知る人ぞ知るコマンド

12. 注釈

2行目は、注釈の内容が末尾に自動的に追加されます。（\を書いているが、実際は書かない。）

[^注釈1]
\[^注釈1]: この注釈は、下に自動的に表示されます。

1

13. 色付き文字 （HTML）

詳しい記事：Qiitaのマークダウンで色をつける方法[140色]

<font color="Red">Red</font>
<font color="Green">Green</font>
<font color="Blue">Blue</font>

<font color="#ff0000">16進数</font>

Red
Green
Blue

16進数

14. アコーディオン / 折りたたみ (HTML)

<details>
    <summary>【保存版】サンプルでまとめてみた『Markdownチートシート』</summary>
    1. 見出し（`#`）
    2. 太字（`**`）
    3. リスト（`-`）
    4. 画像（`![]()`）
    5. リンク（`[]()`）
    6. 短いコード（`）
    7. 長いコード（```）
    8. 表
    9. 引用
    10. 水平線
    11. 打ち消し線 / イタリック
</details>


【保存版】サンプルでまとめてみた『Markdownチートシート』
1. 見出し（#）
2. 太字（**）
3. リスト（-）
4. 画像（![]()）
5. リンク（[]()）
6. 短いコード（`）
7. 長いコード（```）
8. 表
9. 引用
10. 水平線
11. 打ち消し線 / イタリック

14. 埋め込みタグ

Twitter

<blockquote class="twitter-tweet">
    <a href="https://twitter.com/umi_mori_jp/status/1137261474064228352?ref_src=twsrc%5Etfw">ここに代替えテキストのようなものが入ります。</a>
</blockquote>

CodePen

詳しい記事：Qiitaで記事にCodePenが埋め込めるようになりました

<p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" data-embed-version="2" data-pen-title="dJgNLK" class="codepen">
    See the Pen 
    <a href="https://codepen.io/tomoasleep/pen/dJgNLK/">dJgNLK</a>
    by Tomoya Chiba (<a href="https://codepen.io/tomoasleep">@tomoasleep</a>) 
    on <a href="https://codepen.io">CodePen</a>.
</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

See the Pen dJgNLK by Tomoya Chiba (@tomoasleep) on CodePen.

15. 数式

3種類の書き方です。（\を書いているが、実際は書かない。）
詳しい記事：Qiitaの数式チートシート

\```math
e^{i\pi} = -1
\```

$$ e^{i\pi} = -1$$

オイラーの等式は、$ e^{i\pi} = -1 $ です。

e^{i\pi} = -1

$$ e^{i\pi} = -1$$

オイラーの等式は、$ e^{i\pi} = -1 $ です。

おまけ

Markdown => HTML

Markdown to HTML - Markdownで書かれたファイルをHTMLに自動変換してくれるWebアプリ

スクリーンショット 2019-11-06 13.25.47.png

Markdownエディタ特集

Typora

boostnote.png

Boostnote

typora.png

Slack

Slackも簡易的なMarkdownエディタを採用しています。

Qiitaの右側の目次

Qiitaの右側の目次は、見出し（#）から自動検出されます。
Qiitaの右側の目次.png

コード対応言語早見表

- ABAP
- ActionScript
- Apache
- API Blueprint
- AppleScript
- Awk
- BIML
- 1C (BSL)
- C
- Ceylon
- CFScript
- Clojure
- CMake
- CoffeeScript
- Common Lisp
- Config File
- Console
- Coq
- C++
- Crystal
- C#
- CSS
- D
- Dart
- diff
- digdag
- Docker
- DOT
- Eiffel
- Elixir
- Elm
- ERB
- Erlang
- Factor
- Fortran
- FSharp
- Gherkin
- GLSL
- Go
- Gradle
- Graphql
- Groovy
- Hack
- Haml
- Handlebars
- Haskell
- HTML
- HTTP
- HyLang
- IDL
- IgorPro
- INI
- Io
- Irb
- Irb_output
- Java
- JavaScript
- Jinja
- JSON
- Json-doc
- Jsonnet
- JSX
- Julia
- Kotlin
- Lasso
- Liquid
- Literate CoffeeScript
- Literate Haskell
- LLVM
- Lua
- Make
- Markdown
- MATLAB
- MoonScript
- Mosel
- MXML
- Nasm
- nginx
- Nim
- Nix
- Objective-C
- OCaml
- Pascal
- Perl
- PHP
- Plain Text
- Plist
- Pony
- powershell
- Praat
- Prolog
- Prometheus
- .properties
- Protobuf
- Puppet
- Python
- Q
- QML
- R
- Racket
- Ruby
- Rust
- Sass
- Scala
- Scheme
- SCSS
- sed
- shell
- Sieve
- Slim
- Smalltalk
- Smarty
- SML
- SQL
- Swift
- TAP
- Tcl
- TeX
- TOML
- TypeScript
- Tulip
- Turtle/TriG
- Twig
- Vala
- Visual Basic
- Verilog and System Verilog
- VHDL 2008
- VimL
- Vue
- Wollok
- XML
- YAML

  1. この注釈は、下に自動的に表示されます。 ↩

Edit request
6
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした