Browse: Home » markdown

markdown

【Markdown】脚注の書き方。

を、メモ。

Default
1
2
3
[^1]: test
 
テストとは[^1]

脚注を[^1]:文字列というように定義して脚注を入れたい場所に[^1]としてやればよい。

テストとは1

とこんな具合になる。

  1. test ↩

2014/11/28 _onichannn , ,

【Markdown】リアルタイムプレビュー機能のついたモダンなWebMarkdownエディタ。

http://dillinger.io/

デザインもシンプルかつ非常にわかりやすくサクッとmdを作成した場合は便利。

2014/11/21 _onichannn , , ,

【Markdown】バッククオートを含むインラインコードを記述する方法。

インラインコードにバッククオート`を含めたい場合、最も長く連続するバッククオートよりも多く連続したバッククオートで出力したいバッククオートを囲めばいい。

なので一つのバッククオートを出力したければこうする。

Default
1
2
`` ` ``
 

二つのバッククオートを出力したければこうする。

Default
1
2
``` `` ```
 
2014/11/20 _onichannn , ,

【Markdown】Windows用のMarkdownエディタ。

これがオススメ。

リアルタイムの解析精度も高くて動作も軽い。

http://markdownpad.com/

気に入ったら買うかも。

2014/11/20 _onichannn , , ,

【Markdown, CSS】マークダウンエディタ用CSS。

なかなかかっこいいのが見当たらなかったけどようやくいいの見つけた。

http://blog.gamuratwist.jp/css/entry-57.html

bootstrapベースでなかなかかっこいい。

あとは自分用にfont-familyに下記を追加。

CSS
1
"Hiragino Kaku Gothic Pro", meiryo, "Open Sans",
2014/11/20 _onichannn , , ,

【Markdown】自分用MarkdownPad2設定メモ。

Tool → options で設定できる項目のメモ。

  • Background Color
    • Black
  • Fonr Color
    • #FF8F8F8F
  • Font
    • Consolas 14px Normal
  • Editor Features
    • Automatically continue lists
2014/11/20 _onichannn , ,

【Markdown】自分用MarkdownPad2用CSS。

メモ。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
body {
  padding: 10px 15px;
  font-family: "Hiragino Kaku Gothic Pro", meiryo, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  background: #ddd;
}
 
a, a:visited {
  color: #0088cc;
  text-decoration: none;
}
 
a:hover {
  color: #005580;
  text-decoration: underline;
}
 
p { margin: 0 0 20px; }
small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
 
h1,h2,h3,h4,h5,h6 {
  margin: 10px 0;
  font-family: "Hiragino Kaku Gothic Pro", meiryo, "Open Sans", inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
 
h1,h2,h3 { line-height: 40px; }
h1 { font-size: 38px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; }
 
h1,h2,h3,h4 { border-bottom: 1px solid #eee; }
h4 { line-height: 30px }
 
ul,ol {
  padding: 0;
  margin: 0 0 10px 25px;
}
 
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
 
li {
  line-height: 30px;
  list-style-type: disc;
}
 
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
 
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}
 
code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
 
code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}
 
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
 
pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
}
 
table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
 
table th,
table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
 
table th { font-weight: bold; }
table thead th { vertical-align: bottom; }
 
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0;
}
2014/11/20 _onichannn , ,

【WordPress】マークダウン記法を用いて記事を作成し、Syntaxhighlightもする。

まずは下記プラグインをインストール

  • Markdown on Save Improved 2

このプラグインはgithubで用いられているマークダウンのように「three backticks」記法に対応しているので、ソースコードをよく記述する場合はとても便利。 しかし「Markdown on Save Improved 2」は管理画面のプラグイン検索で引っかからないので、自分でダウンロードしてきてpluginsフォルダに配置してやる必要がある。

  1. https://github.com/zmax/markdown-on-save-improved-2にアクセスしてzipをダウンロード。
  2. 解凍してでてきたフォルダを「markdown-on-save」に改名。
  3. wordpressのプラグインフォルダにぶちこむ。※（wpcontent/plugins）
  4. 管理画面から「Markdown on Save Improved 2」を有効にする。

これでこのプラグインのインストールは完了。 記事を作成する際に「Disable Markdown formatting」のチェックボックスが外れていることを確認すること。
※チェクが入っているとマークダウン記法が無効になる。

  • Crayon Syntax Highlighter

「Markdown on Save Improved 2」だけだとシンタックスハイライトが有効にならないので上記プラグインも導入してやる。 こちらはプラグイン検索で引っかかるのでそのままプラグイン名コピペで検索すればOK。

インストール後、プラグインを有効にすればOK。

使ってみる。

まずはトリプルバッククオート記法を試してみる。 こんな感じで入力。

b06670bcd5e93f7705d0746e889fb552

と入力してみる。

PHP
1
2
3
4
5
6
7
8
9
class hoge {
    
    public $piyo;
 
    private function fuga()
    {
        ehco 'test';
    }
}

さぁどうなった！！

2014/11/20 _onichannn , ,