Help us understand the problem. What is going on with this article?

jade(pug)内で使うHTMLに変数を使えるようにする。

More than 3 years have passed since last update.

jade(pug)は整形フォーマットを細かく指定できないのでどうにかならないか考えてみました。

追記 2016/9/2
gulpに登録したら動かなかったのでgulp-jade対策したものを追加しました。
追記 2016/9/3
→ この後知ったことなのですが、jadeのfilter機能を使うのがよさそうです。

コマンドラインjade版

  • jade
.test
  -  var val1 = "hoge";
  -  var val2 = "fuga";
  -
    var b = `<ul>
        <li>${val1}</li><!--
        --><li>${val2}</li>
    </ul>`;
  !=b
  • html
<div class="test"><ul>
    <li>hoge</li><!--
    --><li>fuga</li>
</ul>
</div>

これでHTMLを直接テンプレートかきるejsの優位性がなくなりそう

配列などの変数を改行させる方法
http://chaika.hatenablog.com/entry/2015/10/29/080000

を参考しました。

gulp-jade対応版

.test
  - 
  -  var data = {url: 'http://github.com',title: 'GitHub',description: '便利'};
  -
    var template = (function() {/*
    <ul><!--
    --><li>${url}</li><!--
    --><li>${title}</li><!--
    --><li>${description}</li><!--
    --></ul>
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\n|\r/g, "");
  -
    var html = template.replace(/\${(\w+)}/g, function(m, key) {
      var text = data[key] || '';
      return text;
    }).replace(/-->/g, '\n-->');
  !=html
<div class="test"><ul><!--
--><li>http://github.com</li><!--
--><li>GitHub</li><!--
--><li>便利</li><!--
--></ul>
</div>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away