実際に使ってみると、通常の記法はもちろんのことですが、こちらのPHP Markdownで使える記法もこのJetpackプラグインのMarkdownでも使えたので、それも併せて。
記法の目次
- 見出し
- 段落・改行
- リンク
- リスト(ul)
- リスト(ol)
- リストの入れ子
- コード
- 強調
- 画像
- 略語
- 脚注
- 引用
要素 |
Markdown |
HTML |
見出し その1 |
見出し1
============= 見出し2
------------- |
<h1>見出し1</h1> <h2>見出し2</h2> |
見出し その2 |
# 見出し1
## 見出し2
###### 見出し6 |
<h1>見出し1</h1> <h2>見出し2</h2> <h6>見出し6</h6> |
見出し その3 |
# 見出し1 #
## 見出し2 ##
### 見出し3 ### |
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> |
見出し その4 |
#### 見出し4 {#header4} |
<h4 id=”header4″>見出し4</h4> |
見出しその4に関しては、JetPackのMarkdownを有効にした場合。(通常のMarkdown記法ではない)
段落は、前後に空行を入れることによって段落として認識されます。 改行は、半角スペース2つ入れます。
要素 |
Markdown |
HTML |
段落 |
文章 文章 |
<p>文章</p>
<p>文章</p> |
改行 |
文章 文章 |
<p>文章</br>
文章</p> |
要素 |
Markdown |
HTML |
その1 |
[リンク](http://google.com/ "google")です。 |
<a href="http://google.com/" title="google">リンク</a>です。 |
その2 |
[ページ内リンク](#header) |
<a href="#header">ページ内リンク</a> |
その3 |
[ホーム][home]、[google][1]へリンク。
[home]: http://infinityforest.net/home "InfinityScope"
[1]: http://google.com "google" |
<a href="http://infinityforest.net/home" title="InfinityScope">ホーム</a>、<a href="http://google.com" title="google">google</a> へリンク。 |
その4 |
<http://google.com> |
<http://google.com> |
その2に関しては、JetPackのMarkdownを有効にした場合。(通常のMarkdown記法ではない)
文頭に「*」「+」「-」のいずれかを入れる リストの前後に空白行をいれ、「*」「+」「-」の後にはスペースが必要
要素 |
Markdown |
HTML |
リスト |
+ リスト
+ リスト
+ リスト
| <ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul> |
文頭に「数字.」を入れる リストの前後に空白行をいれ、「数字.」の後にはスペースが必要
要素 |
Markdown |
HTML |
リスト |
1. リスト
2. リスト
3. リスト
| <ol>
<li>1. リスト</li>
<li>2. リスト</li>
<li>3. リスト</li>
</ol> |
入れ子にするには、タブまたは4スペースを入れる。 ul・olの相互入れ子もできます。
要素 |
Markdown |
HTML |
リスト |
+ 文章
+ 文章
+ 入れ子1
1. 入れ子2(番号付き)
2. 入れ子2
3. 入れ子2
+ 入れ子1
+ 文章
|
<ul>
<li>文章</li>
<li>文章
<ul>
<li>入れ子1
<ol>
<li>入れ子2(番号付き)</li>
<li>入れ子2</li>
<li>入れ子2</li>
</ol>
<li>入れ子1</li>
</li>
<li>文章</li>
</ul>
|
コード部分を(バッククオート)
で囲みます。 4スペースかタブでインデントにするとブロックになります。
要素 |
Markdown |
HTML |
その1 |
この場合は .addClass` を使います。 |
この場合は<code>.addClass</code>です。 |
その2 |
$(function(){
$("#post ul").addClass("list");
}); |
<pre><code>$(function(){
$("#post ul").addClass("list");
});</code></pre> |
その3 |
~~~~~
$(function(){
$("#post ul").addClass("list");
});
~~~~~ |
<pre><code>$(function(){
$("#post ul").addClass("list");
});</code></pre> |
その3に関しては、JetPackのMarkdownを有効にした場合。(通常のMarkdown記法ではない)
* (アスタリスク)か _ (アンダースコア)で囲みます。 2つ書くとstrongになります。
要素 |
Markdown |
HTML |
その1 |
こう書くと*強調*です。 こう書くと_強調_です。 |
こう書くと<em>強調</em>です。 |
その2 |
こう書くと**さらに強調**です。 こう書くと__さらに強調__です。 |
こう書くと<strong>さらに強調</strong>です。 |
なので、顔文字などを書くときは、(\*’-'\*)と書くと (*’-'*)このように表示されます。
要素 |
Markdown |
HTML |
その1 |
 |
<img src="/画像へのパス/img.jpg" alt="Alt 文字列" title="title属性の値" /> |
その2 |
![画像][id2]
[id2]: /画像へのパス/img.jpg “title属性の値” |
<img src="/画像へのパス/img.jpg" alt="画像" title="title属性の値" /> |
要素 |
Markdown |
HTML |
その1 |
定義しておくと、文章中にHTMLが登場したときに abbrタグで括られる。
*[HTML]: Hyper Text Markup Language |
定義しておくと、文章中に<abbr title="Hyper Text Markup Language">HTML</abbr>が登場したときに abbrタグで括られる。 |
要素 |
Markdown |
HTML |
その1 |
脚注を入れてみる。[^1] [^footnote]
[^1]: 脚注の文章。
脚注の2段落目。
[^footnote] |
脚注を入れてみる。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup><sup id="fnref:footnote"><a href="#fn:footnote" rel="footnote">2</a><sup> |
脚注に関しては、JetPackのMarkdownを有効にした場合だけかもしれない。確認中
> 文頭に>
を置くことで引用になります。 引用の中に別のMarkdownを使用するやネストすることもできます。
要素 |
Markdown |
HTML |
その1 |
> Markdown は、文書を記述するための軽量マークアップ言語のひとつである。
> 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォー>マット」として、ジョン・グル―バー(John Gruber)により作成された。アーロン・スワーツ(Aaron Swartz)も大きな貢献をし>ている。[1] Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
|
<blockquote>
Markdown は、文書を記述するための軽量マークアップ言語のひとつである。
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)により作成された。アーロン・スワーツ(Aaron Swartz)も大きな貢献をしている。[1] Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
</blockquote> |
※ まだまだ書ききれていないのでこれがすべてというわけではありません。 実際にはもっとありますが、試していないものは書いていません。なので、わかり次第追記していきたいと思います。
やっぱりMarkdownは便利だなと再確認。 ブログを書くのに導入するべきだなと思うのですが、微調整が必要になると思うのでまだこのブログでは使っていません。もう少し時間が取れたら使おうかなぁ。