LoginSignup
28
26

More than 5 years have passed since last update.

【Markdown】TOEIC 370ぐらいで美少女高専生の後輩「また同じURLをコピペしてるの?」

Last updated at Posted at 2015-04-26

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上ではエスケープしておかないとコードブロック中でも表示されなくなってしまうので,とりあえずつけてあります:bow:).

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"

- Links | Daring Fireball: Markdown Syntax Documentation

[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

- Markdown記法 チートシート - Qiita

QiitaかGitHub Flavored MarkdownPHP 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

References

28
26
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
26