[Site] switch from highlight.js to tempest/highlight

Author: kbond

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

@@ -1,57 +1,74 @@
-.hljs-comment, .hljs-prompt {
-    color: #8b949e;
-    user-select: none;
-    -webkit-user-select: none
+/** tempest/highlight theme (https://github.com/tempestphp/highlight/blob/main/src/Themes/Css/dracula.css) */
+.hl-keyword {
+    color: #FF79C6;
 }
 
-.codeblock-terminal .hljs-keyword {
-    color: #6a737d;
+.hl-property {
+    color: #50FA7B;
 }
 
-.codeblock-terminal .hljs-prompt {
-    color: #8b949e;
-    user-select: none;
-    -webkit-user-select: none
+.hl-attribute {
+    font-style: italic;
 }
 
-.codeblock-terminal .hljs-string {
-    color: #a5d6ff
+.hl-type {
+    color: #8BE9FD;
 }
 
-.hljs-keyword {
-    color: #ff7b72
+.hl-generic {
+    color: #9d3af6;
 }
 
-.hljs-title {
-    color: #ffa657
+.hl-value {
+    color: #F1FA8C;
 }
 
-.hljs-variable-other-marker {
-    color: #79c0ff
+.hl-variable {
+    color: #F8F8F2;
 }
 
-.hljs-function .hljs-title {
-    color: #d2a8ff
+.hl-comment {
+    color: #6272A4;
 }
 
-.hljs-string {
-    color: #a5d6ff
+.hl-blur {
+    filter: blur(2px);
 }
 
-.hljs-attr, .hljs-tag .hljs-name {
-    color: #7ee787
+.hl-strong {
+    font-weight: bold;
 }
 
-.hljs-tag .hljs-attr {
-    color: #d2a8ff
+.hl-em {
+    font-style: italic;
+}
+
+.hl-addition {
+    display: inline-block;
+    min-width: 100%;
+    background-color: #00FF0022;
+}
+
+.hl-deletion {
+    display: inline-block;
+    min-width: 100%;
+    background-color: #FF000011;
+}
+
+.hl-gutter {
+    display: inline-block;
+    font-size: 0.9em;
+    color: #555;
+    padding: 0 1ch;
+    user-select: none;
 }
 
-.hljs-addition {
-    background: rgba(46, 160, 67, .3);
-    outline: 3px solid rgba(46, 160, 67, .3)
+.hl-gutter-addition {
+    background-color: #34A853;
+    color: #fff;
 }
 
-.hljs-deletion {
-    background: rgba(218, 54, 51, .3);
-    outline: 3px solid rgba(218, 54, 51, .3)
+.hl-gutter-deletion {
+    background-color: #EA4334;
+    color: #fff;
 }

ux.symfony.com/assets/styles/vendor/_highlight.scss

@@ -54,6 +54,7 @@
         "symfony/yaml": "7.0.*",
         "symfonycasts/dynamic-forms": "^0.1.0",
         "symfonycasts/sass-bundle": "^0.6.0",
+        "tempest/highlight": "^2.3",
         "twbs/bootstrap": "^5.3",
         "twig/extra-bundle": "^3.8",
         "twig/html-extra": "^3.8",

ux.symfony.com/composer.json

@@ -23,3 +23,5 @@ services:
 
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
+    Tempest\Highlight\Highlighter:
+        tags: ['twig.runtime']

ux.symfony.com/composer.lock

@@ -126,21 +126,6 @@
     'svelte/internal' => [
         'version' => '3.59.2',
     ],
-    'highlight.js/lib/core' => [
-        'version' => '11.9.0',
-    ],
-    'highlight.js/lib/languages/javascript' => [
-        'version' => '11.9.0',
-    ],
-    'highlight.js/lib/languages/php' => [
-        'version' => '11.9.0',
-    ],
-    'highlight.js/lib/languages/twig' => [
-        'version' => '11.9.0',
-    ],
-    'highlight.js/lib/languages/xml' => [
-        'version' => '11.9.0',
-    ],
     'intl-messageformat' => [
         'version' => '10.5.11',
     ],
@@ -205,10 +190,4 @@
     '@kurkle/color' => [
         'version' => '0.3.2',
     ],
-    'highlight.js/lib/languages/yaml' => [
-        'version' => '11.9.0',
-    ],
-    'highlight.js/lib/languages/diff' => [
-        'version' => '11.9.0',
-    ],
 ];

ux.symfony.com/config/services.yaml

@@ -12,10 +12,10 @@
 namespace App\Service\CommonMark;
 
 use League\CommonMark\CommonMarkConverter;
-use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
 use League\CommonMark\Extension\ExternalLink\ExternalLinkExtension;
 use League\CommonMark\Extension\Mention\MentionExtension;
 use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+use Tempest\Highlight\CommonMark\HighlightExtension;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
@@ -44,9 +44,9 @@ public function __invoke(): CommonMarkConverter
         ]);
 
         $converter->getEnvironment()
-            ->addRenderer(FencedCode::class, new CodeRenderer(), 10)
             ->addExtension(new ExternalLinkExtension())
             ->addExtension(new MentionExtension())
+            ->addExtension(new HighlightExtension())
         ;
 
         return $converter;

ux.symfony.com/importmap.php

@@ -0,0 +1,29 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Twig;
+
+use Tempest\Highlight\Highlighter;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ */
+final class HighlightExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('highlight', [Highlighter::class, 'parse'], ['is_safe' => ['html']]),
+        ];
+    }
+}

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

@@ -19,12 +19,11 @@
         {% endif %}
         <div class="Terminal_content" style="height: {{ height }};"
              data-code-expander-target="codeContent"
-             data-controller="code-highlighter"
         >
             {% for piece in this.prepareSource %}
                 {% if piece.highlight ?? true %}
-                    <pre><code class="language-{{ this.language }}" data-code-highlighter-target="codeBlock">
-                        {{- piece.content -}}
+                    <pre><code class="language-{{ this.language }}">
+                        {{- piece.content|highlight(this.language) -}}
                     </code></pre>
                 {% else %}
                     {{- piece.content|raw -}}

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

@@ -1,8 +1,8 @@
-{% props highlight = false, code = '', height = null %}
+{% props code = '', height = null %}
 
 <div
     class="IconModal__code"
-    data-controller="clipboarder {% if highlight %} code-highlighter{% endif %}"
+    data-controller="clipboarder"
 >
     {% set __code -%}
         {% block content -%}
@@ -13,7 +13,7 @@
     <pre
         {% if height %} style="--height: {{ height }}" {% endif %}
         data-clipboarder-target="source"
-    ><code {% if highlight %} data-code-highlighter-target="codeBlock" {% endif %}>{{ __code ? __code|trim|raw : code }}</code></pre>
+    ><code>{{ __code ? __code|trim|raw : code }}</code></pre>
 
     <button class="btn btn-sm IconModal__copy" data-action="clipboarder#copy" data-clipboarder-target="button">
         <twig:Icon name="copy" />