ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

WordPressのJP Markdownでソースコードを書くとき、&が&になってしまうときの対処法。

WordPressにJP Markdownというプラグインを入れると、Markdown記法で記事を書けるようになるため、作業がはかどります。

また、Markdownで<pre><code>を実現するときは、該当部分をタブでインデントを取ることでできます。

しかし、直前の記事のように&が入るコードを書いたあと、実際に記事を表示させてみると、&が&amp;で表示されてしまいました。

広告

該当のソースコード

まず、記事の上で表示したかったコードは、下記のとおりです。

.stop
	width: 100px
	height: 100px
	border-radius: 50%
	box-sizing: border-box
	border: 10px solid #f00
	position: relative
	&:before
		content: ""
		position: absolute
		top: calc(50% - 5px)
		left: 0
		border-bottom: 10px solid #f00
		width: 100%
		transform: rotate(45deg)

真ん中あたりで、アンドマークが入力されています。

しかし、実際に記事を表示させてみると、下記のとおりコードが置き換わってしまいました。

.stop
	width: 100px
	height: 100px
	border-radius: 50%
	box-sizing: border-box
	border: 10px solid #f00
	position: relative
	&amp;:before
		content: ""
		position: absolute
		top: calc(50% - 5px)
		left: 0
		border-bottom: 10px solid #f00
		width: 100%
		transform: rotate(45deg)

アンドマークが、&amp;に置き換わってしまいました。

これでは正しいソースコードが伝わりません。

対処法。

まず、いつもは下記のように、左にタブでインデントを取って、<pre><code>の範囲として認識させています。

	.stop
		width: 100px
		height: 100px
		border-radius: 50%
		box-sizing: border-box
		border: 10px solid #f00
		position: relative
		&:before
			content: ""
			position: absolute
			top: calc(50% - 5px)
			left: 0
			border-bottom: 10px solid #f00
			width: 100%
			transform: rotate(45deg)

そうではなくて、タブでインデントは取らず、該当範囲の上下を「~~~」で囲みましょう

~~~
.stop
	width: 100px
	height: 100px
	border-radius: 50%
	box-sizing: border-box
	border: 10px solid #f00
	position: relative
	&:before
		content: ""
		position: absolute
		top: calc(50% - 5px)
		left: 0
		border-bottom: 10px solid #f00
		width: 100%
		transform: rotate(45deg)
~~~

これで無事に、&amp;に変換されずに、アンドマークが表示できるでしょう。