MarkDown表記を使ってみた

| コメント(0) | トラックバック(0)

MarkDown表記を使ってみた

htmlのタグを打たず、だけど素早くhtmlを作成したい時に有用な書き方です。

と言う訳でblog更新のため最低限下記まとめてみた。

見出し

・ ソース

# 見出し #
## 見出し2 ##
### 見出し3 ###
# 見出し 
## 見出し 2
### 見出し 3

・ 変換後 htmlソース

<h1>見出し</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h1>見出し</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

文章段落

文章に改行を2回入れる ・ソース

文章段落1、1月2日、今日は晴れ
                        //この行は空白
文章段落1、1月3日、今日は雨

・変換後 htmlソース

<p>文章段落1、1月2日、今日は晴れ</p>
<p>文章段落1、1月3日、今日は雨</p

文章改行

文章に行末に半角スペースを2回入れる。
※ [ ]がスペース

・ソース

1月2日、今日は晴れ[ ][ ]
1月3日、今日は雨

・変換後 htmlソース

<p>
1月2日、今日は晴れ
<br>
1月3日、今日は雨
</p>

文章強調

強調部分をアスタリスクorアンダーバーで区切る

・ソース

1月2日、今日は*晴れ*
1月3日、今日は_雨_  
1月4日、今日は**雷警報がでている!**  
1月4日、今日は**台風がきている!**

・変換後 htmlソース

<p>
1月2日、今日は
<em>晴れ</em><br>
1月3日、今日は
<em>雨</em><br>
1月4日、今日は
<strong>雷警報がでている!</strong><br>
1月4日、今日は
<strong>台風がきている!</strong><br>
</p>

ソースコード 表示(文書中)

・ソース

`<div>`タグ表示や、`print()` functionなど

・変換後 htmlソース

<p><code>&lt;div&gt;</code>タグ表示や、<code>print()</code> functionなど</p>

ソースコードの表示

行頭にタブ文字or半角スペース4文字を利用

・ソース

[tab]<table>
[tab]    <tr> <td> hogehoge </td> <td> fugafuga</td> <tr>
[tab]</table>

・変換後 htmlソース

<pre><code>&lt;table&gt;
   &lt;tr&gt; &lt;td&gt; hogehoge &lt;/td&gt; &lt;td&gt; fugafuga&lt;/td&gt; &lt;tr&gt;
&lt;/table&gt;
</code></pre>

リスト

・ソース

* りんご
* ばなな
* みかん
- ふが
- ほげ
- もが

・変換後 htmlソース

<ul>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
<li>ふが</li>
<li>ほげ</li>
<li>もが</li>
</ul>

引用

・ソース

> これは引用である
> 強いられているんだ!!

・変換後 htmlソース

<blockquote>
  <p>これは引用である
  強いられているんだ!!</p>
</blockquote>

リンク1

・ソース

このサイトは[mukaer.com](http://mukaer.com)です。
このサイトは、[mukaer.com](http://mukaer.com "ジャンプ mukaer.com")

・変換後 htmlソース

このサイトは<a href="http://mukaer.com">mukaer.com</a>です。
このサイトは、<a href="http://mukaer.com" title="ジャンプ mukaer.com">mukaer.com</a>

リンク2

・ソース

[Google] [1] はなければ生きていけません。  
[Yahoo] [2] はヤフオク ぐらいは利用しています。  
[MSN] [3]とくに・・・  
[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"

・変換後 htmlソース

<p><a href="http://google.com/" title="Google">Google</a> はなければ生きていけません。 <br>
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> はヤフオク ぐらいは利用シています。 <br>
<a href="http://search.msn.com/" title="MSN Search">MSN</a>とくに・・・  </p>

画像表示

・ソース

![alt text](/img/macbook1-thumb.jpg "Title")
![alt text][id]
[id]: /img/macbook2.jpg "Title"

・変換後 htmlソース

<img src="/img/macbook1-thumb.jpg" alt="alt text" title="Title">
<img src="/img/macbook2.jpg" alt="alt text" title="Title">

その他

テーブルなどの表記は直接タグ打ちをシなければならない。
注意としては、markdown表記が利用できなくなる。

<div> *強調できない* </div>

利用できない文字があるので、バックスラッシュを使う。

\* アスタリスクの表示例

利用できない文字

 \ * _ { } [ ] ( ) # + - . !

トラックバック(0)

トラックバックURL: http://mukaer.com/cgi-bin/mt/mt-tb.cgi/43

コメントする

PR

PR





検索

Loading

メニュー

twitter