LoginSignup
12
16

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

Last updated at Posted at 2019-11-04

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

自己紹介.png

はじめに

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

スクリーンショット 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

最後に

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ

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

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

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

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

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

12
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
16