[Site] Remove highlight.php

ux.symfony.com/assets/controllers/code-highlighter-controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+import hljs from 'highlight.js/lib/core';
+import hljs_javascript from 'highlight.js/lib/languages/javascript';
+import hljs_php from 'highlight.js/lib/languages/php';
+import hljs_xml from 'highlight.js/lib/languages/xml';
+import hljs_twig from 'highlight.js/lib/languages/twig';
+
+hljs.registerLanguage('javascript', hljs_javascript);
+hljs.registerLanguage('php', hljs_php);
+hljs.registerLanguage('twig', hljs_twig);
+// xml is the language used for HTML
+hljs.registerLanguage('xml', hljs_xml);
+
+export default class extends Controller {
+    static targets = ['codeBlock'];
+
+    codeBlockTargetConnected() {
+        this.codeBlockTargets.forEach(this.#highlightCodeBlock)
+    }
+
+    #highlightCodeBlock(codeBlock) {
+        if (codeBlock.dataset.highlighted) {
+            return;
+        }
+        hljs.highlightElement(codeBlock);
+    }
+}

ux.symfony.com/assets/styles/components/_Terminal.scss

@@ -140,10 +140,16 @@
     overflow-inline: auto;
 }
 .Terminal_body pre {
-    padding: 1rem;
+    padding: 0;
     margin: 0;
 }
-
 .Terminal_content {
     font-size: .9rem;
+    overflow-x: auto;
+    overflow-y: auto;
+    padding: 1rem;
+
+    pre {
+        overflow: visible;
+    }
 }

ux.symfony.com/composer.json

@@ -16,7 +16,6 @@
         "kornrunner/blurhash": "^1.2.2",
         "league/commonmark": "^2.4",
         "pagerfanta/twig": "^3.8",
-        "scrivo/highlight.php": "^9.18.1.10",
         "symfony/asset": "6.4.*",
         "symfony/asset-mapper": "6.4.*",
         "symfony/console": "6.4.*",

ux.symfony.com/importmap.php

@@ -115,6 +115,15 @@
     'highlight.js/lib/languages/javascript' => [
         'version' => '11.7.0',
     ],
+    'highlight.js/lib/languages/php' => [
+        'version' => '11.7.0',
+    ],
+    'highlight.js/lib/languages/twig' => [
+        'version' => '11.7.0',
+    ],
+    'highlight.js/lib/languages/xml' => [
+        'version' => '11.7.0',
+    ],
     'intl-messageformat' => [
         'version' => '10.3.5',
     ],

ux.symfony.com/src/Twig/CodeBlock.php

@@ -13,7 +13,6 @@
 
 use App\Util\FilenameHelper;
 use App\Util\SourceCleaner;
-use Highlight\Highlighter;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
@@ -40,30 +39,28 @@ class CodeBlock
     public bool $stripExcessHtml = false;
 
     public function __construct(
-        private Highlighter $highlighter,
         #[Autowire('%kernel.project_dir%')] private string $rootDir,
     ) {
     }
 
-    public function highlightSource(): string
+    /**
+     * Returns a list of source code pieces, extracted from the filename
+     * argument, ready to be renderer in the template.
+     *
+     * Every piece is composed as an array {content, highlight} with
+     *      content: the raw source code (after cleaning)
+     *      highlight: whether they must be syntax-highlighted or not
+     *
+     * @return list<array{content: string, highlight: ?bool}>
+     */
+    public function prepareSource(): array
     {
         $content = $this->getRawSource();
         if ('php' === $this->getLanguage()) {
             $content = SourceCleaner::cleanupPhpFile($content);
         }
 
-        $pieces = $this->splitAndProcessSource($content);
-
-        $highlighted = [];
-        foreach ($pieces as $piece) {
-            if ($piece['highlight']) {
-                $highlighted[] = $this->highlighter->highlight($this->getLanguage(), $piece['content'])->value;
-            } else {
-                $highlighted[] = $piece['content'];
-            }
-        }
-
-        return implode('', $highlighted);
+        return $this->splitAndProcessSource($content);
     }
 
     public function getRawSource(): string
@@ -96,15 +93,17 @@ public function getGithubLink(): string
         return sprintf('https://github.com/symfony/ux/blob/2.x/ux.symfony.com/%s', $this->filename);
     }
 
-    private function getLanguage(): string
+    public function getLanguage(): string
     {
         if (null !== $this->language) {
             return $this->language;
         }
 
-        $parts = explode('.', $this->filename);
+        if ($ext = strrchr($this->filename, '.')) {
+            return $this->language = substr($ext, 1);
+        }
 
-        return array_pop($parts);
+        throw new \RuntimeException('Unable to detect the code language');
     }
 
     public function getElementId(): ?string
@@ -151,7 +150,8 @@ private function splitAndProcessSource(string $content): array
 
             // the use statements + surrounding span
             $parts[] = [
-                'content' => '<span class="hljs-comment" role="button" title="Expand use statements" data-action="click->code-expander#expandUseStatements">// ... use statements hidden - click to show </span>',
+                'content' => '<span class="hljs-comment" role="button" title="Expand use statements" data-action="click->code-expander#expandUseStatements">
+<pre><code class="nohighlight">// ... use statements hidden - click to show</code></pre></span>',
                 'highlight' => false,
             ];
             $parts[] = [

ux.symfony.com/src/Util/SourceCleaner.php

@@ -17,22 +17,25 @@ class SourceCleaner
 {
     public static function cleanupPhpFile(string $contents, bool $removeClass = false): string
     {
+        // Remove <?php
         $contents = u($contents)->replace("<?php\n", '');
 
         // Remove LICENCE header
         if ($contents->indexOf('* This file is part of the Symfony package')) {
-            $contents = $contents->after(' */');
+            $contents = $contents->before('/*')->trim()->append($contents->after(' */')->trim());
         }
 
+        // Remove namespace(s)
         $contents = $contents->replaceMatches('/namespace[^\n]*/', '');
 
+        // Remove class declaration
         if ($removeClass) {
             $contents = $contents->replaceMatches('/class[^\n]*\n{/', '')
                 ->trim('{}')
-                // remove use statements
+                // Remove use statements
                 ->replaceMatches('/^use [^\n]*$/m', '');
 
-            // unindent all lines by 4 spaces
+            // Unindent all lines by 4 spaces
             $lines = explode("\n", $contents);
             $lines = array_map(function (string $line) {
                 return substr($line, 4);

ux.symfony.com/symfony.lock

@@ -181,9 +181,6 @@
     "ralouphie/getallheaders": {
         "version": "3.0.3"
     },
-    "scrivo/highlight.php": {
-        "version": "v9.18.1.9"
-    },
     "sebastian/cli-parser": {
         "version": "1.0.1"
     },

ux.symfony.com/templates/components/CodeBlock.html.twig

@@ -1,23 +1,36 @@
 <div {{ attributes.defaults({
     class: 'Terminal ' ~ this.classString,
 }) }}>
+
     {% if showFilename %}
         <div class="Terminal_header py-2 ps-4 pe-2 mb-0 d-flex justify-content-between align-items-center">
             <a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title"><code>{{ filename }}</code></a>
             <div class="Terminal_actions">
-                <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}" />
+                <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
             </div>
         </div>
     {% endif %}
+
     <div class="Terminal_body" {{ stimulus_controller('code-expander') }}>
         {% if not showFilename %}
             <div class="Terminal_actions">
                 <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
             </div>
         {% endif %}
-        <pre style="height: {{ height }};" {{ stimulus_target('code-expander', 'codeContent') }}><code>
-            {{- this.highlightSource()|raw -}}
-        </code></pre>
+        <div class="Terminal_content" style="height: {{ height }};"
+            {{ stimulus_target('code-expander', 'codeContent') }}
+            {{ stimulus_controller('code-highlighter') }}
+        >
+            {% for piece in this.prepareSource %}
+                {% if piece.highlight ?? true %}
+                    <pre><code class="language-{{ this.language }}" {{ stimulus_target('code-highlighter', 'codeBlock') }}>
+                        {{- piece.content -}}
+                    </code></pre>
+                {% else %}
+                    {{- piece.content|raw -}}
+                {% endif %}
+            {% endfor %}
+        </div>
 
         {% block code_content_bottom %}
             <button