Design update

.gitignore

@@ -9,3 +9,6 @@
 
 /gemfiles/*.gemfile.lock
 /gemfiles/.bundle
+
+# This is the debug version of the file and should not be committed.
+lib/better_errors/templates/*.development.css

Rakefile

@@ -1,5 +1,6 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
+require "sassc"
 
 RSpec::Core::RakeTask.new(:test)
 task :default => :test
@@ -36,3 +37,42 @@ namespace :test do
     with_each_gemfile { sh "bundle exec rspec" rescue nil }
   end
 end
+
+namespace :style do
+  desc "Build main.development.css (overrides main.css)"
+  task :develop => [:build] do
+    root_dir = File.dirname(__FILE__)
+    style_dir = "#{root_dir}/style"
+    output_dir = "#{root_dir}/lib/better_errors/templates"
+
+    engine = SassC::Engine.new(
+      File.read("#{style_dir}/main.scss"),
+      filename: "#{style_dir}/main.scss",
+      style: :expanded,
+      line_comments: true,
+      load_paths: [style_dir],
+    )
+    css = engine.render
+    File.open("#{output_dir}/main.development.css", "w") do |f|
+      f.write(css)
+    end
+  end
+
+  desc "Build main.css from the SASS sources"
+  task :build do
+    root_dir = File.dirname(__FILE__)
+    style_dir = "#{root_dir}/style"
+    output_dir = "#{root_dir}/lib/better_errors/templates"
+
+    engine = SassC::Engine.new(
+      File.read("#{style_dir}/main.scss"),
+      filename: "#{style_dir}/main.scss",
+      style: :compressed,
+      load_paths: [style_dir],
+    )
+    css = engine.render
+    File.open("#{output_dir}/main.css", "w") do |f|
+      f.write(css)
+    end
+  end
+end

better_errors.gemspec

@@ -25,6 +25,7 @@ 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.

lib/better_errors/code_formatter/html.rb

@@ -2,7 +2,7 @@ module BetterErrors
   # @private
   class CodeFormatter::HTML < CodeFormatter
     def source_unavailable
-      "<p class='unavailable'>Source is not available</p>"
+      "<p class='code-unavailable'>Source is not available</p>"
     end
 
     def formatted_lines
@@ -15,7 +15,7 @@ def formatted_lines
     def formatted_nums
       each_line_of(highlighted_lines) { |highlight, current_line, str|
         class_name = highlight ? "highlight" : ""
-        sprintf '<span class="%s">%5d</span>', class_name, current_line
+        sprintf '<pre class="%s">%4d</pre>', class_name, current_line
       }
     end
 

lib/better_errors/error_page.rb

@@ -118,7 +118,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: CodeRay.scan(code, :ruby).html(wrap: :span),
         prefilled_input:   prefilled_input,
         prompt:            prompt,
         result:            result

lib/better_errors/repl/basic.rb

@@ -11,7 +11,7 @@ def send_input(str)
 
     private
       def execute(str)
-        "=> #{@binding.eval(str).inspect}\n"
+        "=> #{CGI.escapeHTML(@binding.eval(str).inspect)}\n"
       rescue Exception => e
         "!! #{e.inspect rescue e.class.to_s rescue "Exception"}\n"
       end