SlideShare a Scribd company logo
1 of 22
Download to read offline
Markdown がアツい
2015.05.11 @yamasy1549# LOUPE Study
Markdown がアツい
Markdown とは
Markdown is intended to be as easy-to-read and easy-to-write
as is feasible.
Markdown がアツい
Markdown とは
Markdown is intended to be as easy-to-read and easy-to-write
as is feasible.
http://images.google.com/images?num=30&q=rabbit
.md
Markdown がアツい
Markdown とは
Markdown is intended to be as easy-to-read and easy-to-write
as is feasible.
http://images.google.com/images?num=30&q=rabbit
.md
http://images.google.com/images?num=30&q=rabbit
.html
Markdown がアツい
Markdown とは
Markdown is intended to be as easy-to-read and easy-to-write
as is feasible.
http://images.google.com/images?num=30&q=rabbit
.md
http://images.google.com/images?num=30&q=rabbit
.html
(´-`).。oO(ヒトにやさしいsyntax)
Markdown がアツい
Markdown のここが好き
THis is an H1
=============
# This is an H1
## This is an H2 ##
###### This is an H6
.md .html
<h1>This is an H1</h1>
<h1>This is an H1</h1>
<h2>This is an H2</h2>
<h6>This is an H6</h6>
Markdown がアツい
Markdown のここが好き
> 高校入学を機に木組みの家と石畳の街に引っ越してきた
> ココアは、下宿先を探して道に迷う中、ラビットハウス
> という名の喫茶店を発見する。
.md
<blockquote>
高校入学を機に木組みの家と石畳の街に引っ越してきた
ココアは、下宿先を探して道に迷う中、ラビットハウス
という名の喫茶店を発見する。
</blockquote>
.html
Markdown がアツい
Markdown のここが好き
> 高校入学を機に木組みの家と石畳の街に引っ越してきた
ココアは、下宿先を探して道に迷う中、ラビットハウス
という名の喫茶店を発見する。
.md
<blockquote>
高校入学を機に木組みの家と石畳の街に引っ越してきた
ココアは、下宿先を探して道に迷う中、ラビットハウス
という名の喫茶店を発見する。
</blockquote>
.html
Markdown がアツい
Markdown のここが好き
* Color
* warm
* Red
* Orange
* cold
* Blue
* Gray
.md .html
<ul>
<li>Color</li>
<ul>
<li>warm</li>
<ul>
<li>Red</li>
<li>Orange</li>
</ul>
</ul>
<ul>
<li>warm</li>
<ul> ...略
Markdown がアツい
Markdown のここが好き
* Color
+ warm
- Red
- Orange
+ cold
- Blue
- Gray
.md .html
<ul>
<li>Color</li>
<ul>
<li>warm</li>
<ul>
<li>Red</li>
<li>Orange</li>
</ul>
</ul>
<ul>
<li>warm</li>
<ul> ...略
Markdown がアツい
Markdown のここが好き
1. rabbit
2. dog
3. fox
.md .html
<ol>
<li>rabbit</li>
<li>dog</li>
<li>fox</li>
</ol>
Markdown がアツい
Markdown のここが好き
3. rabbit
1. dog
8. fox
#=>
1. rabbit
2. dog
3. fox
.md .html
<ol>
<li>rabbit</li>
<li>dog</li>
<li>fox</li>
</ol>
Markdown がアツい
Markdown のここがうれしい!
私は [株式会社LOUPE](http://lo-upe.com) にいます。
#=> 私は 株式会社LOUPE にいます。
.md
Markdown がアツい
Markdown のここがうれしい!
私は [株式会社LOUPE](http://lo-upe.com) にいます。
#=> 私は 株式会社LOUPE にいます。
[インターン生の声](/recruit) はこちら
#=> インターン生の声 はこちら
.md
Markdown がアツい
Markdown のここがうれしい!
私は [株式会社LOUPE](http://lo-upe.com) にいます。
#=> 私は 株式会社LOUPE にいます。
[インターン生の声](/recruit) はこちら
#=> インターン生の声 はこちら
[Webフォント][loupe-icon] を作らせてもらいました!
[loupe-icon]: http://lo-upe.com/loupe-icon
#=> webフォント を作らせてもらいました!
.md
Markdown がアツい
Markdown のここがうれしい!
・Square brackets containing the link identifier (optionally
indented from the left margin using up to three spaces);
・followed by a colon;
・followed by one or more spaces (or tabs);
・followed by the URL for the link;
・optionally followed by a title attribute for the link, enclosed
in double or single quotes, or enclosed in > parentheses.
Markdown がアツい
Markdown のここがうれしい!
[id]: http://example.com/ "title属性"
[id]: http://example.com/ 'title属性'
[id]: http://example.com/ (title属性)
.md
・Square brackets containing the link identifier (optionally
indented from the left margin using up to three spaces);
・followed by a colon;
・followed by one or more spaces (or tabs);
・followed by the URL for the link;
・optionally followed by a title attribute for the link, enclosed
in double or single quotes, or enclosed in > parentheses.
Markdown がアツい
Markdown のここがうれしい!
[Google][]
[Google]: http://google.com/
#=> Google
.md
Markdown がアツい
Markdown のここがうれしい!
![やましーの似顔絵][yamasy]
[yamasy]: img/yamasy-logo.png “これがやましーだ。”
#=>
.md
Markdown がアツい
やっぱり Markdown が好き!!
 ` * _ {} [] () <> #
+ - = : ! .
.md .html
<html> <head> <body>
<title> <meta> <link>
<script> <hr> <br> <p>
<center> <div> <pre>
<blockquote> <address>
<ul> <ol> <li> <dl>
<dt> <dd> <img> <code>
<small> <em> <strong>
<h1> <h2> <h3> <h4> <h5>
<h6> <table> <tr> <hd>
&quote; &amp; &lt; &gt;
&nbsp; &copy; ...略
Markdown がアツい
やっぱり Markdown が好き!!
 ` * _ {} [] () <> #
+ - = : ! .
.md .html
<html> <head> <body>
<title> <meta> <link>
<script> <hr> <br> <p>
<center> <div> <pre>
<blockquote> <address>
<ul> <ol> <li> <dl>
<dt> <dd> <img> <code>
<small> <em> <strong>
<h1> <h2> <h3> <h4> <h5>
<h6> <table> <tr> <hd>
&quote; &amp; &lt; &gt;
&nbsp; &copy; ...略
(´-`).。oO(もっとmd使おう)
Markdown がアツい
参考
http://daringfireball.net/projects/markdown/syntax
http://qiita.com/izumin5210/items/33ad02a726744cc6fc23
【Markdown】TOEIC 370ぐらいで美少女高専生の後輩
「また同じURLをコピペしてるの?」

More Related Content

More from Sanae Yamashita

vivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルSanae Yamashita
 
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Sanae Yamashita
 
Vivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンSanae Yamashita
 
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleSanae Yamashita
 
CSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleSanae Yamashita
 
読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitacltSanae Yamashita
 
きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?Sanae Yamashita
 
UIデザインの心理学
UIデザインの心理学UIデザインの心理学
UIデザインの心理学Sanae Yamashita
 
軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)Sanae Yamashita
 
この夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltこの夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltSanae Yamashita
 
Hello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでHello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでSanae Yamashita
 
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~Sanae Yamashita
 
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -Sanae Yamashita
 
CSSをさわってみよう
CSSをさわってみようCSSをさわってみよう
CSSをさわってみようSanae Yamashita
 
HTMLをさわってみよう
HTMLをさわってみようHTMLをさわってみよう
HTMLをさわってみようSanae Yamashita
 
gitを使う準備をしよう - 中級編
gitを使う準備をしよう - 中級編gitを使う準備をしよう - 中級編
gitを使う準備をしよう - 中級編Sanae Yamashita
 
gitを使う準備をしよう - 初級編
gitを使う準備をしよう - 初級編gitを使う準備をしよう - 初級編
gitを使う準備をしよう - 初級編Sanae Yamashita
 
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそうSanae Yamashita
 
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいRubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいSanae Yamashita
 

More from Sanae Yamashita (20)

vivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアル
 
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
 
Vivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオン
 
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
 
CSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #Vivliostyle
 
読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt
 
きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?
 
UIデザインの心理学
UIデザインの心理学UIデザインの心理学
UIデザインの心理学
 
軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)
 
この夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltこの夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitaclt
 
Hello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでHello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまで
 
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
 
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
 
Me and GitHub
Me and GitHubMe and GitHub
Me and GitHub
 
CSSをさわってみよう
CSSをさわってみようCSSをさわってみよう
CSSをさわってみよう
 
HTMLをさわってみよう
HTMLをさわってみようHTMLをさわってみよう
HTMLをさわってみよう
 
gitを使う準備をしよう - 中級編
gitを使う準備をしよう - 中級編gitを使う準備をしよう - 中級編
gitを使う準備をしよう - 中級編
 
gitを使う準備をしよう - 初級編
gitを使う準備をしよう - 初級編gitを使う準備をしよう - 初級編
gitを使う準備をしよう - 初級編
 
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
 
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいRubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
 

Markdownがアツい