github.io

htmlを生成するテンプレートエンジンJade Jade - Template Engine と,cssを生成するStylus Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor の使い方について少し勉強したので,かねてより手を付けたいと思っていたgithub.ioにとりあえずindexページを置いた.置いてみて思ったけれど,こことの使い分けのビジョンがイマイチ沸かないし不要そうだ.

http://fimbul.github.io/

Jadeはpythonライクなindentでタグのスコープが決まり,閉じタグを書く必要が無いとか,- var title = "page title"などと変数に値を入れておいて,#{title}で後から参照出来るとか便利なところは結構ある. templateなのでもっと色々使いまわしたり,includeでそのままファイルを埋め込むとか出来るようだけれど読んだだけでそこまで試してない.

Stylusは,sassやlessに似たものだけれど新しいもの好きなので試してみた.変数や条件分岐,ループなど一通り揃っている.

簡単にnpmで全部入るしgulp, gulp-stylus, gulp-jadeも入れて全部gulpを叩けばページが生成されるようにしてみたらよさ気だった.

fimbul.github.io/index.jade at master · fimbul/fimbul.github.io · GitHub

しかし,jadeにコードを埋め込もうと思うと普通にpreタグの中に#include と書くと#がJadeのdirectiveに認識されたりするし, かといって | を使うと</iostream>のような望まぬ閉じタグが生成されたりして結構困った.=を使うとエスケープしてくれるんだけど,今度は= "#include "とダブルクォートで囲ってやる必要があり コードが複数行になるとヒアドキュメントが無いためにいちいち各行を囲い,更に末尾に\nを追加し,途中にダブルクォートがあればバックスラッシュでエスケープしてやらないと上手くいかない.

とりあえずはコードをそのように変換してくれるスクリプトで対処すれば良いけれど,どうすれば幸せになれるんだろう.理解が足りない.