Enhance documentation with syntax highlighting and improved styling

- Add Highlight.js (vs2015 theme) for syntax highlighting
  - Replace hardcoded HTML spans with library-based highlighting
  - Add language modules: cpp, c, bash, shell, cmake

- Update documentation page styling
  - Set overall background to #E8E8E8 (light grey)
  - Set code blocks to #1E1E1E (dark grey, VSCode style)
  - Set sidebar to #F5F5F5
  - Remove CSS color inheritance that was blocking syntax colors

- Improve Installation section display
  - Change to fixed 2-column layout for better readability
  - Increase card padding and font sizes
  - Optimize to prevent horizontal scrolling

- Fix language tags
  - Change 'cmd' to 'shell' in markdown files
  - Add shell language module to support Windows commands

Author: wysaid

docs/content/documentation.md

@@ -177,7 +177,7 @@ cv::Mat mat = ccap::convertRgbFrameToMat(*frame);
 
 Uses DirectShow for camera access. Requires MSVC 2019 or later.
 
-```cmd
+```shell
 cl your_code.c /I"path\to\ccap\include" ^
    /link "path\to\ccap\lib\ccap.lib" ole32.lib oleaut32.lib uuid.lib
 ```

docs/content/documentation.zh.md

@@ -177,7 +177,7 @@ cv::Mat mat = ccap::convertRgbFrameToMat(*frame);
 
 使用 DirectShow 访问相机。需要 MSVC 2019 或更高版本。
 
-```cmd
+```shell
 cl your_code.c /I"path\to\ccap\include" ^
    /link "path\to\ccap\lib\ccap.lib" ole32.lib oleaut32.lib uuid.lib
 ```

docs/css/style.css

@@ -471,26 +471,26 @@ nav {
 }
 
 .code-block {
-    background: var(--code-bg-dark);
+    background: #1E1E1E;
     border-radius: 12px;
     padding: 30px;
     overflow-x: auto;
     max-width: 800px;
     margin: 0 auto;
+    border: 1px solid #333;
 }
 
 .code-block pre {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
     font-size: 0.9rem;
     line-height: 1.7;
+    margin: 0;
 }
 
-.code-block .keyword { color: #c792ea; }
-.code-block .string { color: #c3e88d; }
-.code-block .comment { color: #676e95; }
-.code-block .function { color: #82aaff; }
-.code-block .type { color: #ffcb6b; }
-.code-block .number { color: #f78c6c; }
+.code-block code {
+    background: transparent;
+    color: #d4d4d4;
+}
 
 .code-content {
     display: none;
@@ -507,31 +507,52 @@ nav {
 
 .install-methods {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
 }
 
 .install-method {
-    background: var(--bg-secondary);
-    padding: 28px;
+    background: white;
+    padding: 36px;
     border-radius: 12px;
+    box-shadow: var(--shadow-md);
+    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.install-method:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
 }
 
 .install-method h3 {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
     color: var(--primary-color);
-    font-size: 1.1rem;
+    font-size: 1.3rem;
+    font-weight: 600;
 }
 
 .install-method pre {
-    background: var(--code-bg);
-    color: white;
-    padding: 16px;
+    background: #1E1E1E;
+    padding: 24px;
     border-radius: 8px;
     overflow-x: auto;
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-    font-size: 0.85rem;
-    line-height: 1.6;
+    font-size: 0.88rem;
+    line-height: 1.9;
+    margin: 0;
+    border: 1px solid #333;
+    flex: 1;
+}
+
+.install-method pre code {
+    background: transparent;
+    color: #d4d4d4;
+    white-space: pre;
+    word-wrap: normal;
+    display: block;
 }
 
 /* Requirements Section */
@@ -664,11 +685,12 @@ html[lang="zh"] .lang-zh.flex-item {
 .doc-layout {
     display: flex;
     min-height: calc(100vh - var(--header-height));
+    background: #E8E8E8;
 }
 
 .doc-sidebar {
     width: 260px;
-    background: var(--bg-secondary);
+    background: #F5F5F5;
     border-right: 1px solid var(--border-color);
     padding: 24px;
     position: sticky;
@@ -748,18 +770,20 @@ html[lang="zh"] .lang-zh.flex-item {
 }
 
 .doc-content pre {
-    background: var(--code-bg);
-    color: white;
+    background: #1E1E1E;
     padding: 20px;
     border-radius: 8px;
     overflow-x: auto;
     margin: 16px 0;
+    border: 1px solid #333;
 }
 
 .doc-content pre code {
-    background: none;
+    background: none !important;
     padding: 0;
-    color: inherit;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+    font-size: 0.9em;
+    color: #d4d4d4;
 }
 
 /* Markdown-rendered content styling */

docs/documentation.html

@@ -11,6 +11,13 @@
     <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js" crossorigin="anonymous"></script>
     <!-- DOMPurify for HTML sanitization to prevent XSS -->
     <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" crossorigin="anonymous"></script>
+    <!-- Highlight.js for syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css" crossorigin="anonymous">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/shell.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cmake.min.js" crossorigin="anonymous"></script>
 </head>
 <body>
     <header>
@@ -97,7 +104,11 @@ <h4 class="lang-zh">许可证</h4>
             if (typeof marked !== 'undefined') {
                 marked.setOptions({
                     breaks: true,
-                    gfm: true
+                    gfm: true,
+                    highlight: function(code, lang) {
+                        // Don't highlight here, let hljs do it after sanitization
+                        return code;
+                    }
                 });
             }
 
@@ -123,12 +134,13 @@ <h4 class="lang-zh">许可证</h4>
             function sanitizeHtml(html) {
                 if (typeof DOMPurify !== 'undefined') {
                     return DOMPurify.sanitize(html, {
-                        USE_PROFILES: { html: true },
                         ALLOWED_TAGS: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'hr', 
                                        'ul', 'ol', 'li', 'pre', 'code', 'blockquote',
                                        'table', 'thead', 'tbody', 'tr', 'th', 'td',
-                                       'a', 'strong', 'em', 'del', 'img'],
-                        ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'id']
+                                       'a', 'strong', 'em', 'del', 'img', 'span', 'div'],
+                        ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'id'],
+                        KEEP_CONTENT: true,
+                        ALLOW_DATA_ATTR: false
                     });
                 }
                 // Fallback: return as-is if DOMPurify not available
@@ -161,6 +173,21 @@ <h4 class="lang-zh">许可证</h4>
                         var safeHtml = sanitizeHtml(rawHtml);
                         document.getElementById('doc-content').innerHTML = safeHtml;
 
+                        // Apply syntax highlighting to code blocks
+                        // Use setTimeout to ensure DOM is fully updated
+                        setTimeout(function() {
+                            if (typeof hljs !== 'undefined') {
+                                var codeBlocks = document.querySelectorAll('#doc-content pre code');
+                                console.log('Found ' + codeBlocks.length + ' code blocks to highlight');
+                                codeBlocks.forEach(function(block) {
+                                    console.log('Highlighting block with class:', block.className);
+                                    hljs.highlightElement(block);
+                                });
+                            } else {
+                                console.error('hljs is not loaded!');
+                            }
+                        }, 0);
+                        
                         // Generate sidebar navigation from headings
                         generateSidebar();
 

docs/index.html

@@ -8,6 +8,13 @@
     <meta name="keywords" content="camera capture, C++, C, cross-platform, Windows, macOS, iOS, Linux, DirectShow, AVFoundation, V4L2">
     <link rel="canonical" href="https://ccap.work/">
     <link rel="stylesheet" href="css/style.css">
+    <!-- Highlight.js for syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css" crossorigin="anonymous">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/c.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cmake.min.js" crossorigin="anonymous"></script>
 </head>
 <body>
     <header>
@@ -178,59 +185,59 @@ <h2 class="section-title lang-zh">快速开始</h2>
 
             <div class="code-block">
                 <div id="code-cpp" class="code-content active">
-<pre><span class="comment">// C++ Example</span>
-<span class="keyword">#include</span> <span class="string">&lt;ccap.h&gt;</span>
+<pre><code class="language-cpp">// C++ Example
+#include &lt;ccap.h&gt;
 
-<span class="type">int</span> <span class="function">main</span>() {
+int main() {
     ccap::Provider provider;
 
-    <span class="comment">// List available cameras</span>
-    <span class="keyword">auto</span> devices = provider.<span class="function">findDeviceNames</span>();
-    <span class="keyword">for</span> (<span class="type">size_t</span> i = <span class="number">0</span>; i &lt; devices.<span class="function">size</span>(); ++i) {
-        <span class="function">printf</span>(<span class="string">"[%zu] %s\n"</span>, i, devices[i].<span class="function">c_str</span>());
+    // List available cameras
+    auto devices = provider.findDeviceNames();
+    for (size_t i = 0; i &lt; devices.size(); ++i) {
+        printf("[%zu] %s\n", i, devices[i].c_str());
     }
 
-    <span class="comment">// Open and start camera</span>
-    <span class="keyword">if</span> (provider.<span class="function">open</span>(<span class="string">""</span>, <span class="keyword">true</span>)) {
-        <span class="keyword">auto</span> frame = provider.<span class="function">grab</span>(<span class="number">3000</span>);
-        <span class="keyword">if</span> (frame) {
-            <span class="function">printf</span>(<span class="string">"Captured: %dx%d\n"</span>, 
+    // Open and start camera
+    if (provider.open("", true)) {
+        auto frame = provider.grab(3000);
+        if (frame) {
+            printf("Captured: %dx%d\n", 
                    frame-&gt;width, frame-&gt;height);
         }
     }
-    <span class="keyword">return</span> <span class="number">0</span>;
-}</pre>
+    return 0;
+}</code></pre>
                 </div>
 
                 <div id="code-c" class="code-content">
-<pre><span class="comment">// Pure C Example</span>
-<span class="keyword">#include</span> <span class="string">&lt;ccap_c.h&gt;</span>
-<span class="keyword">#include</span> <span class="string">&lt;ccap_utils_c.h&gt;</span>
+<pre><code class="language-c">// Pure C Example
+#include &lt;ccap_c.h&gt;
+#include &lt;ccap_utils_c.h&gt;
 
-<span class="type">int</span> <span class="function">main</span>() {
-    CcapProvider* provider = <span class="function">ccap_provider_create</span>();
-    <span class="keyword">if</span> (!provider) <span class="keyword">return</span> -<span class="number">1</span>;
+int main() {
+    CcapProvider* provider = ccap_provider_create();
+    if (!provider) return -1;
 
-    <span class="comment">// Find available devices</span>
+    // Find available devices
     CcapDeviceNamesList deviceList;
-    <span class="keyword">if</span> (<span class="function">ccap_provider_find_device_names_list</span>(provider, &amp;deviceList)) {
-        <span class="function">printf</span>(<span class="string">"Found %zu camera(s)\n"</span>, deviceList.deviceCount);
+    if (ccap_provider_find_device_names_list(provider, &amp;deviceList)) {
+        printf("Found %zu camera(s)\n", deviceList.deviceCount);
     }
 
-    <span class="comment">// Open and capture</span>
-    <span class="keyword">if</span> (<span class="function">ccap_provider_open</span>(provider, NULL, <span class="keyword">true</span>)) {
-        CcapVideoFrame* frame = <span class="function">ccap_provider_grab</span>(provider, <span class="number">3000</span>);
-        <span class="keyword">if</span> (frame) {
+    // Open and capture
+    if (ccap_provider_open(provider, NULL, true)) {
+        CcapVideoFrame* frame = ccap_provider_grab(provider, 3000);
+        if (frame) {
             CcapVideoFrameInfo info;
-            <span class="function">ccap_video_frame_get_info</span>(frame, &amp;info);
-            <span class="function">printf</span>(<span class="string">"Captured: %dx%d\n"</span>, info.width, info.height);
-            <span class="function">ccap_video_frame_release</span>(frame);
+            ccap_video_frame_get_info(frame, &amp;info);
+            printf("Captured: %dx%d\n", info.width, info.height);
+            ccap_video_frame_release(frame);
         }
     }
 
-    <span class="function">ccap_provider_destroy</span>(provider);
-    <span class="keyword">return</span> <span class="number">0</span>;
-}</pre>
+    ccap_provider_destroy(provider);
+    return 0;
+}</code></pre>
                 </div>
             </div>
         </div>
@@ -245,35 +252,33 @@ <h2 class="section-title lang-zh">安装</h2>
                 <div class="install-method">
                     <h3 class="lang-en">Build from Source</h3>
                     <h3 class="lang-zh">从源码构建</h3>
-                    <pre>git clone https://github.com/wysaid/CameraCapture.git
+                    <pre><code class="language-bash">git clone https://github.com/wysaid/CameraCapture.git
 cd CameraCapture
-./scripts/build_and_install.sh</pre>
+./scripts/build_and_install.sh</code></pre>
                 </div>
 
                 <div class="install-method">
                     <h3>CMake FetchContent</h3>
-                    <pre>include(FetchContent)
-FetchContent_Declare(
-    ccap
-    GIT_REPOSITORY https://github.com/wysaid/CameraCapture.git
-    GIT_TAG main
-)
+                    <pre><code class="language-cmake">include(FetchContent)
+FetchContent_Declare(ccap
+  GIT_REPOSITORY https://github.com/wysaid/CameraCapture.git
+  GIT_TAG main)
 FetchContent_MakeAvailable(ccap)
 
-target_link_libraries(your_app PRIVATE ccap::ccap)</pre>
+target_link_libraries(your_app PRIVATE ccap::ccap)</code></pre>
                 </div>
 
                 <div class="install-method">
                     <h3>Homebrew (macOS)</h3>
-                    <pre>brew tap wysaid/ccap
-brew install ccap</pre>
+                    <pre><code class="language-bash">brew tap wysaid/ccap
+brew install ccap</code></pre>
                 </div>
 
                 <div class="install-method">
                     <h3 class="lang-en">CMake Integration</h3>
                     <h3 class="lang-zh">CMake 集成</h3>
-                    <pre>find_package(ccap REQUIRED)
-target_link_libraries(your_app ccap::ccap)</pre>
+                    <pre><code class="language-cmake">find_package(ccap REQUIRED)
+target_link_libraries(your_app ccap::ccap)</code></pre>
                 </div>
             </div>
         </div>

docs/js/main.js

@@ -291,13 +291,24 @@
         });
     }
 
+    // Initialize syntax highlighting
+    function initSyntaxHighlighting() {
+        if (typeof hljs !== 'undefined') {
+            // Highlight all code blocks on the page
+            document.querySelectorAll('pre code').forEach(function(block) {
+                hljs.highlightElement(block);
+            });
+        }
+    }
+
     // Initialize everything when DOM is ready
     function init() {
         initLanguage();
         initNavigation();
         initMobileMenu();
         initSmoothScroll();
         updateDownloadSection();
+        initSyntaxHighlighting();
     }
 
     // Expose functions globally