TOEIC 370ぐらいで美少女高専生の後輩「
TL;DR
繰り返しリンクは以下のように表現できる.
[1つ目のリンク][example]と[2つ目のリンク][example] ← この2つのリンク先は同じだよ!
\[example]: http://example.com/
<!-- 出力されるHTML -->
<a href="http://example.com/">1つ目のリンク</a>と<a href="http://example.com/">2つ目のリンク</a> ← この2つのリンク先は同じだよ!
※ 上記のMarkdownの最下行,行頭の\
は不要です(Qiita上ではエスケープしておかないとコードブロック中でも表示されなくなってしまうので,とりあえずつけてあります).
Markdown中のリンクをDRYにする
1記事中で同一URLに対しリンクを貼ることってよくありますよね?
このとき,毎回URLをコピペする人もいると思います.めんどくさいですね.
変数に突っ込めたら楽なのになーと,プログラマならだれでも考えると思います.
それ,Markdown標準の機能でできるんです.
Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:
This is [an example][id] reference-style link.
You can optionally use a space to separate the sets of brackets:
This is [an example] [id] reference-style link.
Then, anywhere in the document, you define your link label like this, on a line by itself:
[id]: http://example.com/ "Optional Title Here"
[link-id]: http://example.com
と定義しておくことで,[リンクテキスト][link-id]
でhttp://example.com
へのリンクを設定することが可能になります.
なお,この機能についてはQiita公式のMarkdown記法チートシートにもしっかり記載してあります.
- [リンクテキスト][名前]
- [名前]:URL
- 同じURLへのリンクを複数箇所に設定することができます
例
Markdown:
[ここ][link-1] と [この][link-1] リンクは同じになります。
[link-1][] も可能です。
[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d結果:
[ここ][link-1] と [この][link-1] リンクは同じになります。
[link-1][] も可能です。
[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d
QiitaかGitHub Flavored Markdown,PHP Markdownあたりの独自拡張かと思いきや,実はMarkdownオフィシャルなやつだったんですね.
Example
この記法を実際に使ってみた例は以下のようになります.
Markdown(もとのやつ):
# [izumin5210][twitter]のほーむぺーじ
[izumin5210][twitter]のホームページヘようこそ!
あなたは17番目のお客様です!
* [Twitterアカウント][twitter]
* [Githubアカウント][github]
\[twitter]: https//twitter.com/izumin5210
\[facebook]: https://facebook.com/izumin5210
※ 上記のMarkdownの下2行,行頭の\
は不要です.
HTML(出力結果):
<h1><a href="https//twitter.com/izumin5210">izumin5210</a>のほーむぺーじ</h1>
<a href="https//twitter.com/izumin5210">izumin5210</a>のホームページヘようこそ!
あなたは17番目のお客様です!
<ul>
<li><a href="https//twitter.com/izumin5210">Twitterアカウント</a></li>
<li><a href="https//github.com/izumin5210">GitHubアカウント</a></li>
</ul>
title
も定義できる
ちなみに,リファレンス定義時にtitle
を一緒に決めることもできます.
これはリンクテキストではなくa
要素のtitle
属性になります.
optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.
- Links | Daring Fireball: Markdown Syntax Documentation
これでMarkdownもコピペコードじゃなくDRYに書けますね!
」
ぼく「せやな」
TOEIC 370ぐらいで美少女高専生の後輩「
ちなみに,この記事でもreference-styleなリンクを利用してます.
興味がある人はURL末尾に.md
とつけてみてください!
Markdownのソースが見れると思います!
」
ぼく「お,おう」
inspired by IQ1450で美少女JSの先輩から、Rubyで無から有を生み出す方法を教わった - Qiita