search

rubychan / coderay

Fast and easy syntax highlighting for selected languages, written in Ruby.
http://coderay.rubychan.de/
Other
846 stars 115 forks source link

CSS Responsive Styles #196

Open hightechweb opened 8 years ago

hightechweb commented 8 years ago

Hi All,

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

To fix, follow the steps below:

  1. Add this to your CSS:

/* Wraps the pre element / pre { white-space: pre-wrap; / css-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-space: -pre-wrap; / Opera 4-6 / white-space: -o-pre-wrap; / Opera 7 / word-wrap: break-word; / Internet Explorer 5.5+ */ }

/* 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); }

  1. 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

korny commented 8 years ago

Wrapping doesn't work with the table style, since the numbers are separate from the code. Also, I don't think automatic wrapping makes code readable – I actually prefer scrolling horizontally on a small screen.

To make this work, the table style needs to be rewritten, which is a bit more work.