Minecraftとタートルと僕

PCゲームMinecraftのMOD「ComputerCraft」の情報を集めたニッチなブログです。

はてな式Markdown記法において、円記号がどのように表示されるか調べてみた

2015年1月18日追記

はてなブログのMarkdown記法において、Windowsのパスを円記号付きで表記するには、

<pre></pre>タグの中で実体参照&yen;を書く」という方針に、現在のところ落ち着きました。

下記の調査における、<pre></pre>タグの中でバックスラッシュをそのまま書く方式だと、特定の条件でおかしくなります。

  • ダメな例(リスト+PRE+フォルダ名の先頭がドット)

- <pre>C:\abc\.def\</pre>

  • C:\abc.def\

はじめに

Markdown記法ではてなブログの記事を書いているのですが、円記号問題+<pre><code>タグ変換法則というコンボに悩まされたので、個人的な覚え書きです。

円記号問題をできるだけ簡単に説明すると、Windows上で「¥」を入力しても、違う環境(たとえばWebページ上)では「\」と表示されてしまうという問題のことです。

Webページにおける一般的な解決方法は「<pre>タグで囲め!」ですむのですが、はてな式Markdownだと素直に行きません。

そのあたりを調べてみました。

調査環境は、記入/確認ともに、Windows7 上の Chrome です。

  • f:id:hevohevo:20140323200639p:plain

    • ぶっちゃけ、半角の円記号を表示しないといけないケースなんて、Windowsのパスを正確に表記するときくらいですよね:P

(結論)円記号問題とはてな式Markdown

最初に結論をまとめておきます。

このまとめに至るまでの調査結果は記事の後ろのほうにメモ代わりに残しておきますので、詳しく見たい方はどうぞ。

記法 詳細 半角記号\ 実体参照&yen; 備考
- 地の文にそのまま \ ¥ ワンフレーズ
はてなMarkdown 文字の前後を「```」ではさむ \ \ ワンフレーズ
はてなMarkdown 先頭行と最終行を「``` \ \ 複数行
はてなMarkdown 空行1行と先頭に4文字スペース \ \ 複数行
直接タグ <code>タグではさむ \ ¥ ワンフレーズ
直接タグ <pre>タグではさむ ¥ ¥ 複数行
直接タグ <pre><code>タグではさむ \ ¥ 複数行
  • 文字実体参照を使わないならば<pre>タグを直書きせよ。ただし、文中にワンフレーズとして円記号を埋め込む方法は無い。
  • 文字実体参照を使うならば<pre><code>タグを直書きすれば基本的にOK。

  • つまり円記号を表示したいときは、はてな式Markdown記法を使ってはいけない。

そもそもMarkdown記法自体に、<pre><code>タグのルールは存在しないのでしょうか? はてな独自の追加要素?

あるいはもしかしたら、CSSで工夫するとこのあたり解決するのでしょうか?

このあたり、識者のご意見をお聞きしたいところ。

以下、調査結果を表記

まずは基本事項の確認

その0

\

と書くと、以下のように表示される

\

その1

```
\
```

と書くと、タグ的には以下のように変換される。

<pre class="code" data-unlink>\</pre>

そして、以下のように表示される。

\

その2

1行の空行を入れてから、先頭に4文字の空白をあける

    \

このように書くと、タグ的には以下のように変換される。

<pre><code>\</code></pre>

そして、以下のように表示される。

\

その3

```\```

このように書くと、タグ的には以下のように変換される。

<p><code>\</code></p>

そして以下のように表示される。

\

その4(成功例!!!)

直接、<pre>タグを直書きする。

<pre>\</pre>

このように書くと、タグ的には以下のように変換される。

<pre>\</pre>

そして、以下のように表示される。

\

その5

直接、<code>タグを直書きする。

<code>\</code>

このように書くと、タグ的には以下のように変換される。

<code>\</code>

そして、以下のように表示される。

\

その6

直接、<pre><code>タグを直書きする。

<pre><code>\</code></pre>

以下のように表示される。

\

HTMLの文字実体参照(&キーワード;)を使ってみる。

その0(成功例!!!)

&yen;

と書くと、次のように表示される

¥

その1

```
&yen;
```

と書くと、次のように表示される

&yen;

その2

1行の空行+先頭に4文字スペース

    &yen;

と書くと、タグ的には以下のように変換される

<pre><code>&amp;yen;</code></pre>

そして次のように表示される

&yen;

その3

```&yen```

と書くと、次のように表示される

&yen;

その4(成功例!!!)

<pre>&yen;</pre>

と書くと、次のように表示される

¥

その5(成功例!!!)

<code>&yen;</code>

と書くと、次のように表示される

¥

その6(成功例!!!)

<pre><code>&yen;</code></pre>

と書くと、次のように表示される

¥