add commonmark code extension to highlight code blocks with highlight.js

Author: kbond

ux.symfony.com/config/services.yaml

@@ -24,5 +24,8 @@ services:
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
 
+    App\Service\CommonMark\CodeExtension:
+        tags: ['twig.markdown.league_extension']
+
     League\CommonMark\Extension\ExternalLink\ExternalLinkExtension:
         tags: ['twig.markdown.league_extension']

ux.symfony.com/src/Service/CommonMark/CodeExtension.php

@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Service\CommonMark;
+
+use League\CommonMark\Environment\EnvironmentBuilderInterface;
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+use League\CommonMark\Extension\ExtensionInterface;
+
+/**
+ * @author Kevin Bond <[email protected]>
+ */
+final class CodeExtension implements ExtensionInterface
+{
+    public function register(EnvironmentBuilderInterface $environment): void
+    {
+        $environment->addRenderer(FencedCode::class, new CodeRenderer(), 10);
+    }
+}

ux.symfony.com/src/Service/CommonMark/CodeRenderer.php

@@ -0,0 +1,51 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Service\CommonMark;
+
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+use League\CommonMark\Node\Node;
+use League\CommonMark\Renderer\ChildNodeRendererInterface;
+use League\CommonMark\Renderer\NodeRendererInterface;
+use League\CommonMark\Util\HtmlElement;
+use League\CommonMark\Util\Xml;
+
+/**
+ * @author Kevin Bond <[email protected]>
+ */
+final class CodeRenderer implements NodeRendererInterface
+{
+    /**
+     * @param FencedCode $node
+     */
+    public function render(Node $node, ChildNodeRendererInterface $childRenderer): string|\Stringable|null
+    {
+        $codeAttr = ['data-code-highlighter-target' => 'codeBlock'];
+
+        if ($lang = $node->getInfo()) {
+            $codeAttr['class'] = 'language-'.$lang;
+        }
+
+        return new HtmlElement(
+            'div',
+            ['class' => 'Terminal_body mb-3'],
+            new HtmlElement(
+                'div',
+                ['class' => 'Terminal_content'],
+                new HtmlElement(
+                    'pre',
+                    ['data-controller' => 'code-highlighter'],
+                    new HtmlElement('code', $codeAttr, Xml::escape($node->getLiteral()))
+                )
+            )
+        );
+    }
+}