From c1dc4629c0d61e220b4cd950dbb65f7952020c4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 25 May 2026 06:44:29 +0300
Subject: [PATCH] feat: integrate CodeMirror with custom macOS-style themes for
 code block syntax highlighting

---
 resources/views/blog/show.blade.php | 215 ++++++++++++++++++++++++++++
 1 file changed, 215 insertions(+)

diff --git a/resources/views/blog/show.blade.php b/resources/views/blog/show.blade.php
index 12de687..1bcf67a 100644
--- a/resources/views/blog/show.blade.php
+++ b/resources/views/blog/show.blade.php
@@ -164,3 +164,218 @@
   </div>
 </section>
 @endsection
+
+@push('styles')
+<!-- CodeMirror Styles -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css" integrity="sha384-zaeBlB/vwYsDRSlFajnDd7OydJ0cWk+c2OWybl3eSUf6hW2EbhlCsQPqKr3gkznT" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/material-darker.min.css" integrity="sha384-eZTPTN0EvJdn23s24UDYJmUM2T7C2ZFa3qFLypeBruJv8mZeTusKUAO/j5zPAQ6l" crossorigin="anonymous">
+<!-- Google Fonts JetBrains Mono -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+
+<style>
+  /* Custom modern code block window styling */
+  .code-window {
+    background-color: #212529;
+    border-radius: 12px;
+    box-shadow: 0 12px 24px rgba(30, 34, 40, 0.08), 0 4px 12px rgba(30, 34, 40, 0.04);
+    margin: 2rem 0;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  .code-window-header {
+    background-color: #1a1d20;
+    padding: 0.8rem 1.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .code-window-dots {
+    display: flex;
+    gap: 7px;
+    align-items: center;
+  }
+
+  .code-window-dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+  }
+
+  .dot-red { background-color: #ff5f56; }
+  .dot-yellow { background-color: #ffbd2e; }
+  .dot-green { background-color: #27c93f; }
+
+  .code-window-lang {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #aab0bc;
+    background-color: rgba(255, 255, 255, 0.08);
+    padding: 3px 10px;
+    border-radius: 6px;
+    font-family: 'Space Grotesk', system-ui, sans-serif;
+  }
+
+  /* Customizing CodeMirror specifically */
+  .CodeMirror {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace !important;
+    font-size: 0.85rem !important;
+    line-height: 1.65 !important;
+    height: auto !important;
+    background: #212529 !important;
+    padding: 0.8rem 0 !important;
+  }
+
+  .CodeMirror-scroll {
+    max-height: 550px !important;
+  }
+
+  .CodeMirror-gutters {
+    background-color: #212529 !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
+    width: 48px !important;
+  }
+
+  .CodeMirror-linenumber {
+    color: #4a505e !important;
+    padding-left: 12px !important;
+  }
+
+  .CodeMirror-cursor {
+    border-left: 1px solid transparent !important; /* Hide cursor for read-only blocks */
+  }
+
+  /* Styling selection */
+  .CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.1) !important;
+  }
+  .CodeMirror-focused .CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.15) !important;
+  }
+</style>
+@endpush
+
+@push('scripts')
+<!-- CodeMirror Core JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js" integrity="sha384-uTzi9PU3axyLeKbgCPqQdNFT5Q23BRgFbmtrolYC7ROlbWVv7IggV+3r0ALSQd/s" crossorigin="anonymous"></script>
+
+<!-- CodeMirror Modes -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js" integrity="sha384-xPpkMo5nDgD98fIcuRVYhxkZV6/9Y4L8s3p0J5c4MxgJkyKJ8BJr+xfRkq7kn6Tw" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js" integrity="sha384-g0o+WW9mdIxA7LaaCKTkRm0M5TVT+Bb4s9eocxPsI2G0Xm0POG9iD6G6qP1IIsfS" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js" integrity="sha384-fpeIC2FZuPmw7mIsTvgB5BNc8QVxQC/nWg2W+CgPYOAiBiYVuHe2E8HiTWHBMIJQ" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/clike/clike.min.js" integrity="sha384-bZx++XMDqT0QRVoq6eVZnkq04LmwWZ0eLo0tFdSGkOJgH8qiqeMIIFJ+mRaM0wfb" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/php/php.min.js" integrity="sha384-1FUwPY2kaZKXw258/9CYBSS+zcc3CPggxE1zLjmYYiOdkcOw3KcXH5VNJWWbjw2U" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js" integrity="sha384-Xy+2exU6lBoT4OpUOtnQb+cUpn+nlJQEHvRobWVtwz6wIsw4oNoO7xyd/l8rYgMy" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/sql/sql.min.js" integrity="sha384-HxXmA1hLc56V6Ja4yfcCwAprmbnS4tuvKYS0qKG3t6oxOFMflcnYq5fOnt6wVCda" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/shell/shell.min.js" integrity="sha384-dmPRq54XNtYnlnAo7QrwJnZNa5r0JP5gU8z4H0686Cgz37qrR2jmNaDHUXyMI4wn" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/yaml/yaml.min.js" integrity="sha384-LekyoEGHzBMGUx26EEtC5G6HD6iyIr0msuy3LP3F8V98vVS5ZoNfIyiirXsoqAt/" crossorigin="anonymous"></script>
+
+<!-- Initialization Script -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const codeBlocks = document.querySelectorAll('.post-content pre code');
+    if (codeBlocks.length === 0) return;
+
+    codeBlocks.forEach(function(codeEl) {
+        // Extract raw code text securely (safely handled by textContent)
+        const rawCode = codeEl.textContent || codeEl.innerText;
+        
+        // Retrieve and parse language from class
+        let lang = 'code';
+        
+        const classes = codeEl.className.split(' ');
+        for (const cls of classes) {
+            if (cls.startsWith('language-') || cls.startsWith('lang-')) {
+                lang = cls.replace('language-', '').replace('lang-', '');
+                break;
+            }
+        }
+
+        // Map languages to CodeMirror modes
+        const modeMap = {
+            'js': 'javascript',
+            'javascript': 'javascript',
+            'ts': 'javascript',
+            'typescript': 'javascript',
+            'json': 'javascript',
+            'html': 'xml',
+            'xml': 'xml',
+            'svg': 'xml',
+            'css': 'css',
+            'php': 'php',
+            'python': 'python',
+            'py': 'python',
+            'sql': 'sql',
+            'bash': 'shell',
+            'sh': 'shell',
+            'shell': 'shell',
+            'yaml': 'yaml',
+            'yml': 'yaml'
+        };
+
+        const resolvedMode = modeMap[lang.toLowerCase()] || 'javascript';
+        
+        // Display nice label for the language badge
+        const displayLang = lang === 'code' ? 'Code' : lang;
+
+        // Build premium macOS-style window wrapping structure strictly using secure DOM methods (no innerHTML)
+        const preEl = codeEl.parentNode;
+        if (!preEl || preEl.tagName !== 'PRE') return;
+
+        const codeWindow = document.createElement('div');
+        codeWindow.className = 'code-window';
+
+        const header = document.createElement('div');
+        header.className = 'code-window-header';
+
+        const dots = document.createElement('div');
+        dots.className = 'code-window-dots';
+
+        const dotRed = document.createElement('div');
+        dotRed.className = 'code-window-dot dot-red';
+        const dotYellow = document.createElement('div');
+        dotYellow.className = 'code-window-dot dot-yellow';
+        const dotGreen = document.createElement('div');
+        dotGreen.className = 'code-window-dot dot-green';
+
+        dots.appendChild(dotRed);
+        dots.appendChild(dotYellow);
+        dots.appendChild(dotGreen);
+
+        const langBadge = document.createElement('div');
+        langBadge.className = 'code-window-lang';
+        langBadge.textContent = displayLang; // Secure text content insertion
+
+        header.appendChild(dots);
+        header.appendChild(langBadge);
+
+        const editorContainer = document.createElement('div');
+        editorContainer.className = 'code-editor-container';
+
+        codeWindow.appendChild(header);
+        codeWindow.appendChild(editorContainer);
+
+        // Replace the legacy pre tag with our beautiful new code window
+        preEl.parentNode.replaceChild(codeWindow, preEl);
+
+        // Instantiate CodeMirror inside the new container
+        CodeMirror(editorContainer, {
+            value: rawCode.trim(),
+            mode: resolvedMode,
+            theme: 'material-darker',
+            lineNumbers: true,
+            lineWrapping: true,
+            readOnly: 'nocursor',
+            viewportMargin: Infinity
+        });
+    });
+});
+</script>
+@endpush
+