tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

はてなブログ用にmarkdownをメモっておくメモ(githubのreadmeにも使えますね)

markdown はてな

markdownは議事録や以前の記事で使っていたんですが
githubもmarkdownだしはてぶもmarkdownにするかってことで、
自分が使うmarkdown＆CSSをmarkdownで書いてメモっておくっていうメモです

ながれ

後で見返す自分用にもはてぶで使う順番で書くことにします また、こちらを参考にさせて頂きました

  1. 自分用早見表
  2. 見出し
  3. 段落と改行
  4. リスト記法(箇条書き、番号付き)
  5. 引用記法
  6. pre記法
  7. code記法
  8. 強調記法
  9. リンク記法
  10. 表組み記法
  11. 水平線記法

ってことでさっそく

1. 自分用早見表

自分用ですが、後でさっと見れるように簡易的な早見表として 最初にまとめを書いておきます

項目 はてな記法 markdown 備考
見出し * # は:*=h3 ま:#=h1
段落と改行 打ったまま 連なった複数行 ま:space二つで改行
リスト記法 -とか+ * (スペース必要)とか1.
引用記法 >>～<< 行頭>、1行目に> 両：引用内も記法が使える
pre記法 >|～|<、>||～||< ```～``` 両：ｼﾝﾀｯｸｽﾊｲﾗｲﾄも可
code記法 無し `文字列`
強調記法 無し *文字列*、_文字列_ ま:個数で強調が変わる
リンク記法 [url:title="文字列"] (文字列)[url]
表組み記法 |で囲う |で囲う
水平線記法 無し 「-」、「*」、「_」

※備考※「は:」=はてな、「ま:」=markdown、「両:」=両方

2. 見出し

  • ＃(ハッシュ)を行頭に1〜6個付けることでh1〜6に対応
  • 行末に#(ハッシュ)を付けてもOK *h1、h2だけ区切り文字(=または-の連続でもいける)
markdown
#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6

見出し1
====

見出し2
----
表示

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

見出し1

見出し2

3. 段落と改行

  • 空白行で囲まれた1行、または、複数行の文章が段落になる
  • 段落内での改行は、行末に２つ以上の半角スペースをつける
markdown
あいうえお  (←２つスペース)
かきくけこ  (←1つスペース)
さしすせそ(←0つスペース)
たちつてと  (←２つスペース)
なにぬねの(←0つスペース)
表示

あいうえお
かきくけこ さしすせそ たちつてと
なにぬねの

4. リスト記法(箇条書き、番号付き)

箇条書きリスト

  • 行頭に「*」「-」「+」の記号のどれかをつけると箇条書きになる
  • 記号の後には半角スペースかタブが必要
  • 行頭にスペース４つ(またはタブ１つ)で階層リストになる
markdown
* リスト1
* リスト2
    * リスト1-1
    * リスト1-2
* リスト3
表示
  • リスト1
  • リスト2
    • リスト1-1
    • リスト1-2
  • リスト3

番号付きリスト

  • 数字と「.」で表す
  • 付けた数字は無視され並び順で番号が割り振られる
markdown
1. リスト1
2. リスト2
    1. リスト1-1
    2. リスト1-2
3. リスト3
8. リスト4
2. リスト5
表示
  1. リスト1
  2. リスト2
    1. リスト1-1
    2. リスト1-2
  3. リスト3
  4. リスト4
  5. リスト5

5. 引用記法

  • 行頭に「>」を付けることで引用(htmlの<blockquote>)になる
  • 複数の「>」を付けることで階層になる
  • 引用の上下に空白業がないと正しく表示されない
  • 引用文中もmarkdown記法が解釈される
  • 段落の１行目に「>」をつけると段落全体が引用になる(行頭の「>」省略できる)
markdown
>あいうえお  
>かきくけこ  
>さしすせそ  
>>たちつてと

※引用の中も段落なので各行の後にスペース２つ無いとつながります
あいうえお かきくけこ
みたいな

表示

あいうえお
かきくけこ
さしすせそ

たちつてと

6 pre記法

  • 行頭に４つ以上の半角スペース、または、１つ以上のタブをつける
  • 段落前後に「```」（バッククォート）でも可能
  • 「```javascript」と書くとシンタックスハイライトになる
markdown
```javascript
// クロージャを返却する関数を定義
var createClosureFunc = function() {
  var x = "x in createClosureFunc";
  return function() {
    console.log(x);
  };
}

// 普通に関数定義
var g = function() { console.log(x); };

// fにもfunction() { console.log(x); };的な
// 無名関数への参照が代入される
var f = createClosureFunc();

// 結果
g(); // Uncaught ReferenceError
f(); // 出力 : x in createClosureFunc
```
表示
// クロージャを返却する関数を定義
var createClosureFunc = function() {
  var x = "x in createClosureFunc";
  return function() {
    console.log(x);
  };
}
 
// 普通に関数定義
var g = function() { console.log(x); };
 
// fにもfunction() { console.log(x); };的な
// 無名関数への参照が代入される
var f = createClosureFunc();
 
// 結果
g(); // Uncaught ReferenceError
f(); // 出力 : x in createClosureFunc

7. code記法

  • 文章途中で「`」(バッククォート)で囲むと文章の一部をcodeの一部として表示
  • ２個以上のバッククォートで囲むとソース内のバッククォートも表示できる
markdown
javascriptでは`alert("test")`と記述することで、  
ダイアログでのメッセージを表示できる
表示

javascriptではalert("test")と記述することで、
ダイアログでのメッセージを表示できる

8. 強調記法

  • 強調したい文字を「*」または「_」で囲む
  • 「*」で囲うと<em>、「**」だと<strong>、「***」だと<strong><em>
markdown
_「_」が１つだと`<em>`になります_
__「_」が２つだと`<strong>`、__
___「___」が３つだと`<strong><em>`ってな感じ___
表示

「_」だと<em>になります
「__」だと<strong>、
「___」だと<strong><em>ってな感じ

9. リンク記法

markdown
・これが通常  
[javascriptのクロージャについておさらいメモ](http://tweeeety.hateblo.jp/entry/2014/04/24/205324)

・これがツールチップ付き  
[javascriptのthisについて真面目におさらいするメモ](http://tweeeety.hateblo.jp/entry/20140331/1396236505)"ツールチップだよ"

・これが分離  
[javascriptの即時実行パターンをおさらいメモ][id0001]

[id0001]:http://tweeeety.hateblo.jp/entry/20140331/1396241479
表示

・これが通常
javascriptのクロージャについておさらいメモ

・これがツールチップ付き
javascriptのthisについて真面目におさらいするメモ

・これが分離
javascriptの即時実行パターンをおさらいメモ

10. 表組み記法

  • 「|」(パイプ)で区切る
  • 1行目に項目名(ヘッダ)、２行目に「-」で区切り、３行目にデータの形式
  • 左右の「|」は省略可能
  • ２行目の「-」の左右もしくは両方に「:」を付けて左右中央寄せ指定ができる
markdown
|県名|県庁所在地|人口|
|----|:----:|----:|
|埼玉|さいたま|10|
|青森|青森|5|
|沖縄|那覇|3|
表示
県名 県庁所在地 人口
埼玉 さいたま 10
青森 青森 5
沖縄 那覇 3

11 水平線記法

  • ３つ以上の「-」、「*」、「_」を書くと<hr>になる
markdown
---
******
______
表示

ふむふむ、内容は簡単だけど記事に書くと大変ですね（＞＜）