乐胖代购免代理版

最近はgulpでjadeをコンパイルしています。

<ul>
  <li ng-class="{active: thing.score < 50}">
    <a href='[permlink slug="url"]'>LINK</a>
  <li>
<ul>

HTMLの属性などの中にWordPressのショートコードや、AngularJSのng-classとかを属性の中にコーテーションを使った値を入れたいケースなどがあります。

普通に書くとエスケープされる

属性の中の<や"がエスケープされてしまいます。

// jade
ul
  li(ng-class="{active: thing.score < 50}")
    a(href='[permlink slug="url"]') LINK

↓ コンパイル

<ul>
  <li ng-class="{active: thing.score &lt; 50}">
    <a href="[permlink slug=&quot;url&quot;]">LINK</a>
  </li>
</ul>

※ aタグは見やすいように改行しています。

jadeの中でエスケープしてみます。

// jade
ul
  li(ng-class="{active: thing.score \< 50}")
    a(href='[permlink slug=\"url\"]') LINK

↓ ダメです。。。

<ul>
  <li ng-class="{active: thing.score &lt; 50}">
    <a href="[permlink slug=&quot;url&quot;]">LINK</a>
  </li>
</ul>

!= を使う

// jade
ul
  li(ng-class!="{active: thing.score \< 50}")
    a(href!='[permalink slug="test"]') LINK

↓

<ul>
  <li ng-class="{active: thing.score < 50}">
    <a href="[permalink slug="test"]">LINK</a>
  </li>
</ul>

エスケープはされなくなりました。

しかし、href!='[permalink slug="test"]'はhref="[permalink slug="test"]"と属性全体の囲みがシングルコーテーションからダブルコーテーションに置き換えられてしまっていて、ダブルコーテーションで囲った属性の中にまたダブルコーテーションがあってキモチワルイです。

色々試してみる

- link = '[permalink slug="test"]'
p
  a(href= link) LINK
p
  a(href='#{link}') LINK

- href = 'href=\'[permalink slug="test"]\''
p
  a(href) LINK
p
  a(#{href}) LINK

// 全部シングルコーテーションにしてエスケープ
p
 a(href='[permalink slug=\'test\']') link

// ダブルコーテーションで囲って中にシングルコーテーション
p
  a(href="[permalink slug=\'test\']") link
p
  a(href!="[permalink slug='test']") link

↓ コンパイル

<p><a href="[permalink slug=&quot;test&quot;]">LINK</a></p>
<p><a href="[permalink slug=&quot;test&quot;]">LINK</a></p>
<p><a href>LINK</a></p>
<p><a #{href}>LINK</a></p>
<!-- 全部シングルコーテーションにしてエスケープ -->
<p><a href="[permalink slug='test']">link</a></p>
<!-- ダブルコーテーションで囲って中にシングルコーテーション -->
<p><a href="[permalink slug='test']">link</a></p>
<p><a href="[permalink slug='test']">link</a></p>

全部シングルコーテーションにしてエスケープしても属性の中の囲みはダブルコーテーションに変換されてしまうので、href="[permalink slug='test']"という属性はダブルコーテーションで囲って中にシングルコーテーションの形でしか上手く出力させることができませんでした。　

感想

個人的にエスケープを都度するのはメンドーなので、属性に入れたい文字列の中にエスケープされる文字が有る時は!=を使うのが簡単で良いかな。と思いました。

色々試してみたのですが、結局属性はダブルコーテーションで囲むようにしかコンパイルする事ができませんでした。jadeの仕様的に属性はダブルコーテーションと決まっているのかもしれませんね。。。
もし、属性をシングルコーテーションで囲む方法がわかる方がおられましたら教えてください！　

おまけ

jadeをコンパイルするGulpのタスクはこんな感じでした。

var gulp = require("gulp"),
     jade = jade = require("gulp-jade");

gulp.task('jade', function() {
  return gulp.src(['jade/*.jade'])
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('html/'));
});

gulp.task('default', function() {
  gulp.watch(['jade/*.jade', 'jade/**/*.jade'], ['jade']);
});