better_errors 2.10.0.beta1 → 2.10.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ae6237f9bcc8bc7bea85082f32a5dff2dfd4ad519f9b5cb23602801c27f3a10
-  data.tar.gz: e74a98ed16de6ce6d2862fe55f7094b1608250bbf51ac98b52e4f558f328dfab
+  metadata.gz: e0902382bac90f4d54634a19663ed03b7aa6d64edd17002f3329c895e2b2784d
+  data.tar.gz: 6228791b815616739067a11405f18b041cf6d21c19013bcbaaf34a1b1bcdfa85
 SHA512:
-  metadata.gz: 53944fa785d9f6dd22bc07db577f6b3a4bfd3b30f4ea87eabcd492358545c629eefb401b0b86936ab87da2b39587f26e85ef99232e18fd6df54d5c6ea8e0f489
-  data.tar.gz: 186f51a6e6146153fbd8a9ebaa419be6db36dce42b52ecaa50ecd48525b2a4181ab0aed0f87b6608d2b9ca67d3f736c44857c6ba8c4a142ca7be022da762531e
+  metadata.gz: dc552c327ab6230dae1fea0100c5fe8a20f9bfc6e63b245ac2eb221cf17d01531ec3ae46ea0b1545881476739d725a0723eacf9448c8a368fc9b7f4eedd8e24f
+  data.tar.gz: ce04e4dd447ff7e789f19d8a0d1cefa8b63e2e00cf3f81321877da3dd343df8a6cb5bc17a09fe21bfaba093900dc2ae41520941ad323d3b96a859c2a0cc023e4

data/.github/workflows/release.yml

@@ -48,10 +48,14 @@ jobs:
       run: |
         bundle exec gem bump better_errors --version ${{ steps.get_version.outputs.version }} --no-commit
 
+    - name: Compile CSS
+      run: |
+        bundle exec rake style:build
+
     - name: Build gem
       run: gem build better_errors.gemspec
 
-    - name: Upload gem to Release
+    - name: Add gem to GitHub Release
       uses: actions/upload-release-asset@v1
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

data/.gitignore

@@ -9,3 +9,7 @@
 
 /gemfiles/*.gemfile.lock
 /gemfiles/.bundle
+
+
+# No CSS is committed. In development, the SCSS is used. The CSS is compiled when building a gem release.
+*.css

data/better_errors.gemspec

@@ -12,9 +12,9 @@ Gem::Specification.new do |s|
   s.homepage      = "https://github.com/BetterErrors/better_errors"
   s.license       = "MIT"
 
-  s.files         = `git ls-files -z`.split("\x0").reject do |f|
-    f.match(%r{^((test|spec|features|feature-screenshots)/|Rakefile)})
-  end
+  s.files         = `git ls-files -z`.split("\x0").reject { |f|
+    f.match(%r{^((test|spec|features|feature-screenshots)/|Rakefile)|\.scss$})
+  } + %w[lib/better_errors/templates/main.css]
 
   s.require_paths = ["lib"]
 
@@ -25,12 +25,13 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rspec-html-matchers"
   s.add_development_dependency "rspec-its"
   s.add_development_dependency "yard"
+  s.add_development_dependency "sassc"
   # kramdown 2.1 requires Ruby 2.3+
   s.add_development_dependency "kramdown", (RUBY_VERSION < '2.3' ? '< 2.0.0' : '> 2.0.0')
   # simplecov and coveralls must not be included here. See the Gemfiles instead.
 
   s.add_dependency "erubi", ">= 1.0.0"
-  s.add_dependency "coderay", ">= 1.0.0"
+  s.add_dependency "rouge", ">= 1.0.0"
   s.add_dependency "rack", ">= 0.9.0"
 
   # optional dependencies:

data/lib/better_errors.rb

@@ -1,6 +1,5 @@
 require "pp"
 require "erubi"
-require "coderay"
 require "uri"
 
 require "better_errors/version"

data/lib/better_errors/code_formatter.rb

@@ -4,14 +4,6 @@ module BetterErrors
     require "better_errors/code_formatter/html"
     require "better_errors/code_formatter/text"
 
-    FILE_TYPES = {
-      ".rb"   => :ruby,
-      ""      => :ruby,
-      ".html" => :html,
-      ".erb"  => :erb,
-      ".haml" => :haml
-    }
-
     attr_reader :filename, :line, :context
 
     def initialize(filename, line, context = 5)
@@ -26,13 +18,21 @@ module BetterErrors
       source_unavailable
     end
 
-    def formatted_code
-      formatted_lines.join
+    def line_range
+      min = [line - context, 1].max
+      max = [line + context, source_lines.count].min
+      min..max
     end
 
-    def coderay_scanner
-      ext = File.extname(filename)
-      FILE_TYPES[ext] || :text
+    def context_lines
+      range = line_range
+      source_lines[(range.begin - 1)..(range.end - 1)] or raise Errno::EINVAL
+    end
+
+    private
+
+    def formatted_code
+      formatted_lines.join
     end
 
     def each_line_of(lines, &blk)
@@ -41,23 +41,12 @@ module BetterErrors
       }
     end
 
-    def highlighted_lines
-      CodeRay.scan(context_lines.join, coderay_scanner).div(wrap: nil).lines
-    end
-
-    def context_lines
-      range = line_range
-      source_lines[(range.begin - 1)..(range.end - 1)] or raise Errno::EINVAL
+    def source
+      @source ||= File.read(filename)
     end
 
     def source_lines
-      @source_lines ||= File.readlines(filename)
-    end
-
-    def line_range
-      min = [line - context, 1].max
-      max = [line + context, source_lines.count].min
-      min..max
+      @source_lines ||= source.lines
     end
   end
 end

data/lib/better_errors/code_formatter/html.rb

@@ -1,3 +1,5 @@
+require "rouge"
+
 module BetterErrors
   # @private
   class CodeFormatter::HTML < CodeFormatter
@@ -20,7 +22,19 @@ module BetterErrors
     end
 
     def formatted_code
-      %{<div class="code_linenums">#{formatted_nums.join}</div><div class="code">#{super}</div>}
+      %{
+        <div class="code_linenums">#{formatted_nums.join}</div>
+        <div class="code"><div class='code-wrapper'>#{super}</div></div>
+      }
+    end
+
+    def rouge_lexer
+      Rouge::Lexer.guess(filename: filename, source: source) { Rouge::Lexers::Ruby }
     end
+
+    def highlighted_lines
+      Rouge::Formatters::HTML.new.format(rouge_lexer.lex(context_lines.join)).lines
+    end
+
   end
 end

data/lib/better_errors/error_page.rb

@@ -1,6 +1,8 @@
 require "cgi"
 require "json"
 require "securerandom"
+require "rouge"
+require "better_errors/error_page_style"
 
 module BetterErrors
   # @private
@@ -157,7 +159,7 @@ module BetterErrors
       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

data/lib/better_errors/error_page_style.rb

@@ -0,0 +1,30 @@
+require "sassc"
+
+module BetterErrors
+  # @private
+  module ErrorPageStyle
+    def self.compiled_css(for_deployment = false)
+      style_dir = File.expand_path("style", File.dirname(__FILE__))
+      style_file = "#{style_dir}/main.scss"
+
+      engine = SassC::Engine.new(
+        File.read(style_file),
+        filename: style_file,
+        style: for_deployment ? :compressed : :expanded,
+        line_comments: !for_deployment,
+        load_paths: [style_dir],
+      )
+      engine.render
+    end
+
+    def self.style_tag(csp_nonce)
+      style_file = File.expand_path("templates/main.css", File.dirname(__FILE__))
+      css = if File.exist?(style_file)
+        File.open(style_file).read
+      else
+        compiled_css(false)
+      end
+      "<style type='text/css' nonce='#{csp_nonce}'>\n#{css}\n</style>"
+    end
+  end
+end

data/lib/better_errors/middleware.rb

@@ -119,8 +119,8 @@ module BetterErrors
           # for older browsers without nonce support.
           # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
           "script-src 'self' 'nonce-#{csp_nonce}' 'unsafe-inline'",
-          # Inline style is required by the syntax highlighter.
-          "style-src 'self' 'unsafe-inline'",
+          "style-src 'self' 'nonce-#{csp_nonce}' 'unsafe-inline'",
+          "img-src data:",
           "connect-src 'self'",
           "navigate-to 'self' #{BetterErrors.editor.scheme}",
         ].join('; '),

data/lib/better_errors/templates/main.erb

@@ -2,731 +2,11 @@
 <html>
 <head>
     <title><%= exception_type %> at <%= request_path %></title>
+    <link rel="icon" href="data:;base64,=" />
 </head>
 <body class="better-errors-javascript-not-loaded">
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
-    <style>
-    /* Basic reset */
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    th, td {
-        vertical-align: top;
-        text-align: left;
-    }
-
-    textarea {
-        resize: none;
-    }
-
-    body {
-        font-size: 10pt;
-    }
-
-    body, td, input, textarea {
-        font-family: helvetica neue, lucida grande, sans-serif;
-        line-height: 1.5;
-        color: #333;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    html {
-        background: #f0f0f5;
-    }
-
-    .clearfix::after{
-        clear: both;
-        content: ".";
-        display: block;
-        height: 0;
-        visibility: hidden;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Basic layout
-     * --------------------------------------------------------------------- */
-
-    /* Small */
-    @media screen and (max-width: 1100px) {
-        html {
-            overflow-y: scroll;
-        }
-
-        body {
-            margin: 0 20px;
-        }
-
-        header.exception {
-            margin: 0 -20px;
-        }
-
-        nav.sidebar {
-            padding: 0;
-            margin: 20px 0;
-        }
-
-        ul.frames {
-            max-height: 200px;
-            overflow: auto;
-        }
-    }
-
-    /* Wide */
-    @media screen and (min-width: 1100px) {
-        header.exception {
-           position: fixed;
-           top: 0;
-           left: 0;
-           right: 0;
-        }
-
-        nav.sidebar,
-        .frame_info {
-            position: fixed;
-            top: 102px;
-            bottom: 0;
-
-            box-sizing: border-box;
-
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-
-        nav.sidebar {
-            width: 40%;
-            left: 20px;
-            top: 122px;
-            bottom: 20px;
-        }
-
-        .frame_info {
-            display: none;
-
-            right: 0;
-            left: 40%;
-
-            padding: 20px;
-            padding-left: 10px;
-            margin-left: 30px;
-        }
-        .frame_info.current {
-            display: block;
-        }
-    }
-
-    nav.sidebar {
-        background: #d3d3da;
-        border-top: solid 3px #a33;
-        border-bottom: solid 3px #a33;
-        border-radius: 4px;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    /* ---------------------------------------------------------------------
-     * Header
-     * --------------------------------------------------------------------- */
-
-    header.exception {
-        padding: 18px 20px;
-
-        height: 66px;
-        min-height: 59px;
-
-        overflow: hidden;
-
-        background-color: #20202a;
-        color: #aaa;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
-        font-weight: 200;
-        box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-
-        -webkit-text-smoothing: antialiased;
-    }
-
-    /* Heading */
-    header.exception .fix-actions {
-        margin-top: .5em;
-    }
-
-    header.exception .fix-actions input[type=submit] {
-        font-weight: bold;
-    }
-
-    header.exception h2 {
-        font-weight: 200;
-        font-size: 11pt;
-    }
-
-    header.exception h2,
-    header.exception p {
-        line-height: 1.5em;
-        overflow: hidden;
-        white-space: pre;
-        text-overflow: ellipsis;
-    }
-
-    header.exception h2 strong {
-        font-weight: 700;
-        color: #d55;
-    }
-
-    header.exception p {
-        font-weight: 200;
-        font-size: 17pt;
-        color: white;
-    }
-
-    header.exception:hover {
-        height: auto;
-        z-index: 2;
-    }
-
-    header.exception:hover h2,
-    header.exception:hover p {
-        padding-right: 20px;
-        overflow-y: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        height: auto;
-        max-height: 7.5em;
-    }
-
-    @media screen and (max-width: 1100px) {
-        header.exception {
-            height: auto;
-        }
-
-        header.exception h2,
-        header.exception p {
-            padding-right: 20px;
-            overflow-y: auto;
-            word-wrap: break-word;
-            height: auto;
-            max-height: 7em;
-        }
-    }
-
-    <%#
-    /* Light theme */
-    header.exception {
-        text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6);
-        background: rgba(200,100,50,0.10);
-        color: #977;
-    }
-    header.exception h2 strong {
-        color: #533;
-    }
-    header.exception p {
-        color: #744;
-    }
-    %>
-
-    /* ---------------------------------------------------------------------
-     * Navigation
-     * --------------------------------------------------------------------- */
-
-    .better-errors-javascript-not-loaded .backtrace .tabs {
-        display: none;
-    }
-
-    nav.tabs {
-        border-bottom: solid 1px #ddd;
-
-        background-color: #eee;
-        text-align: center;
-
-        padding: 6px;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    }
-
-    nav.tabs a {
-        display: inline-block;
-
-        height: 22px;
-        line-height: 22px;
-        padding: 0 10px;
-
-        text-decoration: none;
-        font-size: 8pt;
-        font-weight: bold;
-
-        color: #999;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    nav.tabs a.selected {
-        color: white;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 16px;
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-        text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
-    }
-
-    nav.tabs a.disabled {
-        text-decoration: line-through;
-        text-shadow: none;
-        cursor: default;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Sidebar
-     * --------------------------------------------------------------------- */
-
-    ul.frames {
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    /* Each item */
-    ul.frames li {
-        background-color: #f8f8f8;
-        background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        box-shadow: inset 0 -1px 0 #e2e2e2;
-        padding: 7px 20px;
-
-        cursor: pointer;
-        overflow: hidden;
-    }
-
-    ul.frames .name,
-    ul.frames .location {
-        overflow: hidden;
-        height: 1.5em;
-
-        white-space: nowrap;
-        word-wrap: none;
-        text-overflow: ellipsis;
-    }
-
-    ul.frames .method {
-        color: #966;
-    }
-
-    ul.frames .location {
-        font-size: 0.85em;
-        font-weight: 400;
-        color: #999;
-    }
-
-    ul.frames .line {
-        font-weight: bold;
-    }
-
-    /* Selected frame */
-    ul.frames li.selected {
-        background: #38a;
-        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    ul.frames li.selected .name,
-    ul.frames li.selected .method,
-    ul.frames li.selected .location {
-        color: white;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    ul.frames li.selected .location {
-        opacity: 0.6;
-    }
-
-    /* Iconography */
-    ul.frames li {
-        padding-left: 60px;
-        position: relative;
-    }
-
-    ul.frames li .icon {
-        display: block;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-        border-radius: 15px;
-
-        text-align: center;
-
-        background: white;
-        border: solid 2px #ccc;
-
-        font-size: 9pt;
-        font-weight: 200;
-        font-style: normal;
-
-        position: absolute;
-        top: 14px;
-        left: 20px;
-    }
-
-    ul.frames .icon.application {
-        background: #808090;
-        border-color: #555;
-    }
-
-    ul.frames .icon.application:before {
-        content: 'A';
-        color: white;
-        text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Responsiveness -- flow to single-line mode */
-    @media screen and (max-width: 1100px) {
-        ul.frames li {
-            padding-top: 6px;
-            padding-bottom: 6px;
-            padding-left: 36px;
-            line-height: 1.3;
-        }
-
-        ul.frames li .icon {
-            width: 11px;
-            height: 11px;
-            line-height: 11px;
-
-            top: 7px;
-            left: 10px;
-            font-size: 5pt;
-        }
-
-        ul.frames .name,
-        ul.frames .location {
-            display: inline-block;
-            line-height: 1.3;
-            height: 1.3em;
-        }
-
-        ul.frames .name {
-            margin-right: 10px;
-        }
-    }
-
-    /* ---------------------------------------------------------------------
-     * Monospace
-     * --------------------------------------------------------------------- */
-
-    pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
-        font-family: menlo, lucida console, monospace;
-        font-size: 8pt;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Display area
-     * --------------------------------------------------------------------- */
-
-    p.no-javascript-notice {
-      margin-bottom: 1em;
-      padding: 1em;
-      border: 2px solid #e00;
-    }
-    .better-errors-javascript-loaded .no-javascript-notice {
-        display: none;
-    }
-    .no-inline-style-notice {
-        display: none;
-    }
-
-    .trace_info {
-        background: #fff;
-        padding: 6px;
-        border-radius: 3px;
-        margin-bottom: 2px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
-    }
-
-    .code_block{
-        background: #f1f1f1;
-        border-left: 1px solid #ccc;
-    }
-
-    /* Titlebar */
-    .trace_info .title {
-        background: #f1f1f1;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
-        overflow: hidden;
-        padding: 6px 10px;
-
-        border: solid 1px #ccc;
-        border-bottom: 0;
-
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    }
-
-    .trace_info .title .name,
-    .trace_info .title .location {
-        font-size: 9pt;
-        line-height: 26px;
-        height: 26px;
-        overflow: hidden;
-    }
-
-    .trace_info .title .location {
-        float: left;
-        font-weight: bold;
-        font-size: 10pt;
-    }
-
-    .trace_info .title .location a {
-        color:inherit;
-        text-decoration:none;
-        border-bottom:1px solid #aaaaaa;
-    }
-
-    .trace_info .title .location a:hover {
-        border-color:#666666;
-    }
-
-    .trace_info .title .name {
-        float: right;
-        font-weight: 200;
-    }
-
-    .better-errors-javascript-not-loaded .be-repl {
-        display: none;
-    }
-
-    .code, .be-console, .unavailable {
-        background: #fff;
-        padding: 5px;
-
-        box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .code_linenums{
-        background:#f1f1f1;
-        padding-top:10px;
-        padding-bottom:9px;
-        float:left;
-    }
-
-    .code_linenums span{
-        display:block;
-        padding:0 12px;
-    }
-
-    .code {
-        margin-bottom: -1px;
-        border-top-left-radius:2px;
-        padding: 10px 0;
-        overflow: auto;
-    }
-
-    .code pre{
-        padding-left:12px;
-        min-height:16px;
-    }
-
-    /* Source unavailable */
-    p.unavailable {
-        padding: 20px 0 40px 0;
-        text-align: center;
-        color: #b99;
-        font-weight: bold;
-    }
-
-    p.unavailable:before {
-        content: '\00d7';
-        display: block;
-
-        color: #daa;
-
-        text-align: center;
-        font-size: 40pt;
-        font-weight: normal;
-        margin-bottom: -10px;
-    }
-
-    @-webkit-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @-moz-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-
-    .code .highlight, .code_linenums .highlight {
-        background: rgba(220, 30, 30, 0.1);
-        -webkit-animation: highlight 400ms linear 1;
-        -moz-animation: highlight 400ms linear 1;
-        animation: highlight 400ms linear 1;
-    }
-
-    /* REPL shell */
-    .be-console {
-        padding: 0 1px 10px 1px;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-    }
-
-    .be-console pre {
-        padding: 10px 10px 0 10px;
-        max-height: 400px;
-        overflow-x: none;
-        overflow-y: auto;
-        margin-bottom: -3px;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-    }
-
-    /* .command-line > span + input */
-    .be-console .command-line {
-        display: table;
-        width: 100%;
-    }
-
-    .be-console .command-line span,
-    .be-console .command-line input {
-        display: table-cell;
-    }
-
-    .be-console .command-line span {
-        width: 1%;
-        padding-right: 5px;
-        padding-left: 10px;
-        white-space: pre;
-    }
-
-    .be-console .command-line input {
-        width: 99%;
-    }
-
-    /* Input box */
-    .be-console input,
-    .be-console input:focus {
-        outline: 0;
-        border: 0;
-        padding: 0;
-        background: transparent;
-        margin: 0;
-    }
-
-    /* Hint text */
-    .hint {
-        margin: 15px 0 20px 0;
-        font-size: 8pt;
-        color: #8080a0;
-        padding-left: 20px;
-    }
-    .console-has-been-used .live-console-hint {
-        display: none;
-    }
-    .better-errors-javascript-not-loaded .live-console-hint {
-        display: none;
-    }
-
-    .hint:before {
-        content: '\25b2';
-        margin-right: 5px;
-        opacity: 0.5;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Variable infos
-     * --------------------------------------------------------------------- */
-
-    .sub {
-        padding: 10px 0;
-        margin: 10px 0;
-    }
-
-    .sub h3 {
-        color: #39a;
-        font-size: 1.1em;
-        margin: 10px 0;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-
-        -webkit-font-smoothing: antialiased;
-    }
-
-    .sub .inset {
-        overflow-y: auto;
-    }
-
-    .sub table {
-        table-layout: fixed;
-    }
-
-    .sub table td {
-        border-top: dotted 1px #ddd;
-        padding: 7px 1px;
-    }
-
-    .sub table td.name {
-        width: 150px;
-
-        font-weight: bold;
-        font-size: 0.8em;
-        padding-right: 20px;
-
-        word-wrap: break-word;
-    }
-
-    .sub table td pre {
-        max-height: 15em;
-        overflow-y: auto;
-    }
-
-    .sub table td pre {
-        width: 100%;
-
-        word-wrap: break-word;
-        white-space: normal;
-    }
-
-    /* "(object doesn't support inspect)" */
-    .sub .unsupported {
-      font-family: sans-serif;
-      color: #777;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Scrollbar
-     * --------------------------------------------------------------------- */
-
-    nav.sidebar::-webkit-scrollbar,
-    .inset pre::-webkit-scrollbar,
-    .be-console pre::-webkit-scrollbar,
-    .code::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    .inset pre::-webkit-scrollbar-thumb,
-    .be-console pre::-webkit-scrollbar-thumb,
-    .code::-webkit-scrollbar-thumb {
-        background: #ccc;
-        border-radius: 5px;
-    }
-
-    nav.sidebar::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.0);
-        border-radius: 5px;
-    }
-
-    nav.sidebar:hover::-webkit-scrollbar-thumb {
-        background-color: #999;
-        background: -webkit-linear-gradient(left, #aaa, #999);
-    }
-
-    .be-console pre:hover::-webkit-scrollbar-thumb,
-    .inset pre:hover::-webkit-scrollbar-thumb,
-    .code:hover::-webkit-scrollbar-thumb {
-        background: #888;
-    }
-    </style>
+    <%== ErrorPageStyle.style_tag(csp_nonce) %>
 
     <%# IE8 compatibility crap %>
     <script nonce="<%= csp_nonce %>">
@@ -969,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);

data/lib/better_errors/version.rb

@@ -1,3 +1,4 @@
 module BetterErrors
-  VERSION = "2.10.0.beta1"
+  # This is changed by CI before building a gem for release, but is not committed.
+  VERSION = "2.10.0.beta2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: better_errors
 version: !ruby/object:Gem::Version
-  version: 2.10.0.beta1
+  version: 2.10.0.beta2
 platform: ruby
 authors:
 - Charlie Somerville
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-11 00:00:00.000000000 Z
+date: 2020-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -80,6 +80,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: sassc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: kramdown
   requirement: !ruby/object:Gem::Requirement
@@ -109,7 +123,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 1.0.0
 - !ruby/object:Gem::Dependency
-  name: coderay
+  name: rouge
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -185,6 +199,7 @@ files:
 - lib/better_errors/code_formatter/text.rb
 - lib/better_errors/editor.rb
 - lib/better_errors/error_page.rb
+- lib/better_errors/error_page_style.rb
 - lib/better_errors/exception_extension.rb
 - lib/better_errors/exception_hint.rb
 - lib/better_errors/inspectable_value.rb
@@ -195,6 +210,7 @@ files:
 - lib/better_errors/repl/basic.rb
 - lib/better_errors/repl/pry.rb
 - lib/better_errors/stack_frame.rb
+- lib/better_errors/templates/main.css
 - lib/better_errors/templates/main.erb
 - lib/better_errors/templates/text.erb
 - lib/better_errors/templates/variable_info.erb