I'm trying to use CodeRay in my project and it seems to be working, however the style and formatting seems to be messed:
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?
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