Fix syntax highlighting of console commands

Author: RobinDaugherty

lib/better_errors/error_page.rb

@@ -1,6 +1,7 @@
 require "cgi"
 require "json"
 require "securerandom"
+require "rouge"
 require "better_errors/error_page_style"
 
 module BetterErrors
@@ -158,7 +159,7 @@ def eval_and_respond(index, code)
       result, prompt, prefilled_input = @repls[index].send_input(code)
 
       {
-        highlighted_input: CodeRay.scan(code, :ruby).div(wrap: nil),
+        highlighted_input: Rouge::Formatters::HTML.new.format(Rouge::Lexers::Ruby.lex(code)),
         prefilled_input:   prefilled_input,
         prompt:            prompt,
         result:            result

lib/better_errors/style/main.scss

@@ -507,13 +507,20 @@ p.no-javascript-notice {
     padding:0 12px;
 }
 
-.code {
-    @import "syntax_highlighting";
+.code, .be-console .syntax-highlighted {
+    text-shadow: none;
 
+    @import "syntax_highlighting";
+}
+.code {
+    // For now, the syntax-highlighted console only supports light mode.
+    // Once the entire page has a dark theme, this should change.
     @media (prefers-color-scheme: dark) {
         @import "syntax_highlighting_dark";
     }
+}
 
+.code {
     margin-bottom: -1px;
     border-top-left-radius:2px;
     padding: 10px 0;

lib/better_errors/templates/main.erb

@@ -249,7 +249,7 @@
                 self.writeOutput(response.error + "\n");
             }
             self.writeOutput(self._prompt + " ");
-            self.writeRawOutput(response.highlighted_input + "\n");
+            self.writeRawOutput("<span class='syntax-highlighted'>" + response.highlighted_input + "</span>\n");
             self.writeOutput(response.result);
             self.setPrompt(response.prompt);
             self.setInput(response.prefilled_input);