Better code styling (back to Rouge)

Gemfile

@@ -8,7 +8,7 @@ gem "rails", "7.1.1"
 
 gem "blazer", "~> 3.0"
 gem "bootsnap", require: false # Reduces boot times through caching; required in config/boot.rb
-gem "commonmarker", ">= 1.0.0.pre11", "< 2"
+gem "commonmarker", "~> 0.23.10", "< 1"
 gem "devise", "~> 4.9"
 gem "good_job", "~> 3.21"
 gem "humanize", "~> 2.5"
@@ -19,6 +19,7 @@ gem "omniauth-rails_csrf_protection", "~> 1.0"
 gem "omniauth-slack-openid"
 gem "pg", "~> 1.5"
 gem "puma", "~> 6.4"
+gem "rouge", "~> 4.2"
 gem "sentry-rails", "~> 5.13"
 gem "sentry-ruby", "~> 5.13"
 gem "slack-ruby-client"

Gemfile.lock

@@ -104,9 +104,7 @@ GEM
       thor (~> 1.0)
     byebug (11.1.3)
     chartkick (5.0.4)
-    commonmarker (1.0.0.pre11-arm64-darwin)
-    commonmarker (1.0.0.pre11-x86_64-darwin)
-    commonmarker (1.0.0.pre11-x86_64-linux)
+    commonmarker (0.23.10)
     concurrent-ruby (1.2.2)
     connection_pool (2.4.1)
     crack (0.4.5)
@@ -319,6 +317,7 @@ GEM
     reverse_markdown (2.1.1)
       nokogiri
     rexml (3.2.6)
+    rouge (4.2.0)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
@@ -468,7 +467,7 @@ DEPENDENCIES
   brakeman (~> 6.0)
   bundler-audit (~> 0.9)
   byebug
-  commonmarker (>= 1.0.0.pre11, < 2)
+  commonmarker (~> 0.23.10, < 1)
   devise (~> 4.9)
   dotenv-rails (~> 2.8)
   erb_lint (~> 0.5)
@@ -485,6 +484,7 @@ DEPENDENCIES
   puma (~> 6.4)
   rack-mini-profiler (~> 3.1)
   rails (= 7.1.1)
+  rouge (~> 4.2)
   rspec-rails (~> 6.0)
   rubocop (~> 1.56)
   rubocop-performance (~> 1.19)

app/assets/stylesheets/application.css

@@ -0,0 +1,2 @@
+/*= require rouge */
+/*= require tailwind */

app/assets/stylesheets/application.tailwind.css

@@ -28,33 +28,33 @@
     @apply px-1 bg-aoc-gray-darkest border border-aoc-gray-darker rounded;
   }
 
-  .code-highlight * {
+  .snippet * {
     @apply last:mb-0
   }
 
-  .code-highlight h1 {
+  .snippet h1 {
     @apply my-4 border-b border-aoc-gray-darker pb-2 font-semibold text-4xl
   }
 
-  .code-highlight h2 {
+  .snippet h2 {
     @apply my-4 border-b border-aoc-gray-darker pb-1.5 font-semibold text-2xl
   }
 
-  .code-highlight h3 {
+  .snippet h3 {
     @apply my-4 font-semibold text-lg
   }
 
-  .code-highlight pre {
+  .snippet pre {
     @apply my-4 relative pt-2 !bg-dark border border-aoc-gray-darker rounded;
   }
 
-  .code-highlight pre::before {
-    @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 capitalize font-semibold;
+  .snippet pre.code-highlighter::before {
+    @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 font-semibold;
 
     content: attr(lang);
   }
 
-  .code-highlight pre code {
+  pre.code-highlighter {
     @apply block w-full p-4 overflow-x-auto scrollbar-chrome text-xs;
   }
 

app/assets/stylesheets/rouge.css.erb

@@ -0,0 +1 @@
+<%= Rouge::Theme.find("molokai").render(scope: ".code-highlighter") %>

app/components/snippets/box_component.html.erb

@@ -7,7 +7,7 @@
     <% end %>
   </div>
 
-  <pre class="code-highlight break-words text-sm whitespace-normal" data-language="<%= @snippet.language %>">
+  <pre class="snippet break-words text-sm whitespace-normal" data-language="<%= @snippet.language %>">
     <%= raw render_markdown @snippet.code, default_language: @snippet.language %>
   </pre>
 

app/helpers/application_helper.rb

@@ -16,19 +16,23 @@ def messages_sanitizer(text)
     sanitize(text, tags: %w[b em del span sub sup], attributes: %w[style])
   end
 
-  DEFAULT_THEME = "base16-ocean.dark"
-
   def render_markdown(commonmarkdown, default_language: nil)
-    config = {}
+    ast = CommonMarker.render_doc(commonmarkdown)
+    ast.walk do |node|
+      next unless node.type == :code_block
 
-    config[:options] = {}
-    config[:options][:parse] = { default_info_string: default_language }.compact
-    config[:options][:render] = { escape: true, github_pre_lang: true }
+      language = node.fence_info.presence || default_language
+      lexer = ::Rouge::Lexer.find_fancy(language) || ::Rouge::Lexers::PlainText.new
 
-    config[:plugins] = {
-      syntax_highlighter: { theme: DEFAULT_THEME }
-    }
+      formatter = Rouge::Formatters::HTML.new
+      code_html = formatter.format(lexer.lex(node.string_content))
+      html = %(<pre class="code-highlighter" lang="#{lexer.class.title}">#{code_html}</pre>)
+      new_node = ::CommonMarker::Node.new(:html)
+      new_node.string_content = html
 
-    Commonmarker.to_html(commonmarkdown, **config)
+      node.insert_before(new_node)
+      node.delete
+    end
+    ast.to_html(:UNSAFE)
   end
 end

app/views/layouts/application.html.erb

@@ -8,7 +8,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>