ruby-on-rails-4syntax-highlightingredcarpetcoderay

CodeRay style messed up - how to fix


I'm trying to use CodeRay in my project and it seems to be working, however the style and formatting seems to be messed:

Coderay messed up code

Note that I'm using CodeRay in conjunction with Markdown (Redcarpet). I've added both gems in my gemfile and in the app/helpers/application_helper.rb I've added the following:

class CodeRayify < Redcarpet::Render::HTML
    def block_code(code, language)
        CodeRay.scan(code, language).div(:line_numbers => :inline)
    end
end

def markdown(text)
    coderayified = CodeRayify.new(:filter_html => true, :hard_wrap => true)

    language ||= :plaintext

    options = {
        :fenced_code_blocks => true,
        :no_intra_emphasis => false,
        :autolink => true,
        :strikethrough => true,
        :lax_html_blocks => true,
        :superscript => true
    }

    markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
    markdown_to_html.render(text).html_safe
end

Which does work as you can see by the screenshot attached. The problem is the formatting though. Any ideas?


Solution

  • I also noticed the current CSS shipped with the CodeRay repo doesn't respond well on mobile/tablet devise.

    To fix, follow the steps below:

    1. Add this to your CSS:

    /* Displays a scroll bar */

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        margin-top: 10px;
        width: 7px;
        height: 8px;
        background-color: #eee;
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        height: 10px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
    

    2. In your app helper file for CodeRay options, ensure the block_code options :line_numbers are set to :inline, like below:

    class CodeRayify < Redcarpet::Render::HTML

        def block_code(code, language)
            CodeRay.scan(code, language).div(:line_numbers => :inline)
        end
    end