From 04d1e42fa31aab9caf3155437c9ef312ebb51258 Mon Sep 17 00:00:00 2001
From: Younes ENNAJI <younes.ennaji.pro@gmail.com>
Date: Sun, 1 Mar 2026 23:27:02 +0000
Subject: [PATCH] Refine code block rendering and features

---
 .../resources/views/layouts/app.blade.php     | 19 ++++++++++++++++++-
 demo/symfony/templates/base.html.twig         | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/demo/laravel/resources/views/layouts/app.blade.php b/demo/laravel/resources/views/layouts/app.blade.php
index a7e00342..e5af5d7b 100644
--- a/demo/laravel/resources/views/layouts/app.blade.php
+++ b/demo/laravel/resources/views/layouts/app.blade.php
@@ -13,6 +13,22 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css">
 
+    {{-- Prism.js code block fixes --}}
+    <style>
+        .code-block pre {
+            margin: 0 !important;
+            border-radius: 0 !important;
+            background: #2d2d2d !important;
+            padding: 1rem !important;
+            overflow-x: auto;
+        }
+        .code-block code[class*="language-"] {
+            font-size: 0.875rem;
+            line-height: 1.6;
+            background: transparent !important;
+        }
+    </style>
+
     {{-- Custom Tailwind components --}}
     <style type="text/tailwindcss">
         @layer components {
@@ -53,7 +69,7 @@
                 @apply rounded-lg overflow-hidden shadow-lg my-4;
             }
             .code-header {
-                @apply bg-gray-800 text-gray-300 px-4 py-2 flex justify-between items-center text-sm;
+                @apply bg-gray-800 text-gray-300 px-4 py-2 flex justify-between items-center text-sm font-mono;
             }
             .section-title {
                 @apply text-2xl font-bold text-gray-800 mb-2;
@@ -181,6 +197,7 @@
 
     {{-- Scripts --}}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
diff --git a/demo/symfony/templates/base.html.twig b/demo/symfony/templates/base.html.twig
index 572c8a0b..8d98523e 100644
--- a/demo/symfony/templates/base.html.twig
+++ b/demo/symfony/templates/base.html.twig
@@ -12,6 +12,22 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css">
 
+    {# Prism.js code block fixes #}
+    <style>
+        .code-block pre {
+            margin: 0 !important;
+            border-radius: 0 !important;
+            background: #2d2d2d !important;
+            padding: 1rem !important;
+            overflow-x: auto;
+        }
+        .code-block code[class*="language-"] {
+            font-size: 0.875rem;
+            line-height: 1.6;
+            background: transparent !important;
+        }
+    </style>
+
     {# Custom Tailwind components #}
     <style type="text/tailwindcss">
         @layer components {
@@ -52,7 +68,7 @@
                 @apply rounded-lg overflow-hidden shadow-lg my-4;
             }
             .code-header {
-                @apply bg-gray-800 text-gray-300 px-4 py-2 flex justify-between items-center text-sm;
+                @apply bg-gray-800 text-gray-300 px-4 py-2 flex justify-between items-center text-sm font-mono;
             }
             .section-title {
                 @apply text-2xl font-bold text-gray-800 mb-2;
@@ -178,6 +194,7 @@
 
     {# Scripts #}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>