gulp-jade で直接書いた html をエスケープ出力するフィルタ

古いバージョンでは、 | (パイプ) や . (ドット)の記述で <, > がエスケープされていたようですが、新しいバージョン(1.x系?)では、html として出力されるようになりました。
pre.
  <html>
    <head>
      <title>Hello, world!</title>
    </head>
    <body>
      <h1 class="hello-world">Hello, world!</h1>
    </body>
  </html>
コレがそのままエスケープされないので、pre 以下は html タグとして出力されます。
pre 以下の場合に何かしている処理があるようなのですが、よくわからなかったので、ひとまず特殊文字をエスケープして出力するフィルタを定義することで解決しました。
カスタムフィルタの定義は jade.filters にフィルタのプロパティを生やすことで、任意のフィルタを定義できます。
gulp-jade のモジュールとしてインストールされる jade を require します。
jade = require('gulp-jade/node_modules/jade');
jade.filters.{任意のフィルタ名変数} = function(block){ ... }
このように定義してみました。(coffeescript です)
require('gulp-jade/node_modules/jade').filters.code = (block)->
  return block
    .replace(/&/g,'&amp;')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;')
    .replace(/'/g,'&#039;')
使うときはこう。
pre
  :code
    <html>
      <head>
        <title>Hello, world!</title>
      </head>
      <body>
        <h1 class="hello-world">Hello, world!</h1>
      </body>
    </html>
場所は gulpfile のどこか好きな場所に定義してあげればよいです。
grunt-contrib-jade の人も、require(‘grunt-contrib-jade/node_modules/jade’) に jade がインストールされていますので、同様の方法で可能です。

参考リンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする