[Site] Refactor and use the CodeBlockRenderer::highlightCode() method to render the highlighted code inside a Terminal component

Kocal · Kocal · commit 948abe54753e · 2025-05-08T00:21:39.000+09:00
diff --git a/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php b/ux.symfony.com/src/Service/CommonMark/ConverterFactory.php
@@ -19,8 +19,6 @@
 use League\CommonMark\Extension\FrontMatter\FrontMatterExtension;
 use League\CommonMark\Extension\Mention\MentionExtension;
 use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
-use Symfony\Component\HttpFoundation\UriSigner;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
diff --git a/ux.symfony.com/src/Service/CommonMark/Extension/CodeBlockRenderer/CodeBlockRenderer.php b/ux.symfony.com/src/Service/CommonMark/Extension/CodeBlockRenderer/CodeBlockRenderer.php
@@ -23,7 +23,7 @@
 final readonly class CodeBlockRenderer implements NodeRendererInterface
 {
     public function __construct(
-         private ToolkitService $toolkitService,
+        private ToolkitService $toolkitService,
     ) {
     }
 
@@ -40,7 +40,7 @@ public function render(Node $node, ChildNodeRendererInterface $childRenderer): \
         $kitId = ToolkitKitId::tryFrom($options['kit'] ?? null);
         $preview = $options['preview'] ?? false;
 
-        $output = $this->highlightCode($code = $node->getLiteral(), $language);
+        $output = $this->highlightCode($language, $code = $node->getLiteral());
 
         if ($kitId && $preview) {
             $output = $this->toolkitService->renderComponentPreviewCodeTabs($kitId, $code, $output, $options['height'] ?? '150px');
@@ -49,7 +49,7 @@ public function render(Node $node, ChildNodeRendererInterface $childRenderer): \
         return $output;
     }
 
-    private function highlightCode(string $code, string $language): string
+    public static function highlightCode(string $language, string $code, string $style = 'margin-bottom: 1rem'): string
     {
         $highlighter = new Highlighter();
 
@@ -60,7 +60,7 @@ private function highlightCode(string $code, string $language): string
             : '<pre data-lang="'.$language.'" class="notranslate">'.$parsed.'</pre>';
 
         return <<<HTML
-            <div class="Terminal terminal-code" style="margin-bottom: 1rem;">
+            <div class="Terminal terminal-code" style="$style">
                 <div class="Terminal_body">
                     <div class="Terminal_content" style="max-height: 450px;">{$output}</div>
                 </div>
diff --git a/ux.symfony.com/src/Service/Toolkit/ToolkitService.php b/ux.symfony.com/src/Service/Toolkit/ToolkitService.php
@@ -12,7 +12,7 @@
 namespace App\Service\Toolkit;
 
 use App\Enum\ToolkitKitId;
-use App\Util\SourceCleaner;
+use App\Service\CommonMark\Extension\CodeBlockRenderer\CodeBlockRenderer;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Filesystem\Path;
 use Symfony\Component\HttpFoundation\UriSigner;
@@ -21,15 +21,14 @@
 use Symfony\UX\Toolkit\Installer\PoolResolver;
 use Symfony\UX\Toolkit\Kit\Kit;
 use Symfony\UX\Toolkit\Registry\RegistryFactory;
-use function Symfony\Component\String\s;
 
 class ToolkitService
 {
     public function __construct(
         #[Autowire(service: 'ux_toolkit.registry.registry_factory')]
         private readonly RegistryFactory $registryFactory,
         private readonly UriSigner $uriSigner,
-        private readonly UrlGeneratorInterface $urlGenerator
+        private readonly UrlGeneratorInterface $urlGenerator,
     ) {
     }
 
@@ -76,41 +75,41 @@ public function renderComponentPreviewCodeTabs(ToolkitKitId $kitId, string $code
                 </div>
                 <iframe class="Toolkit_Preview loading" src="{$previewUrl}" style="height: {$height};" loading="lazy" onload="this.previousElementSibling.style.display = 'none'; this.classList.remove('loading')"></iframe>
             HTML,
-            'Code' => $highlightedCode
+            'Code' => $highlightedCode,
         ]);
     }
 
     public function renderInstallationSteps(ToolkitKitId $kitId, Component $component): string
     {
         $kit = $this->getKit($kitId);
-        $pool = (new PoolResolver)->resolveForComponent($kit, $component);
+        $pool = (new PoolResolver())->resolveForComponent($kit, $component);
 
         $manual = '<p>The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:</p>';
         $manual .= '<ol style="display: grid; gap: 1rem;">';
-        $manual .= '<li><strong>Copy the files into your Symfony app:</strong>';
+        $manual .= '<li><strong>Copy the following file(s) into your Symfony app:</strong>';
         foreach ($pool->getFiles() as $file) {
-            $manual .= sprintf(
+            $manual .= \sprintf(
                 "<details><summary><code>%s</code></summary>\n%s\n</details>",
                 $file->relativePathNameToKit,
-                sprintf("\n```%s\n%s\n```", pathinfo($file->relativePathNameToKit, PATHINFO_EXTENSION), trim(file_get_contents(Path::join($kit->path, $file->relativePathNameToKit))))
+                \sprintf("\n```%s\n%s\n```", pathinfo($file->relativePathNameToKit, \PATHINFO_EXTENSION), trim(file_get_contents(Path::join($kit->path, $file->relativePathNameToKit))))
             );
         }
         $manual .= '</li>';
 
         if ($phpPackageDependencies = $pool->getPhpPackageDependencies()) {
             $manual .= '<li><strong>If necessary, install the following Composer dependencies:</strong>';
-            $manual .= self::generateTerminal('shell', SourceCleaner::processTerminalLines('composer require ' . implode(' ', $phpPackageDependencies)));
+            $manual .= CodeBlockRenderer::highlightCode('shell', '$ composer require '.implode(' ', $phpPackageDependencies), 'margin-bottom: 0');
             $manual .= '</li>';
         }
 
         $manual .= '<li><strong>And the most important, enjoy!</strong></li>';
         $manual .= '</ol>';
 
         return $this->generateTabs([
-            'Automatic' => sprintf(
+            'Automatic' => \sprintf(
                 '<p>Ensure the Symfony UX Toolkit is installed in your Symfony app:</p>%s<p>Then, run the following command to install the component and its dependencies:</p>%s',
-                self::generateTerminal('shell', SourceCleaner::processTerminalLines('composer require --dev symfony/ux-toolkit'), 'margin-bottom: 1rem'),
-                self::generateTerminal('shell', SourceCleaner::processTerminalLines("bin/console ux:toolkit:install-component {$component->name} --kit {$kitId->value}"), 'margin-bottom: 1rem'),
+                CodeBlockRenderer::highlightCode('shell', '$ composer require --dev symfony/ux-toolkit'),
+                CodeBlockRenderer::highlightCode('shell', "$ bin/console ux:toolkit:install-component {$component->name} --kit {$kitId->value}"),
             ),
             'Manual' => $manual,
         ]);
@@ -130,8 +129,8 @@ private static function generateTabs(array $tabs): string
             $activeTabId ??= $tabId;
             $isActive = $activeTabId === $tabId;
 
-            $tabsControls .= sprintf('<button class="Toolkit_TabControl" data-action="tabs#show" data-tabs-target="control" data-tabs-tab-param="%s" role="tab" aria-selected="%s">%s</button>', $tabId, $isActive ? 'true' : 'false', trim($tabText));
-            $tabsPanels .= sprintf('<div class="Toolkit_TabPanel %s" data-tabs-target="tab" data-tab="%s" role="tabpanel">%s</div>', $isActive ? 'active' : '', $tabId, $tabContent);
+            $tabsControls .= \sprintf('<button class="Toolkit_TabControl" data-action="tabs#show" data-tabs-target="control" data-tabs-tab-param="%s" role="tab" aria-selected="%s">%s</button>', $tabId, $isActive ? 'true' : 'false', trim($tabText));
+            $tabsPanels .= \sprintf('<div class="Toolkit_TabPanel %s" data-tabs-target="tab" data-tab="%s" role="tabpanel">%s</div>', $isActive ? 'active' : '', $tabId, $tabContent);
         }
 
         return <<<HTML
@@ -141,17 +140,4 @@ private static function generateTabs(array $tabs): string
 </div>
 HTML;
     }
-
-    private static function generateTerminal(string $language, string $content, string $style = ''): string
-    {
-        return <<<HTML
-            <div class="Terminal terminal-code" style="$style">
-                <div class="Terminal_body">
-                    <div class="Terminal_content">
-                        <pre><code class="language-{$language}">{$content}</code></pre>
-                    </div>
-                </div>
-            </div>
-            HTML;
-    }
 }
diff --git a/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php b/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php
@@ -13,13 +13,9 @@
 
 use App\Enum\ToolkitKitId;
 use App\Service\Toolkit\ToolkitService;
-use App\Util\SourceCleaner;
-use Symfony\Component\HttpFoundation\UriSigner;
-use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 use Symfony\Component\String\AbstractString;
 use Symfony\UX\Toolkit\Asset\Component;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
-use Tempest\Highlight\Highlighter;
 
 use function Symfony\Component\String\s;
 
@@ -29,7 +25,8 @@ class ComponentDoc
     public ToolkitKitId $kitId;
     public Component $component;
 
-    public function __construct(private readonly ToolkitService $toolkitService) {
+    public function __construct(private readonly ToolkitService $toolkitService)
+    {
     }
 
     public function getContent(): string
