CSS Responsive Styles

[hightechweb]

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]

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.