switched code highlighting from js to php implementation

.github/workflows/deploy-site.yml

@@ -43,4 +43,4 @@ jobs:
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_dir: ./output_prod
-        cname: thephp.foundation
+        cname: thephp.foundation

app/SculpinKernel.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Bundles\AtomFeedGeneratorBundle\SculpinAtomFeedGeneratorBundle;
+use App\Bundles\HighlightBundle\SculpinHighlightBundle;
 use App\Bundles\MermaidBundle\SculpinMermaidBundle;
 use App\Bundles\SharingImageGeneratorBundle\SculpinSharingImageGeneratorBundle;
 use Sculpin\Bundle\SculpinBundle\HttpKernel\AbstractKernel;
@@ -13,6 +14,7 @@ protected function getAdditionalSculpinBundles(): array
             SculpinAtomFeedGeneratorBundle::class,
             SculpinSharingImageGeneratorBundle::class,
             SculpinMermaidBundle::class,
+            SculpinHighlightBundle::class,
         ];
     }
 }

app/src/Bundles/HighlightBundle/DependencyInjection/SculpinHighlightExtension.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Bundles\HighlightBundle\DependencyInjection;
+
+use Symfony\Component\Config\FileLocator;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Loader\XmlFileLoader;
+use Symfony\Component\DependencyInjection\Extension\Extension;
+
+class SculpinHighlightExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container): void
+    {
+        $loader = new XmlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
+        $loader->load('services.xml');
+    }
+}

app/src/Bundles/HighlightBundle/Resources/config/services.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" ?>
+
+<container xmlns="http://symfony.com/schema/dic/services"
+           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+           xsi:schemaLocation="http://symfony.com/schema/dic/services
+               http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+    <services>
+        <service id="inline_theme" class="Tempest\Highlight\Themes\InlineTheme">
+            <argument>%kernel.project_dir%/vendor/tempest/highlight/src/Themes/Css/highlight-light-lite.css</argument>
+        </service>
+
+        <service id="highlighter" class="Tempest\Highlight\Highlighter">
+            <argument type="service" id="inline_theme"/>
+        </service>
+
+        <service id="sculpin_highlight_extension" class="App\Bundles\HighlightBundle\TwigHighlightExtension">
+            <argument type="service" id="highlighter"/>
+            <tag name="twig.extension"/>
+        </service>
+    </services>
+</container>

app/src/Bundles/HighlightBundle/SculpinHighlightBundle.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace App\Bundles\HighlightBundle;
+
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+class SculpinHighlightBundle extends Bundle
+{
+}

app/src/Bundles/HighlightBundle/TwigHighlightExtension.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Bundles\HighlightBundle;
+
+use Tempest\Highlight\Highlighter;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+class TwigHighlightExtension extends AbstractExtension
+{
+    # Regular expression pattern to extract content between <code> tags, with optional class attribute.
+    private const string CODE_CONTENT_PATTERN = '/<code(?: class="([^"]*)")?>(.*?)<\/code>/s';
+
+    public function __construct(
+        private readonly Highlighter $highlighter
+    ) {
+    }
+
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('highlight', [$this, 'highlight'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function highlight(?string $content, string $defaultLanguage = 'php'): string
+    {
+        if ($content === null) {
+            return '';
+        }
+
+        return preg_replace_callback(
+            self::CODE_CONTENT_PATTERN,
+            function ($matches) use ($defaultLanguage) {
+                [, $code_language, $code] = $matches;
+                $language = $code_language ?: $defaultLanguage;
+                $code = htmlspecialchars_decode($code);
+
+                return sprintf('<code>%s</code>', $this->highlighter->parse($code, $language));
+            },
+            $content
+        );
+    }
+}

assets/css/app.css

@@ -154,14 +154,28 @@ footer > ul, footer > p {
     padding: 0;
 }
 
+pre {
+    max-width: 100%;
+    overflow-x: auto;
+    width: 100%;
+    padding: 0.2em 0.4em;
+    border-radius: 0.375rem;
+    font-size: 85%;
+    background: rgba(135, 131, 120, 0.15);
+}
+
+pre code {
+    padding: 0;
+    background: transparent;
+}
+
 code {
     font-family: Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
     line-height: normal;
-    background: rgba(135, 131, 120, 0.15);
-    color: #EB5757;
     border-radius: 3px;
     font-size: 85%;
     padding: 0.2em 0.4em;
+    background: rgba(135, 131, 120, 0.15);
 }
 
 .alert {

composer.json

@@ -15,7 +15,8 @@
     "ext-gd": "*",
     "ext-dom": "*",
     "sculpin/sculpin": "3.3.0-alpha3",
-    "symfony/process": "^6.4|^7.0"
+    "symfony/process": "^6.4|^7.0",
+    "tempest/highlight": "^2.7"
   },
   "require-dev": {
     "roave/security-advisories": "dev-latest"