More than 1 year has passed since last update.

たまたま集まった技術＆もの作りが好きな人たちAdvent Calendar 2019

@umi_mori(Masumi Morishige)in

株式会社Galirage

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

Last updated at 2023-10-08Posted at 2019-11-04

はじめまして、ますみです！

はじめに

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
番号付きリスト 2
番号付きリスト 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]: この注釈は、下に自動的に表示されます。

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（2020年の3月ごろから無効になりました）

<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アプリ

Markdownエディタ特集

Typora

Boostnote

Slack

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

Qiitaの右側の目次

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

コード対応言語早見表

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

最後に

最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

問い合わせフォームはこちら

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（詳しくはこちら）

受託開発（例：生成AIを使った社内システムの開発）
コンサルティング（例：技術戦略のアドバイス）
講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。

おまけ

エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑（職種20選）」のPDFをお送りします◎

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

はじめに

A. 最頻出コマンド

1. 見出し（#）

タイトル

サブタイトル

タイトル

サブタイトル

2. 太字（**）

3. リスト（-）

4. 画像（![]()）

サイズ指定

5. リンク（[]()）

6. 短いコード（`）

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

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

8. 表

9. 引用

10. 水平線

`

`

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

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

12. 注釈

13. 色付き文字 （HTML）

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

14. 埋め込みタグ

Twitter（2020年の3月ごろから無効になりました）

CodePen

15. 数式

おまけ

Markdown => HTML

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

Markdownエディタ特集

Typora

Boostnote

Slack

Qiitaの右側の目次

コード対応言語早見表

最後に

おまけ

1. 見出し（`#`）

2. 太字（`**`）

3. リスト（`-`）

4. 画像（`![]()`）

5. リンク（`[]()`）

13. 色付き文字（HTML）