HTMLDebug formatter with title tags showing the token type and value. (#2261)

* add Rouge::Formatters::HTMLDebug

* use HTMLDebug formatter in the visual spec

---------

Co-authored-by: jneen <[email protected]>

Author: jneen

lib/rouge.rb

@@ -94,6 +94,7 @@ def eager_load!
 require_relative 'rouge/formatters/html_line_highlighter'
 require_relative 'rouge/formatters/html_line_table'
 require_relative 'rouge/formatters/html_inline'
+require_relative 'rouge/formatters/html_debug'
 require_relative 'rouge/formatters/terminal256'
 require_relative 'rouge/formatters/terminal_truecolor'
 require_relative 'rouge/formatters/tex'

lib/rouge/formatters/html_debug.rb

@@ -0,0 +1,16 @@
+module Rouge
+  module Formatters
+    class HTMLDebug < HTML
+      tag 'html_debug'
+
+      def safe_span(tok, safe_val)
+        safer_val = safe_val.gsub('"', '&quot;')
+
+        title = "#{tok.qualname}(#{safer_val})"
+        shortname = tok.shortname
+
+        %(<span title="#{title}" class="#{shortname}">#{safe_val}</span>)
+      end
+    end
+  end
+end

spec/visual/app.rb

@@ -37,7 +37,7 @@ def setup_formatter(params)
     # base HTML formatter
     formatter = inline ?
                   Rouge::Formatters::HTMLInline.new(@theme) :
-                  Rouge::Formatters::HTML.new
+                  Rouge::Formatters::HTMLDebug.new
 
     if line_numbers
       formatter = line_table ?