Highlight at rendering time too

Gemfile.lock

@@ -132,11 +132,7 @@ PATH
   remote: /Users/jorge/Work/jorgemanrubia/actiontext-lexical
   specs:
     actiontext-lexical (0.1.0)
-      capybara
-      cuprite
-      image_processing
       rails (>= 8.0.2)
-      selenium-webdriver
 
 GEM
   remote: https://rubygems.org/
@@ -173,9 +169,6 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    cuprite (0.17)
-      capybara (~> 3.0)
-      ferrum (~> 0.17.0)
     date (3.4.1)
     debug (1.10.0)
       irb (~> 1.10)
@@ -198,12 +191,6 @@ GEM
       net-http (>= 0.5.0)
     faraday-retry (2.3.1)
       faraday (~> 2.0)
-    ferrum (0.17.1)
-      addressable (~> 2.5)
-      base64 (~> 0.2)
-      concurrent-ruby (~> 1.1)
-      webrick (~> 1.7)
-      websocket-driver (~> 0.7)
     ffi (1.17.2)
     ffi (1.17.2-arm64-darwin)
     ffi (1.17.2-x86_64-darwin)
@@ -456,7 +443,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.9.1)
     websocket (1.2.11)
     websocket-driver (0.7.7)
       base64

app/assets/stylesheets/rich-text-content.css

@@ -132,6 +132,7 @@
     /* Code */
     code[data-language] {
       display: block;
+      white-space: pre;
     }
 
     code:not([data-language]) {
@@ -159,37 +160,77 @@
     }
 
     /* Syntax token colors */
-    .code-token__attr {
+    code[data-language] {
-      color: #b000b5; /* violet-ish for keywords and attributes */
+      /* Keywords and attributes */
-    }
+      .code-token__attr,
+      .token.atrule,
+      .token.attr,
+      .token.keyword {
+        color: #d73a49;
+      }
 
-    .code-token__property {
+      /* Constants, booleans, numbers, properties, tags */
-      color: #007acc; /* cool blue for numbers, booleans, constants, etc. */
+      .code-token__property,
-    }
+      .token.boolean,
+      .token.constant,
+      .token.deleted,
+      .token.number,
+      .token.property,
+      .token.symbol,
+      .token.tag {
+        color: #005cc5;
+      }
 
-    .code-token__selector {
+      /* Strings, selectors, and built-in constructs */
-      color: #22863a; /* green for strings, selectors, inserted, etc. */
+      .code-token__selector,
-    }
+      .token.builtin,
+      .token.char,
+      .token.inserted,
+      .token.selector,
+      .token.string {
+        color: #032f62;
+      }
 
-    .code-token__comment {
+      /* Comments and meta information */
-      color: #90a4ae; /* soft gray-blue for comments */
+      .code-token__comment,
-      font-style: italic;
+      .token.cdata,
-    }
+      .token.comment,
+      .token.doctype,
+      .token.prolog {
+        color: #6a737d;
+        font-style: italic;
+      }
 
-    .code-token__operator {
+      /* Operators and symbolic entities */
-      color: #d73a49; /* red for operators, URLs, etc. */
+      .code-token__operator,
-    }
+      .token.entity,
+      .token.operator,
+      .token.url {
+        color: #d73a49;
+      }
 
-    .code-token__function {
+      /* Functions and class names */
-      color: #005cc5; /* bold blue for function and class names */
+      .code-token__function,
-    }
+      .token.class,
+      .token.class-name,
+      .token.function {
+        color: #6f42c1;
+      }
 
-    .code-token__variable {
+      /* Variables, regex, namespaces, important */
-      color: #e36209; /* orange for variables, important things */
+      .code-token__variable,
-    }
+      .token.important,
+      .token.namespace,
+      .token.regex,
+      .token.variable {
+        color: #e36209;
+      }
 
-    .code-token__punctuation {
+      /* Punctuation */
-      color: #607d8b; /* muted blue-gray for punctuation */
+      .code-token__punctuation,
+      .token.punctuation {
+        color: #24292e;
+      }
     }
   }
 }

app/javascript/controllers/syntax_highlight_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+import { highlightAll } from "actiontext-lexical"
+
+export default class extends Controller {
+  connect() {
+    highlightAll()
+  }
+}

app/views/cards/container/_title.html.erb

@@ -4,7 +4,7 @@
       <h1 class="card__title flex align-start gap-half">
         <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link" %>
       </h1>
-      <div class="card__description rich-text-content margin-block-half rich-text-content">
+      <div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight">
         <%= card.description %>
       </div>
     </div>