Skip to content

Instantly share code, notes, and snippets.

@wate
Last active September 13, 2022 02:26
Show Gist options
  • Star 104 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save wate/7072365 to your computer and use it in GitHub Desktop.
Save wate/7072365 to your computer and use it in GitHub Desktop.
Markdownで行こう!

Markdownで行こう!

Markdownとは?

Markdownのルールで書かれたテキストはタグなど複雑な要素が用いられていないため
直感的に分かりやすく、HTMLに変換しないままでも配布することが可能です。
MarkdownのルールはSettextatxTextilereStructuredText
GrutatextEtTeといったテキスト文書をHTMLに変換するツールを参考にしています。
しかし、何よりメールで用いられている表現を参考にしています。

Markdown文法の全訳

Markdwonの種類

コードシンタックス

段落と改行

空白行に囲まれた複数行の文章がまとめて一つの段落として扱われます。
段落中で改行を行いたい場合は、
その行の末尾に二つ以上のスペースを記述することにより改行することが出来ます。

見出し

MarkdowwnはSetextとatxという、二つの形式をサポートしています。

Setext形式

見出し1です
=============
見出し2です
-------------

Atx形式

Atx形式は見出しの行頭に1つから6つまでの#(ハッシュ記号)を用いる方法です。
#(ハッシュ記号)の数が見出しレベルと一致します。

# 見出し1です
## 見出し2です
### 見出し3です
#### 見出し4です
##### 見出し5です
###### 見出し6です

※Atx形式は「閉じる」ことができます。
この表現が好みであれば使うことができますが、単純に見栄えの問題です。

※Setext形式とAtx形式を混在させることも可能です

強調

*(アスタリスク)や_(アンダースコア)は強調記号として扱われます。
*_によって囲まれた文字列は、<em>タグで囲まれたものに変換され、
**__によって囲まれた文字列は、<strong>タグで囲まれたものに変換されます。

*ここがemタグで強調されます*
_ここがemタグで強調されます_
**ここがstrongタグで強調されます**
__ここがstrongタグで強調されます__

リスト

印付きのリストの場合はアスタリスク(*)やプラス記号(+)、
またはハイフン記号(-)を使用します。

リストの番号もしくは記号は通常左端からはじまりますが、
冒頭に3つのスペー スまでは許されています。
リストを綺麗に見せるために、リストの内容の二行目以降を揃えることができます。

番号なしリスト

* 1番目
* 2番目
* 3番目
または
+ 1番目
+ 2番目
	+ 2番目-1
	+ 2番目-2
	+ 2番目-3
+ 3番目
または
- 1番目
- 2番目
- 3番目

番号付きリスト

1. 1番目
2. 2番目
3. 3番目

ソースコード

文中にインラインで表現する場合は該当部分をバッククォートで囲みます。
複数行のコードブロックをソースコードとして表現する場合は、
該当のコードブロックを4つのスペースでインデント(字下げ)することにより
ソースコードのコードブロックとして表現出来ます。

引用

Markdownで引用を表現するときにはEメールと同じ方法で>を用います。
もしあなたがEメールで引用をすることになじんでいるのであればMarkdownでの使用は容易です。

> これは引用です
> これは引用ですこれは引用です
> これは引用ですこれは引用です、これは引用ですこれは引用です  

区切り線

3つ以上のハイフン(-)やアスタリスク(*)、アンダースコア(_)だけで構成されている行は
罫線となります。

------------------------------------
********
_________

リンク

直接リンクを作成するためには、[]で囲んだリンク文字列の直後に
丸括弧()を設置します

[姫路IT系勉強会](http://histudy.doorkeeper.jp/)

画像

書き方はいたって単純で、リンクの記述方法で画像のパスを指定し、
[]の前に!をつければ画像を表示します

![姫路IT系勉強会](https://dl.dropboxusercontent.com/u/35497667/histudy.png)

Markdown Extraについて

標準のMarkdownを元にMarkdown Extraでは以下のような拡張がされています

  • 定義リストのサポート
  • 特殊属性のサポート
  • テーブルのサポート
  • 脚注のサポート
  • 区切り文字で囲われたコードブロック

など

サンプル

### 定義リスト
[姫路IT系勉強会](http://histudy.doorkeeper.jp/)
:   変な人たちが集う「俺の話を聞きやがれ!」系の勉強会

姫路ゆるいWeb勉強会
:   [@_signalessさん](https://twitter.com/_signaless)という腐女子が主催している、ゆるふわ系の勉強会

### 特殊属性
ヘッダー1			{#header1}
============

ヘッダー2			{#header2}
------------

### テーブル  

| 開催予定        | 開催日          | お題                 | 参加人数|
| --------------- |:---------------:| -------------------- | -------:|
| Git勉強会 Vol.1 | 2013/07/06 (土) | Gitの基本操作        | 123     |
| Git勉強会 Vol.2 | 2013/11/09 (土) | ブランチモデルとは? | 456     |
| Git勉強会 Vol.3 | 未定            | 課題管理との連携     | -       |
※ここはフォントの関係でちょっと横幅が崩れて表示されるかも・・・

### 区切り文字で囲われたコードブロック

~~~~
ソースコードをここに書く
~~~~

GitHub Flavored Markdown(GFM)について

標準のMarkdownを元にGFMでは以下のような拡張がされています

  • _(アンダースコア)での強調の無効化
  • 段落中の文末にスペースを2つ以上入れなくても改行されます
  • URLの自動リンク
  • 打ち消し線のサポート
  • 区切り文字で囲われたコードブロック
  • ソースコードブロックのシンタックスハイライト機能
  • 絵文字のサポート

サンプル

### 打ち消し線のサポート
~~打ち消し線~~

### 区切り文字で囲われたコードブロック

```
ソースコードをここに書く
```

### ソースコードブロックのシンタックスハイライト機能

```rb
num = 0
while num < 2 do
   print("num = ", num)
end
print("End")
```

リンク

エンジニアならトコトンこだわりたい!Markdownエディタ20選【Mac, iPhone他】

@tarunama
Copy link

tarunama commented Sep 5, 2016

こちらだけ、Markdwonになってる気が!
https://gist.github.com/wate/7072365#markdwonの種類

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment