モブログでMarkdownって使えるものなの？（その６）

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

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

<blockquote>−HTML5タグリファレンス
<blockquote>タグは、他の情報源からの引用・転載セクションであることを表す際に使用します。cite属性には、引用元のアドレスが存在する場合にそのURLを指定します。blockquote要素は...

引用部分の先頭に「> 」を付ける。これで引用になります。blockquoteとして解釈されます。blockquoteなので、引用部分に対してもHTMLやMarkdownが有効になります。

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

あかあかと

日はつれなくも

秋の風

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

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

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

引用元を明示する

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 なら大丈夫。下記サイトを参照してください。

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

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

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

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

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

まとめ

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