2020-04-16

Hexo

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

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

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

marked.js

_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 td のtext-align: leftを定義しています。

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

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"といったタグの属性は無視されてしまいます。

対策

global-reset()を使わない
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

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

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

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

npm update hexo-renderer-marked

Hexoの設定

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

_config.yml

marked:
  align_class_prefix: text-

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

style.styl

.text-left
  text-align: left
.text-right
  text-align: right
.text-center
  text-align: center

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