Code highlighting

The following button toggles between the light and dark schemes on this page:

  1. Check that the code below is clearly highlighted in the light scheme.

  2. Show the dark color scheme using the above button.

  3. Check that the code below is clearly highlighted in the dark scheme.

  4. Add a custom scheme that makes a visible difference, e.g.:

    $nav-width: 400px;
    

    Update _config.yml to use the custom scheme.

  5. Check that the code below is clearly highlighted in the custom scheme.

  6. Change the custom scheme to be based on the dark scheme by:

    @import "./color_schemes/dark";
    $nav-width: 400px;
    
  7. Check that the code below is clearly highlighted in the customized dark scheme.

An example of Ruby code:

def power(x,n)
  result = 1
  while n.nonzero?
    if n[0].nonzero?
      result *= x
      n -= 1
    end
    x *= x
    n /= 2
  end
  return result
end

def f(x)
  Math.sqrt(x.abs) + 5*x ** 3
end

(0...11).collect{ gets.to_i }.reverse.each do |x|
  y = f(x)
  puts "#{x} #{y.infinite? ? 'TOO LARGE' : y}"
end
# Map color names to short hex
COLORS = { :black   => "000",
           :red     => "f00",
           :green   => "0f0",
           :yellow  => "ff0",
           :blue    => "00f",
           :magenta => "f0f",
           :cyan    => "0ff",
           :white   => "fff" }

class String
  COLORS.each do |color,code|
    define_method "in_#{color}" do
      "<span style=\"color: ##{code}\">#{self}</span>"
    end
  end
end