ニンニンイン

Markdown And Style Sheet Check

この記事は、ブログのデザイン確認と、マークダウン記法の確認の為に作成しました。

H1見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
#H1見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]

H2見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
##H2見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]

H3見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
###H3見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]

H4見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
####H4見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]
H5見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
#####H5見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]
H6見出しタグ

テスト文章テスト文章テスト文章テスト文章

[code lang=”html”]
######H6見出しタグ
テスト文章テスト文章テスト文章テスト文章
[/code]

連番番号なし

  • AAA
  • BBB
  • CCC
  • DDD
  • EEE
[code lang=”html”]
– AAA
– BBB
– CCC
– DDD
– EEE
[/code]

連番番号付き

数字の順番は無視され、<ol>のタグとなるようだ

  1. 実は[1.]と書いてます
  2. 実は[5.]と書いてます
  3. 実は[4.]と書いてます
  4. 実は[2.]と書いてます
  5. 実は[3.]と書いてます
[code lang=”html”]
1. 実は[1.]と書いてます
5. 実は[5.]と書いてます
4. 実は[4.]と書いてます
2. 実は[2.]と書いてます
3. 実は[3.]と書いてます
[/code]

組み合わせて複雑な感じもいけるっぽい

  1. 東京
    • 千代田
    • 中央
    • 港
  2. 大阪
    • 北
    • 中央
    • 此花
  3. 名古屋
    • 中川
    • 中村
  4. その他
    1. 台北
    2. 北京
    3. バンコク
[code lang=”html”]
1. 東京
– 千代田
– 中央
– 港
2. 大阪
– 北
– 中央
– 此花
3. 名古屋
– 中川
– 中村
4. その他
1. 台北
2. 北京
3. バンコク
[/code]

引用文章

この文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用です
改行して更に引用しています。
改行して更に引用しています。
改行して更に引用しています。
最終行です最終行です最終行です最終行です最終行です。

[code lang=”html”]
>この文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用ですこの文章は引用です
>改行して更に引用しています。
>改行して更に引用しています。
>改行して更に引用しています。
>最終行です最終行です最終行です最終行です最終行です。
[/code]

リンク

やふーだよ
ぐーぐるだよ
ワードプレスだよ

[code lang=”html”]
[やふーだよ](http://yahoo.co.jp/ "Yahooだよ")
[ぐーぐるだよ](http://google.co.jp/ "Googleだよ")
[ワードプレスだよ](http://wordpress.org/ "Wordpressだよ")
[/code]

リンクを変数のように使う方法もあるようだ
うっひょひょーい！パソコン起動したらまずは Google へアクセスするんだ。
次にYahoo にアクセスしてから MSNへアクセスするよ。

[code lang=”html”]
うっひょひょーい！パソコン起動したらまずは [Google] [1] へアクセスするんだ。
次に[Yahoo] [2] にアクセスしてから [MSN] [3]へアクセスするよ。
[1]: http://google.co.jp/ "Google"
[2]: http://yahoo.co.jp/ "Yahoo Search"
[3]: http://jp.msn.com/ "MSN Search"
[/code]

まあ、変数のやり方は分かりづらい気もする。

自動改行されちゃうのはスペース2個で<br />に出来る

この文章は文字の改行テストです。（ここに半角スペース2つ入れる→）
すると改行もできちゃうのです。便利ですね～（ここに半角スペース2つ入れる→）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）

一行開けると、<p>となりますわかりましたか？

[code lang=”html”]
この文章は文字の改行テストです。（ここに半角スペース2つ入れる→）
すると改行もできちゃうのです。便利ですね～（ここに半角スペース2つ入れる→）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）
半角スペース入れないとこうなるよ（半角スペース入れてない）
[/code]

強調文章（ボールド）

強調したいところには半角の＊＊（アスタリスク2つ）もしくは＿＿（アンダースコア2つ）で囲みます。
例えば…このようにして使います。
こっちも…強調表示されますよ。

[code lang=”html”]
強調したいところには半角の＊＊（アスタリスク2つ）もしくは＿＿（アンダースコア2つ）で囲みます。
例えば…**このように**して使います。
こっちも…__強調表示__されますよ。
[/code]

マークダウン処理のエスケープ（適用させない）

半角＼（バックスラッシュ）で囲むと適用させないことができます。
\ほほう。こうするとここにはマークダウンが適用されません\
と思ったら適用されてるやん…ワードプレスプラグインでは出来ないのかな？
とりあえず方法としては<div></div>で囲むとエスケープ出来るみたいですよ。

ほほう。**こうするとここには**マークダウンが適用されません

SyntaxHilighterと一緒に使うときは、<div>も一緒に利用すると良いそうです。

[code lang=”php”]
<?php
echo "ここには**PHP**のコードが表示されます";
/****** ここはPHPのコメントおおおお ******/
echo "Hello World!!";
?>
[/code]

参考サイトです

[code lang=”html”]
– [Markdown記法でHTMLコーディングを爆速化するWordPressプラグイン ｜ウェブシュフ](http://webshufu.com/markdown-on-save-improved/)
– [文章作成やメモ書きにも便利、Markdown記法｜Web Design KOJIKA17](http://kojika17.com/2013/01/starting-markdown.html)
– [Markdownを導入してみたから記法まとめ。 | Ginpen.com](http://ginpen.com/2011/12/02/markdown-syntax/)
[/code]

私が利用しているマークダウン記法プラグイン

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です