trmnl_preview 0.5.3 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c67d7a534ea6adba08ab5b46d40f60ec8e505123136916ba98e43991c6877f58
-  data.tar.gz: 5a22288cb32a76b2b8cb8d8163a38c964736e6fd7c067da6f76f9fe8c7401ec1
+  metadata.gz: 16a333009aab09891c12d6fe7bf3b8662912cd6e376f31c1a4997de5a6c93314
+  data.tar.gz: cf57e05fa4ba41059e55fb7281d7644ee07772459b63503ebe4a4023fae14085
 SHA512:
-  metadata.gz: 9df016907e67d1cdc0b771299162b769c83b2bb2c7d9ab4b0e5bd77cf8db3f6a8f15db93ad4a00810e0fd224cb2e3dbee1876c9fe416854f26f239704a28537a
-  data.tar.gz: bc4e3d5c46fc64d25a3791c77c0e43af5a84875c2ad2853742e3ba31cf7a5bbdef5a548d92a4bab4b27b048e089eae4e712cd99eec43ad1ee0902f27e39a364c
+  metadata.gz: 43048f869b37533061b92b7e06b2623b8d47e35098942f535301655727efc726f09c004330f277fb1ee7d0a73f3b5785283846b1404e0d8a6b92cec4f94b9105
+  data.tar.gz: 3a8672a65e06a537fef9c51e759657076bcda0a320cc4f2ee8a211c27bad31bcab09993ab592c520c3103805e2077a5f907c67c2423184688fd612d0c307e276

data/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.5.5
+
+- Added dark mode (@stephenyeargin)
+- Added override for `polling_url` in project config (@heroheman)
+- Reworked `bin/dev` into more generic `bin/trmnlp`
+- Fixed pull, push, and clone commands on Windows (@eugenio)
+
+## 0.5.4
+
+- Added `shared.liquid` file to template (@mariovisic)
+- Stringified custom field values to match production (@mariovisic)
+- Optimized image generation (@sd416)
+- Fixed preview from growing when JSON data becomes too wide (@stephenyeargin)
+
+## 0.5.3
+
+- Added support for [reusable markup](https://docs.usetrmnl.com/go/reusing-markup) in `shared.liquid`
+- Replaced custom case images with [\<trmnl-frame\> component](https://github.com/usetrmnl/trmnl-component)
+- Updated custom Liquid filters
+- Added API key validation during `trmnlp login`
+
 ## 0.5.2
 
 - Added `time_zone` project config option, which is injected into `trmnl.user` variables

data/README.md

@@ -2,7 +2,7 @@
 
 A basic self-hosted web server to ease the development and sharing of [TRMNL](https://usetrmnl.com/) plugins.
 
-[Liquid](https://shopify.github.io/liquid/) templates are rendered leveraging the [TRMNL Design System](https://usetrmnl.com/framework). They may be generated as HTML (faster, and a good approximation of the final result) or as BMP images (slower, but more accurate).
+[Liquid](https://shopify.github.io/liquid/) templates are rendered leveraging the [TRMNL Design System](https://usetrmnl.com/framework). They may be generated as HTML (faster, and a good approximation of the final result) or as PNG images (slower, but more accurate).
 
 The server watches the filesystem for changes to the Liquid templates, seamlessly updating the preview without the need to refresh.
 
@@ -52,12 +52,16 @@ trmnlp push                  # upload
 
 ## Running trmnlp
 
-### Via RubyGems
+The `bin/trmnlp` script is provided as a convenience. It will use the local Ruby gem if available, falling back to the `trmnl/trmnlp` Docker image.
+
+You can modify the `bin/trmnlp` script to set up environment variables (plugin secrets, etc.) before running the server.
+
+### Installing via RubyGems
 
 Prerequisites:
 
 - Ruby 3.x
-- For BMP rendering (optional):
+- For PNG rendering (optional):
   - Firefox
   - ImageMagick
 
@@ -66,13 +70,13 @@ gem install trmnl_preview
 trmnlp serve
 ```
 
-### Via Docker (`trmnlp serve` only)
+### Installing via Docker
 
 ```sh
 docker run \
-    -p 4567:4567 \
-    -v /path/to/plugin/on/host:/plugin \
-    trmnl/trmnlp
+    --publish 4567:4567 \
+    --volume ".:/plugin" \
+    trmnl/trmnlp serve
 ```
 
 ## `.trmnlp.yml` Reference - Project Config
@@ -114,6 +118,15 @@ The `settings.yml` file is part of the plugin definition.
 
 See [TRMNL documentation](https://help.usetrmnl.com/en/articles/10542599-importing-and-exporting-private-plugins#h_581fb988f0) for details on this file's contents.
 
+
+## Tests
+
+To test, run:
+
+```sh
+bin/rake
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/usetrmnl/trmnlp.

data/bin/rake

@@ -0,0 +1,27 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'rake' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
+
+bundle_binstub = File.expand_path("bundle", __dir__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300).include?("This file was generated by Bundler")
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("rake", "rake")

data/lib/trmnlp/api_client.rb

@@ -18,20 +18,24 @@ module TRMNLP
         temp_file.write(response.body)
         temp_file.rewind
 
-        # return the path to the temp file
-        Pathname.new(temp_file.path)
+        # return the temp file IO
+        temp_file
       else
         raise Error, "failed to download plugin settings archive: #{response.status} #{response.body}"
       end
     end
 
     def post_plugin_setting_archive(id, path)
+      filepart = Faraday::Multipart::FilePart.new(path, 'application/zip')
+
       payload = {
-        file: Faraday::Multipart::FilePart.new(path, 'application/zip')
+        file: filepart
       }
 
       response = conn.post("plugin_settings/#{id}/archive", payload)
 
+      filepart.close
+
       if response.status == 200
         JSON.parse(response.body)
       else

data/lib/trmnlp/app.rb

@@ -86,12 +86,16 @@ module TRMNLP
         end
       end
 
-      get "/render/#{view}.bmp" do
+      get "/render/#{view}.png" do
         @view = view
         html = @context.render_full_page(view)
         generator = ScreenGenerator.new(html, image: true)
-        img_path = generator.process
-        send_file img_path, type: 'image/png', disposition: 'inline'
+        temp_image = generator.process
+        
+        send_file temp_image.path, type: 'image/png', disposition: 'inline'
+
+        temp_image.close
+        temp_image.unlink
       end
     end
   end

data/lib/trmnlp/cli.rb

@@ -14,6 +14,8 @@ module TRMNLP
 
     def self.exit_on_failure? = true
 
+    def self.default_bind = File.exist?('/.dockerenv') ? '0.0.0.0' : '127.0.0.1'
+
     desc 'build', 'Generate static HTML files'
     def build
       Commands::Build.new(options).call
@@ -52,7 +54,7 @@ module TRMNLP
     end
 
     desc 'serve', 'Start a local dev server'
-    method_option :bind, type: :string, default: '127.0.0.1', aliases: '-b', desc: 'Bind address'
+    method_option :bind, type: :string, default: default_bind, aliases: '-b', desc: 'Bind address'
     method_option :port, type: :numeric, default: 4567, aliases: '-p', desc: 'Port number'
     def serve
       Commands::Serve.new(options).call

data/lib/trmnlp/commands/pull.rb

@@ -19,11 +19,11 @@ module TRMNLP
         end
 
         api = APIClient.new(config)
-        temp_path = api.get_plugin_setting_archive(plugin_settings_id)
+        tempfile = api.get_plugin_setting_archive(plugin_settings_id)
         size = 0
 
         begin
-          Zip::File.open(temp_path) do |zip_file|
+          Zip::File.open(tempfile.path) do |zip_file|
             zip_file.each do |entry|
               dest_path = paths.src_dir.join(entry.name)
               dest_path.dirname.mkpath
@@ -31,9 +31,9 @@ module TRMNLP
             end
           end
 
-          size = File.size(temp_path)
+          size = File.size(tempfile.path)
         ensure
-          temp_path.delete
+          tempfile.close
         end
 
         puts "Downloaded plugin (#{size} bytes)"

data/lib/trmnlp/commands/push.rb

@@ -29,18 +29,18 @@ module TRMNLP
 
         size = 0
 
-        Tempfile.create(binmode: true) do |temp_file|
-          Zip::File.open(temp_file.path, Zip::File::CREATE) do |zip_file|
-            paths.src_files.each do |file|
-              zip_file.add(File.basename(file), file)
-            end
+        zip_path = 'upload.zip'
+        f = Zip::File.open(zip_path, Zip::File::CREATE) do |zip_file|
+          paths.src_files.each do |file|
+            zip_file.add(File.basename(file), file)
           end
-        
-          response = api.post_plugin_setting_archive(plugin_settings_id, temp_file.path)
-          paths.plugin_config.write(response.dig('data', 'settings_yaml'))
-
-          size = File.size(temp_file.path)
         end
+      
+        response = api.post_plugin_setting_archive(plugin_settings_id, zip_path)
+        paths.plugin_config.write(response.dig('data', 'settings_yaml'))
+
+        size = File.size(zip_path)
+        File.delete(zip_path)
         
         output <<~HEREDOC
         Uploaded plugin (#{size} bytes)

data/lib/trmnlp/config/plugin.rb

@@ -3,9 +3,9 @@ require 'yaml'
 module TRMNLP
   class Config
     class Plugin
-      def initialize(paths, trmnlp_config)
+      def initialize(paths, project_config)
         @paths = paths
-        @trmnlp_config = trmnlp_config
+        @project_config = project_config
         reload!
       end
 
@@ -23,11 +23,12 @@ module TRMNLP
       def static? = strategy == 'static'
 
       def polling_urls
-        return [] if @config['polling_url'].nil? || @config['polling_url'].empty?
+        # allow project-level config to override
+        urls = project_config.user_data_overrides.dig('trmnl', 'plugin_settings', 'polling_url') || @config['polling_url']
 
-        urls = @config['polling_url'].split("\n").map(&:strip)
+        return [] if urls.nil?
 
-        urls.map { |url| with_custom_fields(url) }
+        urls.strip.split("\n").map { |url| with_custom_fields(url.strip) }
       end
 
       def polling_url_text = polling_urls.join("\r\n") # for {{ trmnl }}
@@ -56,9 +57,9 @@ module TRMNLP
 
       private
 
-      attr_reader :paths, :trmnlp_config
+      attr_reader :paths, :project_config
 
-      def with_custom_fields(value) = trmnlp_config.with_custom_fields(value)
+      def with_custom_fields(value) = project_config.with_custom_fields(value)
 
       # copied from TRMNL core
       def string_to_hash(str, delimiter: '=')

data/lib/trmnlp/config/project.rb

@@ -26,7 +26,7 @@ module TRMNLP
         (@config['watch'] || []).map { |watch_path| paths.expand(watch_path) }.uniq
       end
 
-      def custom_fields = @config['custom_fields'] || {}
+      def custom_fields = @config.fetch('custom_fields', {}).transform_values(&:to_s)
 
       def user_data_overrides = @config['variables'] || {}
 
@@ -46,4 +46,4 @@ module TRMNLP
       end
     end
   end
-end
+end

data/lib/trmnlp/screen_generator.rb

@@ -1,11 +1,105 @@
-require 'ferrum'
 require 'mini_magick'
 require 'puppeteer-ruby'
 require 'base64'
+require 'thread'
 
 module TRMNLP
   class ScreenGenerator
-
+    # Browser pool management for efficient resource usage
+    class BrowserPool
+      def initialize(max_size: 2)
+        @browsers = []
+        @available = Queue.new
+        @mutex = Mutex.new
+        @max_size = max_size
+        @shutdown = false
+        
+        # Register cleanup on exit
+        at_exit { shutdown }
+      end
+      
+      def with_page
+        browser = nil
+        page = nil
+        
+        begin
+          browser = checkout_browser
+          page = browser.new_page
+          yield page
+        ensure
+          # Clean up page but keep browser alive
+          page&.close rescue nil
+          checkin_browser(browser) if browser
+        end
+      end
+      
+      def shutdown
+        @mutex.synchronize do
+          return if @shutdown
+          @shutdown = true
+          
+          # Close all browsers
+          @browsers.each do |browser|
+            browser.close rescue nil
+          end
+          @browsers.clear
+        end
+      end
+      
+      private
+      
+      def checkout_browser
+        # Try to get an available browser
+        browser = @available.pop(true) rescue nil
+        
+        # If no browser available and we haven't reached max size, create a new one
+        if browser.nil?
+          @mutex.synchronize do
+            if @browsers.size < @max_size
+              browser = create_browser
+              @browsers << browser
+            end
+          end
+        end
+        
+        # If still no browser, wait for one to become available
+        browser ||= @available.pop
+        
+        # Verify browser is still alive
+        begin
+          browser.targets # Simple check to see if browser responds
+          browser
+        rescue
+          # Browser is dead, create a new one
+          @mutex.synchronize do
+            @browsers.delete(browser)
+            browser = create_browser
+            @browsers << browser
+          end
+          browser
+        end
+      end
+      
+      def checkin_browser(browser)
+        return if @shutdown
+        @available.push(browser)
+      end
+      
+      def create_browser
+        Puppeteer.launch(
+          product: 'firefox',
+          headless: true,
+          args: [
+            "--window-size=800,480",
+            "--disable-web-security"
+          ]
+        )
+      end
+    end
+    
+    # Class-level browser pool shared across all instances
+    @@browser_pool = BrowserPool.new
+    
     def initialize(html, opts = {})
       self.input = html
       self.image = !!opts[:image]
@@ -16,115 +110,80 @@ module TRMNLP
     def process
       convert_to_image
       image ? mono_image(output) : mono(output)
-      output.path
-      # IO.copy_stream(output, img_path)
+      output
     end
 
     private
 
-    # def img_path
-    #   "#{Dir.pwd}/public/images/generated/#{SecureRandom.hex(3)}.bmp"
-    # end
-
-    # Constructs the command and passes the input to the vendor/puppeteer.js
-    # script for processing. Returns a base64 encoded string
     def convert_to_image
       retry_count = 0
+      
       begin
-        # context = browser_instance.create_incognito_browser_context
-        page = firefox_browser.new_page
-        page.viewport = Puppeteer::Viewport.new(width: width, height: height)
-        # NOTE: Use below for chromium
-        # page.set_content(input, wait_until: ['networkidle0', 'domcontentloaded'])
-        # Note: Use below for firefox
-        page.set_content(input, timeout: 10000)
-        page.evaluate(<<~JAVASCRIPT)
-          () => {
-            document.getElementsByTagName('html')[0].style.overflow = "hidden";
-            document.getElementsByTagName('body')[0].style.overflow = "hidden";
-          }
-        JAVASCRIPT
-        self.output = Tempfile.new
-        page.screenshot(path: output.path, type: 'png')
-        firefox_browser.close
-      end
-    rescue Puppeteer::TimeoutError, Puppeteer::FrameManager::NavigationError => e
-      retry_count += 1
-      firefox_browser.close
-      if retry_count <= 1
-        @browser = nil
-        retry
-      else
-        puts "ERROR -> Converter::Html#convert_to_image_by_firefox -> #{e.message}"
+        @@browser_pool.with_page do |page|
+          # Configure page
+          page.viewport = Puppeteer::Viewport.new(width: width, height: height)
+          
+          # Set content with appropriate wait strategy
+          page.set_content(input, timeout: 10000)
+          
+          # Hide scrollbars
+          page.evaluate(<<~JAVASCRIPT)
+            () => {
+              document.getElementsByTagName('html')[0].style.overflow = "hidden";
+              document.getElementsByTagName('body')[0].style.overflow = "hidden";
+            }
+          JAVASCRIPT
+          
+          # Take screenshot
+          self.output = Tempfile.new(['screenshot', '.png'])
+          page.screenshot(path: output.path, type: 'png')
+        end
+      rescue Puppeteer::TimeoutError, Puppeteer::FrameManager::NavigationError => e
+        retry_count += 1
+        if retry_count <= 1
+          retry
+        else
+          puts "ERROR -> ScreenGenerator#convert_to_image -> #{e.message}"
+          raise
+        end
       end
     end
 
-    # Refer this PR where the author reused the browser instance https://github.com/YusukeIwaki/puppeteer-ruby/pull/100/files
-    # This will increase the throughput of our image rendering process by 60-70%, saving about ~1.5 second per image generation.
-    # On local it takes < 1 second now to generate the subsequent image.
-    def firefox_browser
-      @browser ||= Puppeteer.launch(
-        product: 'firefox',
-        headless: true,
-        args: [
-          "--window-size=#{width},#{height}",
-          "--disable-web-security"
-          # "--hide-scrollbars" #works only on chrome, using page.evaluate for firefox
-        ]
-      )
-    end
-
-    def Ferrum.cached_browser
-      return nil unless $cached_browser
-
-      $cached_browser
-    end
-
-    def Ferrum.cached_browser=(value)
-      $cached_browser = value
-    end
-
-    # Overall at max wait for 2.5 seconds
-    def wait_for_stop_loading(page)
-      count = 0
-      while page.frames.first.state != :stopped_loading && count < 20
-        count += 1
-        sleep 0.1
-      end
-      sleep 0.5 # wait_until: DomContentLoaded event is not available in ferrum
-    end
-
     def mono(img)
       MiniMagick::Tool::Convert.new do |m|
         m << img.path
         m.monochrome # Use built-in smart monochrome dithering (but it's not working as expected)
         m.depth(color_depth) # Should be set to 1 for 1-bit output
         m.strip # Remove any additional metadata
-        m << ('bmp3:' << img.path)
+        m << img.path
       end
     end
 
     def mono_image(img)
-      # Changelog:
-      # ImageMagick 6.XX used to convert the png to bitmap with dithering while maintaining the channel to 1
-      # The same seems to be broken with imagemagick 7.XX
-      # So in order to reduce the channel from 8 to 1, I just rerun the command, and it's working
-      # TODO for future, find a better way to generate image screens.
+      # Convert to monochrome bitmap with proper dithering
+      # This implementation works with both ImageMagick 6.x and 7.x
       MiniMagick::Tool::Convert.new do |m|
         m << img.path
+        
+        # First convert to grayscale to ensure proper channel handling
+        m.colorspace << 'Gray'
+        
+        # Apply Floyd-Steinberg dithering for better quality
         m.dither << 'FloydSteinberg'
+        
+        # Remap to a 50% gray pattern for better dithering
         m.remap << 'pattern:gray50'
-        m.depth(color_depth) # Should be set to 1 for 1-bit output
-        m.strip # Remove any additional metadata
-        m << ('bmp3:' << img.path) # Converts to Bitmap.
-      end
-      MiniMagick::Tool::Convert.new do |m|
+        
+        # Set the image type to bilevel (1-bit black and white)
+        m.type << 'Bilevel'
+        
+        # Set color depth to 1 bit
+        m.depth << color_depth
+        
+        # Remove any metadata to reduce file size
+        m.strip
+        
         m << img.path
-        m.dither << 'FloydSteinberg'
-        m.remap << 'pattern:gray50'
-        m.depth(color_depth) # Should be set to 1 for 1-bit output
-        m.strip # Remove any additional metadata
-        m << ('bmp3:' << img.path) # Converts to Bitmap.
       end
     end
 
@@ -134,4 +193,4 @@ module TRMNLP
 
     def color_depth = 1
   end
-end
+end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = "0.5.3".freeze
+  VERSION = "0.5.5".freeze
 end

data/templates/init/bin/trmnlp

@@ -0,0 +1,30 @@
+#! /bin/bash
+#
+# This script was automatically generated by `trmnlp init` but it's yours to modify!
+# Use this opportunity to set up environment variables, install dependencies, etc.
+#
+
+if command -v trmnlp &> /dev/null
+then
+    trmnlp "$@"
+    exit
+fi
+
+if command -v docker &> /dev/null
+then
+    docker run \
+        --publish 4567:4567 \
+        --volume "$(pwd):/plugin" \
+        trmnl/trmnlp "$@"
+    exit
+fi
+
+echo "Install the trmnl_preview gem:
+
+  gem install trmnl_preview
+
+Or install Docker:
+
+    https://docs.docker.com/get-docker/"
+
+exit 1

data/templates/init/src/shared.liquid

@@ -0,0 +1 @@
+

data/trmnl_preview.gemspec

@@ -47,8 +47,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "activesupport", "~> 8.0"
   spec.add_dependency "actionview", "~> 8.0"
 
-  # BMP rendering
-  spec.add_dependency "ferrum", "~> 0.16"
+  # PNG rendering
   spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'
   spec.add_dependency 'mini_magick', '~> 4.12.0'
 

data/web/public/highlight/highlight.min.js

@@ -0,0 +1,315 @@
+/*!
+  Highlight.js v11.11.1 (git: 08cb242e7d)
+  (c) 2006-2025 Josh Goebel <hello@joshgoebel.com> and other contributors
+  License: BSD-3-Clause
+ */
+var hljs=function(){"use strict";function e(t){
+return t instanceof Map?t.clear=t.delete=t.set=()=>{
+throw Error("map is read-only")}:t instanceof Set&&(t.add=t.clear=t.delete=()=>{
+throw Error("set is read-only")
+}),Object.freeze(t),Object.getOwnPropertyNames(t).forEach((n=>{
+const i=t[n],s=typeof i;"object"!==s&&"function"!==s||Object.isFrozen(i)||e(i)
+})),t}class t{constructor(e){
+void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+ignoreMatch(){this.isMatchIgnored=!0}}function n(e){
+return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+}function i(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
+;return t.forEach((e=>{for(const t in e)n[t]=e[t]})),n}const s=e=>!!e.scope
+;class r{constructor(e,t){
+this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){
+this.buffer+=n(e)}openNode(e){if(!s(e))return;const t=((e,{prefix:t})=>{
+if(e.startsWith("language:"))return e.replace("language:","language-")
+;if(e.includes(".")){const n=e.split(".")
+;return[`${t}${n.shift()}`,...n.map(((e,t)=>`${e}${"_".repeat(t+1)}`))].join(" ")
+}return`${t}${e}`})(e.scope,{prefix:this.classPrefix});this.span(t)}
+closeNode(e){s(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+this.buffer+=`<span class="${e}">`}}const o=(e={})=>{const t={children:[]}
+;return Object.assign(t,e),t};class a{constructor(){
+this.rootNode=o(),this.stack=[this.rootNode]}get top(){
+return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+this.top.children.push(e)}openNode(e){const t=o({scope:e})
+;this.add(t),this.stack.push(t)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){
+return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),
+t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){
+"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+a._collapse(e)})))}}class c extends a{constructor(e){super(),this.options=e}
+addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+this.closeNode()}__addSublanguage(e,t){const n=e.root
+;t&&(n.scope="language:"+t),this.add(n)}toHTML(){
+return new r(this,this.options).value()}finalize(){
+return this.closeAllNodes(),!0}}function l(e){
+return e?"string"==typeof e?e:e.source:null}function g(e){return h("(?=",e,")")}
+function u(e){return h("(?:",e,")*")}function d(e){return h("(?:",e,")?")}
+function h(...e){return e.map((e=>l(e))).join("")}function f(...e){const t=(e=>{
+const t=e[e.length-1]
+;return"object"==typeof t&&t.constructor===Object?(e.splice(e.length-1,1),t):{}
+})(e);return"("+(t.capture?"":"?:")+e.map((e=>l(e))).join("|")+")"}
+function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+const b=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+;function m(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
+;let i=l(e),s="";for(;i.length>0;){const e=b.exec(i);if(!e){s+=i;break}
+s+=i.substring(0,e.index),
+i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?s+="\\"+(Number(e[1])+t):(s+=e[0],
+"("===e[0]&&n++)}return s})).map((e=>`(${e})`)).join(t)}
+const E="[a-zA-Z]\\w*",x="[a-zA-Z_]\\w*",y="\\b\\d+(\\.\\d+)?",_="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",w="\\b(0b[01]+)",O={
+begin:"\\\\[\\s\\S]",relevance:0},v={scope:"string",begin:"'",end:"'",
+illegal:"\\n",contains:[O]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
+contains:[O]},N=(e,t,n={})=>{const s=i({scope:"comment",begin:e,end:t,
+contains:[]},n);s.contains.push({scope:"doctag",
+begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+;const r=f("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+;return s.contains.push({begin:h(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),s
+},S=N("//","$"),M=N("/\\*","\\*/"),R=N("#","$");var j=Object.freeze({
+__proto__:null,APOS_STRING_MODE:v,BACKSLASH_ESCAPE:O,BINARY_NUMBER_MODE:{
+scope:"number",begin:w,relevance:0},BINARY_NUMBER_RE:w,COMMENT:N,
+C_BLOCK_COMMENT_MODE:M,C_LINE_COMMENT_MODE:S,C_NUMBER_MODE:{scope:"number",
+begin:_,relevance:0},C_NUMBER_RE:_,END_SAME_AS_BEGIN:e=>Object.assign(e,{
+"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{
+t.data._beginMatch!==e[1]&&t.ignoreMatch()}}),HASH_COMMENT_MODE:R,IDENT_RE:E,
+MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+x,relevance:0},
+NUMBER_MODE:{scope:"number",begin:y,relevance:0},NUMBER_RE:y,
+PHRASAL_WORDS_MODE:{
+begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+},QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
+end:/\/[gimuy]*/,contains:[O,{begin:/\[/,end:/\]/,relevance:0,contains:[O]}]},
+RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+SHEBANG:(e={})=>{const t=/^#![ ]*\//
+;return e.binary&&(e.begin=h(t,/.*\b/,e.binary,/\b.*/)),i({scope:"meta",begin:t,
+end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},
+TITLE_MODE:{scope:"title",begin:E,relevance:0},UNDERSCORE_IDENT_RE:x,
+UNDERSCORE_TITLE_MODE:{scope:"title",begin:x,relevance:0}});function A(e,t){
+"."===e.input[e.index-1]&&t.ignoreMatch()}function I(e,t){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function T(e,t){
+t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+e.__beforeBegin=A,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+void 0===e.relevance&&(e.relevance=0))}function L(e,t){
+Array.isArray(e.illegal)&&(e.illegal=f(...e.illegal))}function B(e,t){
+if(e.match){
+if(e.begin||e.end)throw Error("begin & end are not supported with match")
+;e.begin=e.match,delete e.match}}function P(e,t){
+void 0===e.relevance&&(e.relevance=1)}const D=(e,t)=>{if(!e.beforeMatch)return
+;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+;const n=Object.assign({},e);Object.keys(e).forEach((t=>{delete e[t]
+})),e.keywords=n.keywords,e.begin=h(n.beforeMatch,g(n.begin)),e.starts={
+relevance:0,contains:[Object.assign(n,{endsParent:!0})]
+},e.relevance=0,delete n.beforeMatch
+},H=["of","and","for","in","not","or","if","then","parent","list","value"]
+;function C(e,t,n="keyword"){const i=Object.create(null)
+;return"string"==typeof e?s(n,e.split(" ")):Array.isArray(e)?s(n,e):Object.keys(e).forEach((n=>{
+Object.assign(i,C(e[n],t,n))})),i;function s(e,n){
+t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((t=>{const n=t.split("|")
+;i[n[0]]=[e,$(n[0],n[1])]}))}}function $(e,t){
+return t?Number(t):(e=>H.includes(e.toLowerCase()))(e)?0:1}const U={},z=e=>{
+console.error(e)},W=(e,...t)=>{console.log("WARN: "+e,...t)},X=(e,t)=>{
+U[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),U[`${e}/${t}`]=!0)
+},G=Error();function K(e,t,{key:n}){let i=0;const s=e[n],r={},o={}
+;for(let e=1;e<=t.length;e++)o[e+i]=s[e],r[e+i]=!0,i+=p(t[e-1])
+;e[n]=o,e[n]._emit=r,e[n]._multi=!0}function F(e){(e=>{
+e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+}),(e=>{if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw z("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+G
+;if("object"!=typeof e.beginScope||null===e.beginScope)throw z("beginScope must be object"),
+G;K(e,e.begin,{key:"beginScope"}),e.begin=m(e.begin,{joinWith:""})}})(e),(e=>{
+if(Array.isArray(e.end)){
+if(e.skip||e.excludeEnd||e.returnEnd)throw z("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+G
+;if("object"!=typeof e.endScope||null===e.endScope)throw z("endScope must be object"),
+G;K(e,e.end,{key:"endScope"}),e.end=m(e.end,{joinWith:""})}})(e)}function Z(e){
+function t(t,n){
+return RegExp(l(t),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(n?"g":""))
+}class n{constructor(){
+this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+addRule(e,t){
+t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),
+this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+;const e=this.regexes.map((e=>e[1]));this.matcherRe=t(m(e,{joinWith:"|"
+}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+;const t=this.matcherRe.exec(e);if(!t)return null
+;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),i=this.matchIndexes[n]
+;return t.splice(0,n),Object.assign(t,i)}}class s{constructor(){
+this.rules=[],this.multiRegexes=[],
+this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n
+;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),
+t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){
+return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){
+this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){
+const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex
+;let n=t.exec(e)
+;if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{
+const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}
+return n&&(this.regexIndex+=n.position+1,
+this.regexIndex===this.count&&this.considerAll()),n}}
+if(e.compilerExtensions||(e.compilerExtensions=[]),
+e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+;return e.classNameAliases=i(e.classNameAliases||{}),function n(r,o){const a=r
+;if(r.isCompiled)return a
+;[I,B,F,D].forEach((e=>e(r,o))),e.compilerExtensions.forEach((e=>e(r,o))),
+r.__beforeBegin=null,[T,L,P].forEach((e=>e(r,o))),r.isCompiled=!0;let c=null
+;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
+c=r.keywords.$pattern,
+delete r.keywords.$pattern),c=c||/\w+/,r.keywords&&(r.keywords=C(r.keywords,e.case_insensitive)),
+a.keywordPatternRe=t(c,!0),
+o&&(r.begin||(r.begin=/\B|\b/),a.beginRe=t(a.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
+r.end&&(a.endRe=t(a.end)),
+a.terminatorEnd=l(a.end)||"",r.endsWithParent&&o.terminatorEnd&&(a.terminatorEnd+=(r.end?"|":"")+o.terminatorEnd)),
+r.illegal&&(a.illegalRe=t(r.illegal)),
+r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((t=>i(e,{
+variants:null},t)))),e.cachedVariants?e.cachedVariants:V(e)?i(e,{
+starts:e.starts?i(e.starts):null
+}):Object.isFrozen(e)?i(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{n(e,a)
+})),r.starts&&n(r.starts,o),a.matcher=(e=>{const t=new s
+;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"
+}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"
+}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t})(a),a}(e)}function V(e){
+return!!e&&(e.endsWithParent||V(e.starts))}class q extends Error{
+constructor(e,t){super(e),this.name="HTMLInjectionError",this.html=t}}
+const J=n,Y=i,Q=Symbol("nomatch"),ee=n=>{
+const i=Object.create(null),s=Object.create(null),r=[];let o=!0
+;const a="Could not find the language '{}', did you forget to load/include a language module?",l={
+disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+cssSelector:"pre code",languages:null,__emitter:c};function b(e){
+return p.noHighlightRe.test(e)}function m(e,t,n){let i="",s=""
+;"object"==typeof t?(i=e,
+n=t.ignoreIllegals,s=t.language):(X("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+X("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+s=e,i=t),void 0===n&&(n=!0);const r={code:i,language:s};N("before:highlight",r)
+;const o=r.result?r.result:E(r.language,r.code,n)
+;return o.code=r.code,N("after:highlight",o),o}function E(e,n,s,r){
+const c=Object.create(null);function l(){if(!N.keywords)return void M.addText(R)
+;let e=0;N.keywordPatternRe.lastIndex=0;let t=N.keywordPatternRe.exec(R),n=""
+;for(;t;){n+=R.substring(e,t.index)
+;const s=w.case_insensitive?t[0].toLowerCase():t[0],r=(i=s,N.keywords[i]);if(r){
+const[e,i]=r
+;if(M.addText(n),n="",c[s]=(c[s]||0)+1,c[s]<=7&&(j+=i),e.startsWith("_"))n+=t[0];else{
+const n=w.classNameAliases[e]||e;u(t[0],n)}}else n+=t[0]
+;e=N.keywordPatternRe.lastIndex,t=N.keywordPatternRe.exec(R)}var i
+;n+=R.substring(e),M.addText(n)}function g(){null!=N.subLanguage?(()=>{
+if(""===R)return;let e=null;if("string"==typeof N.subLanguage){
+if(!i[N.subLanguage])return void M.addText(R)
+;e=E(N.subLanguage,R,!0,S[N.subLanguage]),S[N.subLanguage]=e._top
+}else e=x(R,N.subLanguage.length?N.subLanguage:null)
+;N.relevance>0&&(j+=e.relevance),M.__addSublanguage(e._emitter,e.language)
+})():l(),R=""}function u(e,t){
+""!==e&&(M.startScope(t),M.addText(e),M.endScope())}function d(e,t){let n=1
+;const i=t.length-1;for(;n<=i;){if(!e._emit[n]){n++;continue}
+const i=w.classNameAliases[e[n]]||e[n],s=t[n];i?u(s,i):(R=s,l(),R=""),n++}}
+function h(e,t){
+return e.scope&&"string"==typeof e.scope&&M.openNode(w.classNameAliases[e.scope]||e.scope),
+e.beginScope&&(e.beginScope._wrap?(u(R,w.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+R=""):e.beginScope._multi&&(d(e.beginScope,t),R="")),N=Object.create(e,{parent:{
+value:N}}),N}function f(e,n,i){let s=((e,t)=>{const n=e&&e.exec(t)
+;return n&&0===n.index})(e.endRe,i);if(s){if(e["on:end"]){const i=new t(e)
+;e["on:end"](n,i),i.isMatchIgnored&&(s=!1)}if(s){
+for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+if(e.endsWithParent)return f(e.parent,n,i)}function b(e){
+return 0===N.matcher.regexIndex?(R+=e[0],1):(T=!0,0)}function m(e){
+const t=e[0],i=n.substring(e.index),s=f(N,e,i);if(!s)return Q;const r=N
+;N.endScope&&N.endScope._wrap?(g(),
+u(t,N.endScope._wrap)):N.endScope&&N.endScope._multi?(g(),
+d(N.endScope,e)):r.skip?R+=t:(r.returnEnd||r.excludeEnd||(R+=t),
+g(),r.excludeEnd&&(R=t));do{
+N.scope&&M.closeNode(),N.skip||N.subLanguage||(j+=N.relevance),N=N.parent
+}while(N!==s.parent);return s.starts&&h(s.starts,e),r.returnEnd?0:t.length}
+let y={};function _(i,r){const a=r&&r[0];if(R+=i,null==a)return g(),0
+;if("begin"===y.type&&"end"===r.type&&y.index===r.index&&""===a){
+if(R+=n.slice(r.index,r.index+1),!o){const t=Error(`0 width match regex (${e})`)
+;throw t.languageName=e,t.badRule=y.rule,t}return 1}
+if(y=r,"begin"===r.type)return(e=>{
+const n=e[0],i=e.rule,s=new t(i),r=[i.__beforeBegin,i["on:begin"]]
+;for(const t of r)if(t&&(t(e,s),s.isMatchIgnored))return b(n)
+;return i.skip?R+=n:(i.excludeBegin&&(R+=n),
+g(),i.returnBegin||i.excludeBegin||(R=n)),h(i,e),i.returnBegin?0:n.length})(r)
+;if("illegal"===r.type&&!s){
+const e=Error('Illegal lexeme "'+a+'" for mode "'+(N.scope||"<unnamed>")+'"')
+;throw e.mode=N,e}if("end"===r.type){const e=m(r);if(e!==Q)return e}
+if("illegal"===r.type&&""===a)return R+="\n",1
+;if(I>1e5&&I>3*r.index)throw Error("potential infinite loop, way more iterations than matches")
+;return R+=a,a.length}const w=O(e)
+;if(!w)throw z(a.replace("{}",e)),Error('Unknown language: "'+e+'"')
+;const v=Z(w);let k="",N=r||v;const S={},M=new p.__emitter(p);(()=>{const e=[]
+;for(let t=N;t!==w;t=t.parent)t.scope&&e.unshift(t.scope)
+;e.forEach((e=>M.openNode(e)))})();let R="",j=0,A=0,I=0,T=!1;try{
+if(w.__emitTokens)w.__emitTokens(n,M);else{for(N.matcher.considerAll();;){
+I++,T?T=!1:N.matcher.considerAll(),N.matcher.lastIndex=A
+;const e=N.matcher.exec(n);if(!e)break;const t=_(n.substring(A,e.index),e)
+;A=e.index+t}_(n.substring(A))}return M.finalize(),k=M.toHTML(),{language:e,
+value:k,relevance:j,illegal:!1,_emitter:M,_top:N}}catch(t){
+if(t.message&&t.message.includes("Illegal"))return{language:e,value:J(n),
+illegal:!0,relevance:0,_illegalBy:{message:t.message,index:A,
+context:n.slice(A-100,A+100),mode:t.mode,resultSoFar:k},_emitter:M};if(o)return{
+language:e,value:J(n),illegal:!1,relevance:0,errorRaised:t,_emitter:M,_top:N}
+;throw t}}function x(e,t){t=t||p.languages||Object.keys(i);const n=(e=>{
+const t={value:J(e),illegal:!1,relevance:0,_top:l,_emitter:new p.__emitter(p)}
+;return t._emitter.addText(e),t})(e),s=t.filter(O).filter(k).map((t=>E(t,e,!1)))
+;s.unshift(n);const r=s.sort(((e,t)=>{
+if(e.relevance!==t.relevance)return t.relevance-e.relevance
+;if(e.language&&t.language){if(O(e.language).supersetOf===t.language)return 1
+;if(O(t.language).supersetOf===e.language)return-1}return 0})),[o,a]=r,c=o
+;return c.secondBest=a,c}function y(e){let t=null;const n=(e=>{
+let t=e.className+" ";t+=e.parentNode?e.parentNode.className:""
+;const n=p.languageDetectRe.exec(t);if(n){const t=O(n[1])
+;return t||(W(a.replace("{}",n[1])),
+W("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}
+return t.split(/\s+/).find((e=>b(e)||O(e)))})(e);if(b(n))return
+;if(N("before:highlightElement",{el:e,language:n
+}),e.dataset.highlighted)return void console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",e)
+;if(e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
+console.warn("The element with unescaped HTML:"),
+console.warn(e)),p.throwUnescapedHTML))throw new q("One of your code blocks includes unescaped HTML.",e.innerHTML)
+;t=e;const i=t.textContent,r=n?m(i,{language:n,ignoreIllegals:!0}):x(i)
+;e.innerHTML=r.value,e.dataset.highlighted="yes",((e,t,n)=>{const i=t&&s[t]||n
+;e.classList.add("hljs"),e.classList.add("language-"+i)
+})(e,n,r.language),e.result={language:r.language,re:r.relevance,
+relevance:r.relevance},r.secondBest&&(e.secondBest={
+language:r.secondBest.language,relevance:r.secondBest.relevance
+}),N("after:highlightElement",{el:e,result:r,text:i})}let _=!1;function w(){
+if("loading"===document.readyState)return _||window.addEventListener("DOMContentLoaded",(()=>{
+w()}),!1),void(_=!0);document.querySelectorAll(p.cssSelector).forEach(y)}
+function O(e){return e=(e||"").toLowerCase(),i[e]||i[s[e]]}
+function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+s[e.toLowerCase()]=t}))}function k(e){const t=O(e)
+;return t&&!t.disableAutodetect}function N(e,t){const n=e;r.forEach((e=>{
+e[n]&&e[n](t)}))}Object.assign(n,{highlight:m,highlightAuto:x,highlightAll:w,
+highlightElement:y,
+highlightBlock:e=>(X("10.7.0","highlightBlock will be removed entirely in v12.0"),
+X("10.7.0","Please use highlightElement now."),y(e)),configure:e=>{p=Y(p,e)},
+initHighlighting:()=>{
+w(),X("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+initHighlightingOnLoad:()=>{
+w(),X("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+},registerLanguage:(e,t)=>{let s=null;try{s=t(n)}catch(t){
+if(z("Language definition for '{}' could not be registered.".replace("{}",e)),
+!o)throw t;z(t),s=l}
+s.name||(s.name=e),i[e]=s,s.rawDefinition=t.bind(null,n),s.aliases&&v(s.aliases,{
+languageName:e})},unregisterLanguage:e=>{delete i[e]
+;for(const t of Object.keys(s))s[t]===e&&delete s[t]},
+listLanguages:()=>Object.keys(i),getLanguage:O,registerAliases:v,
+autoDetection:k,inherit:Y,addPlugin:e=>{(e=>{
+e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{
+e["before:highlightBlock"](Object.assign({block:t.el},t))
+}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{
+e["after:highlightBlock"](Object.assign({block:t.el},t))})})(e),r.push(e)},
+removePlugin:e=>{const t=r.indexOf(e);-1!==t&&r.splice(t,1)}}),n.debugMode=()=>{
+o=!1},n.safeMode=()=>{o=!0},n.versionString="11.11.1",n.regex={concat:h,
+lookahead:g,either:f,optional:d,anyNumberOfTimes:u}
+;for(const t in j)"object"==typeof j[t]&&e(j[t]);return Object.assign(n,j),n
+},te=ee({});return te.newInstance=()=>ee({}),te}()
+;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);/*! `json` grammar compiled for Highlight.js 11.11.1 */
+(()=>{var e=(()=>{"use strict";return e=>{const a=["true","false","null"],s={
+scope:"literal",beginKeywords:a.join(" ")};return{name:"JSON",aliases:["jsonc"],
+keywords:{literal:a},contains:[{className:"attr",
+begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,relevance:1.01},{match:/[{}[\],:]/,
+className:"punctuation",relevance:0
+},e.QUOTE_STRING_MODE,s,e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],
+illegal:"\\S"}}})();hljs.registerLanguage("json",e)})();

data/web/public/highlight/styles/atom-one-dark.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

data/web/public/index.css

@@ -1,6 +1,7 @@
 body {
   font-family: sans-serif;
   margin: 10px;
+  background-color: #eaebef;
 }
 
 main {
@@ -14,11 +15,12 @@ menu {
   margin: 0;
   display: flex;
   justify-content: space-between;
+  max-width: 950px;
 }
 
 menu a {
   padding: 0.5em 1em;
-  background: #ddd;
+  background: #c7cbd5;
   border-radius: 0.5em;
   display: inline-block;
   text-decoration: none;
@@ -34,6 +36,12 @@ menu a.active {
   color: white;
 }
 
+pre > code {
+  max-width: 950px;
+  overflow-x: scroll;
+  border-radius: 0.5em;
+}
+
 .spinner {
   width: 22px;
   height: 22px;
@@ -51,3 +59,19 @@ menu a.active {
     transform: rotate(360deg);
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #191b21;
+    color: #ffffff;
+  }
+
+  menu a {
+    background-color: #262932;
+    color: #b1b6c4;
+  }
+
+  menu a:hover {
+    background-color: #2f333e;
+  }
+}

data/web/public/trmnl-component.js

@@ -204,7 +204,7 @@
 
 
 
-                       <foreignobject  class="node" x="36" y="34" width="840" height="520"
+                       <foreignobject  class="node" x="36" y="34" width="830" height="520"
                                       style="transform:scale(0.98);  position: relative;  border-radius: 12px; opacity: 0.9; mix-blend-mode: darken;">
                          <div id="${contentWrapperId}"
                              style="position: static; width: 100%; height: 100%;  max-width: 100%; max-height: 100%;">

data/web/views/index.erb

@@ -11,6 +11,11 @@
     <link rel="stylesheet" href="/index.css">
     <script src="/trmnl-component.js" defer></script>
     <script src="/index.js"></script>
+
+    <!-- Highlight.js for syntax highlighting -->
+    <link rel="stylesheet" href="/highlight/styles/atom-one-dark.min.css">
+    <script src="/highlight/highlight.min.js"></script>
+    <script>hljs.highlightAll();</script>
 </head>
 <body>
     <main>
@@ -24,7 +29,7 @@
             <div style="display: flex; gap: 0.3em; align-items: center;">
                 <div class="spinner" style="display: none;"></div>
                 <select class="select-format">
-                    <option value="bmp">BMP</option>
+                    <option value="png">PNG</option>
                     <option value="html" selected>HTML</option>
                 </select>
                 <select class="select-case">
@@ -41,7 +46,7 @@
 
         <trmnl-frame>Rendering…</trmnl-frame>
 
-        <pre id="user-data"><%= @user_data %></pre>
+        <pre id="user-data"><code><%= @user_data %></code></pre>
     </main>
 </body>
 </html>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.5
 platform: ruby
 authors:
 - Rockwell Schrock
 bindir: bin
 cert_chain: []
-date: 2025-05-22 00:00:00.000000000 Z
+date: 2025-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -107,20 +107,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '8.0'
-- !ruby/object:Gem::Dependency
-  name: ferrum
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.16'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.16'
 - !ruby/object:Gem::Dependency
   name: puppeteer-ruby
   requirement: !ruby/object:Gem::Requirement
@@ -272,6 +258,7 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
+- bin/rake
 - bin/trmnlp
 - lib/markup/custom_liquid_filters.rb
 - lib/markup/inline_templates_file_system.rb
@@ -299,19 +286,19 @@ files:
 - lib/trmnlp/screen_generator.rb
 - lib/trmnlp/version.rb
 - templates/init/.trmnlp.yml
-- templates/init/bin/dev
+- templates/init/bin/trmnlp
 - templates/init/src/full.liquid
 - templates/init/src/half_horizontal.liquid
 - templates/init/src/half_vertical.liquid
 - templates/init/src/quadrant.liquid
 - templates/init/src/settings.yml
+- templates/init/src/shared.liquid
 - trmnl_preview.gemspec
-- web/public/black-case.jpg
-- web/public/clear-case.jpg
+- web/public/highlight/highlight.min.js
+- web/public/highlight/styles/atom-one-dark.min.css
 - web/public/index.css
 - web/public/index.js
 - web/public/trmnl-component.js
-- web/public/white-case.jpg
 - web/views/index.erb
 - web/views/render_html.erb
 homepage: https://github.com/usetrmnl/trmnlp

data/templates/init/bin/dev

@@ -1,25 +0,0 @@
-#! /bin/bash
-
-if command -v trmnlp &> /dev/null
-then
-    echo "Starting trmnlp..."
-    trmnlp serve
-    exit
-fi
-
-if command -v docker &> /dev/null
-then
-    echo "Running trmnl/trmnlp container..."
-    docker run -p 4567:4567 -v .:/plugin trmnl/trmnlp
-    exit
-fi
-
-echo "Install the trmnl_preview gem:
-
-  gem install trmnl_preview
-
-Or install Docker:
-
-    https://docs.docker.com/get-docker/"
-
-exit 1