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

Tweet

Category php 2024/05/14

問題

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をいじくりまわすことが可能。