better/faster syntax highlighting

Author: mscoutermarsh

Gemfile.lock

@@ -137,4 +137,4 @@ DEPENDENCIES
   yui-compressor
 
 BUNDLED WITH
-   2.1.4
+   2.5.0

_config.yml

@@ -28,7 +28,13 @@ twitter_username: htmlcsstoimage.com
 github_username:  htmlcsstoimage
 logo: "/assets/images/HCTI.png"
 
-highlighter: none
+highlighter: rouge
+markdown: kramdown
+kramdown:
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    block:
+      line_numbers: false
 
 # Build settings
 theme: just-the-docs

_layouts/default.html

@@ -159,10 +159,8 @@ <h2 class="text-delta">Table of contents</h2>
     {% endif %}
   </div>
 
-  {% css_asset_tag prism %}
-  - /assets/css/prism.css
-  - /assets/css/search.css
-  {% endcss_asset_tag %}
+  <link href="/assets/css/syntax.css" rel="stylesheet" type="text/css" />
+  <link href="/assets/css/search.css" rel="stylesheet" type="text/css" />
 
   {% javascript_asset_tag global %}
   - /assets/js/just-the-docs.js
@@ -180,14 +178,25 @@ <h2 class="text-delta">Table of contents</h2>
   });
   </script>
 
+  <script src="/assets/js/clipboard.min.js"></script>
   <script>
-    window.Prism = window.Prism || {};
-    Prism.manual = true;
+    // Add copy buttons to code blocks
+    document.addEventListener('DOMContentLoaded', function() {
+      document.querySelectorAll('.highlight').forEach(function(block) {
+        var btn = document.createElement('button');
+        btn.className = 'copy-btn';
+        btn.textContent = 'Copy';
+        btn.addEventListener('click', function() {
+          var code = block.querySelector('code');
+          navigator.clipboard.writeText(code.textContent).then(function() {
+            btn.textContent = 'Copied!';
+            setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
+          });
+        });
+        block.style.position = 'relative';
+        block.appendChild(btn);
+      });
+    });
   </script>
-
-  {% javascript_asset_tag highlighting %}
-  - /assets/js/prism.js
-  - /assets/js/clipboard.min.js
-  {% endjavascript_asset_tag %}
 </body>
 </html>

_plugins/jekyll_asset_pipeline.rb

@@ -9,15 +9,8 @@ def self.filetype
     def html
       file_path = "#{output_path}/#{@filename}"
 
-      if @filename.match? "jtd"
-        return "<link href='#{file_path}' rel='stylesheet' " \
-                  "type='text/css' async />\n" \
-      end
-
-      "<link href='#{file_path}' rel='preload' " \
-        "type='text/css' async />\n" \
-      "<link rel='preload' href='#{file_path}' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"> " \
-        "<noscript><link rel='stylesheet' href='#{file_path}'></noscript>"
+      # Load all CSS files directly as stylesheets
+      "<link href='#{file_path}' rel='stylesheet' type='text/css' />\n"
     end
   end
 end
@@ -43,8 +36,6 @@ def html
 module JekyllAssetPipeline
   class CssCompressor < JekyllAssetPipeline::Compressor
     require 'yui/compressor'
-    require 'pry'
-    require 'pry-byebug'
 
     def self.filetype
       '.css'

_plugins/jeykll_html_css_to_image.rb

@@ -1,6 +1,4 @@
 require "json"
-require 'pry'
-require 'pry-byebug'
 require "htmlcsstoimage"
 
 module Jekyll
@@ -13,12 +11,16 @@ def initialize(tag_name, input, tokens)
     end
 
     def render(context)
+      key = hcti_key(context)
+      # Return placeholder for local development without API key
+      return "https://via.placeholder.com/600x400?text=HCTI+Image+Placeholder" unless key
+
       input = parse_input(@input, context)
       @template_id = input["template_id"]
       @template_params = input
       @template_params.delete("template_id")
 
-      client = HTMLCSSToImage.new(api_key: hcti_key(context))
+      client = HTMLCSSToImage.new(api_key: key)
       image = client.create_image_from_template(template_id, @template_params)
 
       image.url
@@ -36,7 +38,8 @@ def hcti_key(context)
       end
 
       return key if key
-      raise StandardError.new("Please set your HTML/CSS to Image API key")
+      # Return nil for local development - the tag will return a placeholder
+      nil
     end
 
     def parse_input(input, context)

_sass/custom/custom.scss

@@ -35,18 +35,19 @@ img {
 .code-toolbar {
   position: relative;
   pre {
-    background-color: #f5f6fa !important;
+    background-color: #1e1e2e !important;
   }
   code {
     border: unset;
+    color: #cdd6f4 !important;
   }
 
   .toolbar-item {
     position: absolute;
     padding: 8px;
     top: 0px;
     right: 0px;
-    color: $grey-dk-100;
+    color: $grey-lt-100;
 
     .success {
       svg {
@@ -56,6 +57,108 @@ img {
   }
 }
 
+// Improved code block styling for better contrast
+pre[class*="language-"],
+code[class*="language-"] {
+  background-color: #1e1e2e !important;
+  color: #cdd6f4 !important;
+  border: none !important;
+}
+
+pre[class*="language-"] {
+  border-radius: 6px;
+  padding: 1rem !important;
+}
+
+// Syntax highlighting colors (dark theme)
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6c7086 !important;
+}
+
+.token.string,
+.token.attr-value {
+  color: #a6e3a1 !important;
+}
+
+.token.punctuation,
+.token.operator {
+  color: #89dceb !important;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+  color: #fab387 !important;
+}
+
+.token.selector,
+.token.attr-name,
+.token.char,
+.token.builtin {
+  color: #f9e2af !important;
+}
+
+.token.keyword,
+.token.atrule {
+  color: #cba6f7 !important;
+}
+
+.token.function {
+  color: #89b4fa !important;
+}
+
+.token.url,
+.token.variable {
+  color: #f38ba8 !important;
+}
+
+// Bash/Shell specific syntax highlighting
+.language-bash,
+.language-shell,
+.language-sh {
+  // Command names (curl, echo, etc.)
+  .token.function {
+    color: #89b4fa !important;
+    font-weight: 600;
+  }
+  
+  // Flags and parameters (-X, -d, -u, --data-urlencode)
+  .token.parameter,
+  .token.variable {
+    color: #f9e2af !important;
+  }
+  
+  // Strings (single and double quoted)
+  .token.string {
+    color: #a6e3a1 !important;
+  }
+  
+  // URLs
+  .token.url {
+    color: #89dceb !important;
+  }
+  
+  // Operators and punctuation
+  .token.operator {
+    color: #f38ba8 !important;
+  }
+}
+
+// Additional bash-specific token styling for better visibility
+pre[class*="language-bash"],
+pre[class*="language-shell"],
+pre[class*="language-sh"] {
+  .token.assign-left {
+    color: #cba6f7 !important;
+  }
+}
+
 .code-example {
   align-text: center;
   .hcti-container {