はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

Markdown記法まとめ(リスト、リンク、画像、インラインHTML、エスケープ)[2/3]

Markdown記法まとめ(リスト、リンク、画像、インラインHTML、エスケープ)[2/3]

前回 Markdown記法まとめ(見出し、段落、改行、水平線、強調、引用、コード)[1/3] からの続き。

追記:インラインHTMLの部分のスペルミスとついでにマークアップを修正しました。2015年6月15日

リスト

番号なしリスト>ul<は、先頭に * (アスタリスク)、 + (プラス)、 - (ハイフン)を

番号付きリスト>ol<は、先頭に 1., 2., 3., ... のように数字 と .(ドット)を付ける。また、数字. でいいので1. ,1. ,1. でもいい。

サンプルコード

 
# リスト,番号付きリスト
## リスト
- ul_item 1
- ul_item 2
- ul_item 3

## 番号付きリスト
1. ol_item 1
2. ol_item 2
3. ol_item 3

プレビュー

リストの場合のプレビューの画像

リンク a

  • 自動リンク: <>で囲み、<URL>と書く。メールアドレスでも大丈夫。
  • インラインリンク: [リンク名](URL "title属性" )と書く。
  • 外部参照リンク: 最初にリンク名を書いておき、実際のリンクを後に書くことができる。 書き方は、[リンク名][参照名]を書いておき、後に、[参照名]:URL "title属性"を書く。

サンプルコード

 
## 自動リンク

 <http://google.com>
 
 <○○○@yahoo.co.jp>
 
 ## インラインリンク
 
 [Google](http://google.com "Title")
 
 ## 外部参照リンク
 
 [Google][a]
 
 [Yahoo][1]
 
 [a]:http://google.com "Title"
 [1]:http://www.yahoo.co.jp
 
 

プレビュー

リンクリンク場合のプレビューの画像

画像 img

画像のみの場合、 ![alt属性](画像ファイルパス) を書く。

外部参照する場合、 ![alt属性][参照名] の後に、 [参照名]:画像ファイルパス を書く。

リンク付き画像は、 [![alt属性](画像ファイルパス)](URL) を書く。

外部リンク付き画像は、 [![alt属性](画像ファイルパス)][参照名] の後に、 [参照名]: URL を書く。

サンプルコード

 
# 画像 img
![桜](sakura.jpg)

## 外部参照の場合
![桜][a]
[a]:sakura.jpg

## リンク付き画像
[![桜](sakura.jpg)](http://google.com)

## 外部リンク付き画像
[![桜](sakura.jpg)][1]
[1]: http://www.yahoo.co.jp

プレビュー

「画像」の場合のプレビューの画像

インラインHTML

今までの記述で書けない場合は、通常のhtmlの記述で書くことができる。

サンプルコード

 
## インラインHTML
- [新規ウィンドウで開いてしまう](http://google.com "Title")
- <a href="http://google.com" target="_blank"<新規タブで開く</a> 

プレビュー

インラインHTMLの場合のプレビューの画像

エスケープ

バックスラッシュを付けることでエスケープできる。

サンプルコード

 
## \\(バックスラッシュ)でエスケープ
### aaa
\### aaa 

プレビュー

エスケープの場合のプレビューの画像

次回はMarkdownに優れているエディタを紹介。

次回: Markdown記法 おすすめエディタ[3/3] - はしくれエンジニアもどきのメモ

前回:Markdown記法まとめ(見出し、段落、改行、水平線、強調、引用、コード)[1/3]