HexoのTableのAlignが効かない(テーマによる)

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

Hexoはhexo-renderer-marked -> marked を利用してMarkdownをHTMLに変換しています。

該当部分は次のように実装されています。align属性で実現しています。ここは正しく動いています。

marked.js
1
2
3
4
5
6
_proto.tablecell = function tablecell(content, flags) {
var type = flags.header ? 'th' : 'td';
var tag = flags.align ? '<' + type + ' align="' + flags.align + '">' : '<' + type + '>';
return tag + content + '</' + type + '>\n';
} // span level renderer
;

Hexoのテーマはingenuousを利用しています。このテーマはCSSの定義にStylusを利用しており、global-reset()caption th tdtext-align: leftを定義しています。

https://github.com/stylus/nib/blob/master/lib/nib/reset.styl#L62-L65

1
2
3
4
5
6
7
8
9
nested-reset()
....
caption, th, td
reset-table-cell()

reset-table-cell()
text-align: left
font-weight: normal
vertical-align: middle

全てのセルにtext-align: leftが指定されてしまうので、align="right"といったタグの属性は無視されてしまいます。

対策

  1. global-reset()を使わない
  2. tdとtrにclass="any-prefix-{right|left|center}"を追加するかstyle="text-align:{right|left|center}"を追加する

後者をやってみました。

https://github.com/tamtam180/hexo-renderer-marked/commit/4ef7c8d44609bb7a99430474450613b5f58672fd

hexo-renderer-markedはHexoからmarkedを利用するためのモジュールで、Hexo用にオプションを指定して拡張しています。ここでtablecellを上書きする事でtableのセルのレンダリングを差し替える事ができます。

lib/renderer.js
1
2
3
4
5
6
7
tablecell (content, flags) {
const { options } = this;
const type = flags.header ? 'th' : 'td';
const align_class = options.align_class_prefix ? ` class="${options.align_class_prefix}${flags.align}"` : "";
const tag = flags.align ? `<${type} align="${flags.align}"${align_class}>` : `<${type}>`;
return `${tag}${content}</${type}>\n`;
};

https://github.com/tamtam180/hexo-renderer-marked/tree/feature/use-class-table-align
ここに対応したレポジトリを置いておきます。

Hexoから上記のモジュールを利用する

package.json
1
"hexo-renderer-marked": "git+https://github.com/tamtam180/hexo-renderer-marked.git#feature/use-class-table-align"

上記のようにバージョンではなくGithubのレポジトリをブランチ名付きで参照し、次のコマンドで依存モジュールを更新します。

1
npm update hexo-renderer-marked

Hexoの設定

オプションでprefixを指定します。これでtext-rightのようなclassが指定される事になります。

_config.yml
1
2
marked:
align_class_prefix: text-

テーマのCSSに対応するスタイルを追加します。

style.styl
1
2
3
4
5
6
.text-left
text-align: left
.text-right
text-align: right
.text-center
text-align: center

これでalignが正しくレンダリングされるようになりました。