hexo-tag-text-emphasis

Hexoに傍点（圏点）を打つタグを追加するプラグインです。 CSS3のtext-emphasisプロパティを利用しています。

Can I use - text-emphasis

インストール

Hexoのブログのプロジェクトルートで以下のコマンドを実行してください。

$ npm install hexo-tag-text-emphasis --save

書式

{% text_emphasis [style] %}テキスト{% endtext_emphasis %}

styleは省略可能です。 text-emphasis-style CSSプロパティに渡すキーワード値、 もしくは一文字の文字列を指定してください。

キーワード値ではなく、かつ一文字ではない文字列を与えた場合無視されます。 また、白塗りと黒塗りを同時に指定したり、 複数の形状を同時に指定した場合、先に指定されたものが使用されます。

config

デフォルトでは以下の値に設定されています。

text_emphasis
  inline_style: true

inline_style

傍点をインラインスタイルであてます。 自前でCSSを別途用意する場合はfalseにしてください。

例

{% text_emphasis %}テキスト{% endtext_emphasis %}
{% text_emphasis filled dot %}テキスト{% endtext_emphasis %}
{% text_emphasis open triangle %}テキスト{% endtext_emphasis %}
{% text_emphasis * %}テキスト{% endtext_emphasis %}
{% text_emphasis 🙂 %}テキスト{% endtext_emphasis %}

以下の通りに出力されます。

<em class="text-emphasis sesame" style="font-style: inherit; text-emphasis-style: sesame; -webkit-text-emphasis-style: sesame;">テキスト</em>
<em class="text-emphasis filled dot" style="font-style: inherit; text-emphasis-style: filled dot; -webkit-text-emphasis-style: filled dot;">テキスト</em>
<em class="text-emphasis open triangle" style="font-style: inherit; text-emphasis-style: open triangle; -webkit-text-emphasis-style: open triangle;">テキスト</em>
<em class="text-emphasis '*'" style="font-style: inherit; text-emphasis-style: '*'; -webkit-text-emphasis-style: '*';">テキスト</em>
<em class="text-emphasis '🙂'" style="font-style: inherit; text-emphasis-style: '🙂'; -webkit-text-emphasis-style: '🙂';">テキスト</em>

各<em>タグには「text-emphasis」クラスと 傍点の種類に応じたクラスが付与されます。 傍点の種類に応じて付与されるクラスは、 傍点のtext-emphasis-styleと同じ値になります。

inline_styleがfalseの場合、インラインスタイルが指定されなくなります。 各自でスタイルをあててください。

License

Licensed under the MIT.