SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

League\CommonMarkでtableをスタイルシートで装飾したい

問題

League\CommonMark でMarkdownをHTMLに変換しています。

表を表示するときにTABLEタグがただの <table> になるのですが、

<table class="table"> などのようにclassを付与したりできないですか?

答え

Markdownで表に対応するときは、Table用のExtensionを使うか、Github形式のMarkdownにする。

ノーマルのGFM対応なら、以下のように書けて簡単。

use League\CommonMark\GithubFlavoredMarkdownConverter;

$converter = new GithubFlavoredMarkdownConverter();

echo $converter->convert('# Hello World!');

ただこれでは表はただの <table> で出力されるので、何かひとひねり必要。

classを付与する方式

DefaultAttributesExtension を使うと、class属性含めていろいろと要素自体に付与できる。

Bootstrapなどは table 要素に class を付与するタイプなので、これで対応するとよい。

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\GithubFlavoredMarkdownExtension;
use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension;
use League\CommonMark\MarkdownConverter;

$config = [
'default_attributes' => [
Table::class => [ 'class' => 'table table-bordered' ],
],
];
$environment = Environment::createCommonMarkEnvironment($config);
$environment->addExtension(new GithubFlavoredMarkdownExtension());
$environment->addExtension(new DefaultAttributesExtension());
$converter = new MarkdownConverter($environment);

echo $converter->convert('# Hello World!');

tableをdivで囲む方式

<table></table><div class="table-container"><table></table></div> のようになればよい場合は、DefaultAttributesExtension は不要。

configでできる。

use League\CommonMark\GithubFlavoredMarkdownConverter;

$config = [
'table' => [
'wrap' => [
'enabled' => true,
'tag' => 'div',
'attributes' => [ 'class' => 'table-container' ],
],
],
];
$converter = new GithubFlavoredMarkdownConverter($config);

echo $converter->convert('# Hello World!');

Event Dispatcher 方式

https://commonmark.thephpleague.com/2.4/customization/event-dispatcher

Markdownをパースした後のタイミングで処理を挟むなどが可能。

出来上がったDocumentをいじくりまわすことが可能。

関連するメモ

コメント