モブログでMarkdownって使えるものなの?(その6:引用)

引用について試してみた。


引用マークの正体はblockquoteタグ

<blockquote>−HTML5タグリファレンス
<blockquote>タグは、他の情報源からの引用・転載セクションであることを表す際に使用します。cite属性には、引用元のアドレスが存在する場合にそのURLを指定します。blockquote要素は...
引用部分の先頭に「> 」を付ける。これで引用になります。blockquoteとして解釈されます。blockquoteなので、引用部分に対してもHTMLやMarkdownが有効になります。
>**あかあか**と
>日はつれなくも
>秋の風

あかあか
日はつれなくも
秋の風


ただし、改行したつもりでも、一行に連結されてしまう(はてなダイアリーは反対に、広い改行になってますね)。Markdownは中身を扱うだけで、レイアウトは環境によりけり。SGMLの性格を踏襲しています。意図的に改行するには、文末に空白を2つ置かねばなりません。ここが不思議なところ。空白だから、後で見つけにくい。

>**あかあか**と  
>日はつれなくも
>秋の風

あかあか
日はつれなくも
秋の風


引用元を明示する

Blockquoteの表示はブログによって異なります。どういうstyleが設定されているかに依存する。しかもMarkdownだと、リンク先を明示する方法とセットになっていない。

>あかあかと日はつれなくも秋の風
>
http://www2.yamanashi-ken.ac.jp/~itoyo/basho/okunohosomichi/okuno31.htm
対応方法とすると、空行を置いてからURLアドレスを書きます。

あかあかと日はつれなくも秋の風

http://www2.yamanashi-ken.ac.jp/~itoyo/basho/okunohosomichi/okuno31.htm


または、[title](URL)形式でリンク先を明示します。

> あかあかと日はつれなくも秋の風
>
[奥の細道](http://www2.yamanashi-ken.ac.jp/~itoyo/basho/okunohosomichi/okuno31.htm)

あかあかと日はつれなくも秋の風

奥の細道

この方法だと、同じ引用符内にアドレスを書き込むことが出来ます。


コード引用はバッククオートを使う

<code>−HTML5タグリファレンス
<code>タグは、プログラムなどのコードであることを示す際に使用します。 例えば、HTMLやXMLの要素名や属性名、ファイル名、プログラムなどのコンピューターが認識するであろう文字列です。一般的なブ...
実行されると全体の表示が崩れるので、コードはバッククオートで挟みます。「``` 」。こういうの。「グレイヴ・アクセント」というのが正式な呼び名のようです。ここにコードを書くとcodeタグ扱いで表示されます。たいてい等幅フォントに変換されます。

```
<script>
  location.href = "http://www.asahi.com/special/soseki/"
</script>
```

実行すると別のサイトに飛んでしまう。だから抑制。

<script>
location.href = "http://www.asahi.com/special/soseki/"
</script>
コード引用であれば改行も表現できる。リンク先も、あれ? 無効じゃなかった?


コードの言語指定をする

実は、バッククオートの後に言語名を付けると、シンタックス・ハイライトを使うことができます。もちろん、そのための設定がブログにある場合に限りますが。下記のように「```javascript」と添えると、書かれたコードがjavascriptだと示すことができます。

```javascript
<script>
  location.href = "http://www.asahi.com/special/soseki/"
</script>
```

出力されるHTMLコードは下記の通り。

<pre><code class="lang-javascript">&lt;script&gt;
location.href = "http://www.asahi.com/special/soseki/"
&lt;/script&gt;
</code></pre>

codeタグのclassにlang-javascriptが指定されます。対応していれば色つきコードが表示される。たぶん highlight.js なら大丈夫。下記サイトを参照してください。

  • How to use highlight.js

  • 文中のコードはバッククオート一個

    HTMLタグを文中に書くと、表示が崩れる場合があります。タグを無効にしたい。そんな場合は「`」でそのタグを挟むことで対処します。意外とそういう場面は多い。

    コードは`<strong>バッククオート</strong>`で挟みます

    コードは<strong>バッククオート</strong>で挟みます

    本来なら<strong>が実行されて「バッククオート」が太字になるんですけど、バッククオートで挟んだため、strongタグが抑制されそのまま表示されています。HTML無効化の術。


    まとめ

    コードの引用はよく使います。モブログで表示が壊れる場合は、どこかにHTMLタグが埋まっていると思って間違いない。ブックマークレットで引用した文章とか、初心の間は気付きにくいので、怪しそうなところはバッククオートで無効化する。絆創膏のようなもの。