前回発表したアイコンの埋め込み特殊タグですが、こういうタグをnehan.jsでどうやって定義するのかを紹介したいと思います。
おさらいですが、先月に発表したfa
タグはこんな風に宣言します。
ハートのアイコンは、<fa name="heart">
img
タグとかhr
タグみたいに、閉じタグがありませんよね。
実はこういう閉じタグが不要なタグを定義する場合、事前にnehan.jsのパーサーに対し、その旨を教える必要があるのです。
じゃないと、通常のタグと同様に「閉じタグがあるもの」としてパースしてしまい、結果としてfa
タグに続く全てのコンテンツがfa
タグの「中身」として登録されてしまいます。
なので、こんな風に指定して、事前にfa
タグが閉じタグのないタグであることをnehan.jsに教えます。
Nehan.addSingleTagByName("fa");
後は、通常のスタイル設定と一緒で、このタグの振る舞いを定義します。
Nehan.setStyle("fa", { display:"inline", width:"1em", height:"1em", onload:function(ctx){ var markup = ctx.getMarkup(); var icon_name = markup.getAttr("name"); markup.setContent("<i class='fa fa-" + icon_name + "'></i>"); markup.setAttr("pasted", true); } });
やっていることは、
- onloadでマークアップの読み込みをフック
- markupの中身を通常のfont-awesomeの書式(
i
タグを使った書式)に書き換える - markupの中身をnehan.jsに組版させず、そのまま貼付けさせるために、pasted属性をセットする
というものです(縦書き文庫では、実はもう少し色々とやっていますが、ここでは簡単の為に最低限の処理だけ書きました)。
最後のpasted属性に付いては補足が必要です。
実はこの属性、まだ公式のドキュメントに書いていないのです。
なぜかというと、運用の仕方とか命名について「いいのかな」ってモヤモヤしているからです。
もしかしたら、そのうち仕様とか命名とか変わるかもしれません。ご注意ください。