CSS Show and Tell: Colored Code

It may not be for everyone, but the way inline code and code blocks are displayed with a border and distinct background color on many sites really helps me when reading text interspersed with code. After reading Repainting the Monastery the other day, I decided to spend an evening learning some basic CSS so that I could make my own PerlMonks experience more pleasant.

Below is the modest CSS snippet I'm currently testing out. I also put it up as a GitHub gist so that I can point to it from Display Settings (for anyone that doesn't know where to add CSS code or point to external CSS links).

tt.codetext,
tt.inlinecode {
    border: 1px solid gray;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Mensch,Menlo,Monaco,Consolas,"Courier New",monospace;
    white-space: pre;
    color: black;
    background-color: #FFF4F4;
    word-wrap: break-word;
}

tt.codetext {
    display: block;
    margin-right: 5px;
    padding: 4px 4px 4px 4px;
    font-size: 100%;
    line-height: 13px;
}

tt.inlinecode {
    padding: 2px 1px 2px 1px;
    font-size: 60%;
    line-height: 15px;
}

@media screen and (max-device-width:480px) {
    tt.inlinecode {
        font-size: 100%;
    }
}
[download]

I use PM's red theme, so I gave my code blocks a faint red color to keep with the theme; however, this background color can easily be changed by adjusting background-color: #FFF4F4;. There are a couple other things I'm debating, including whether I prefer it without word-wrap: break-word;, but I figured I'd post it here in hopes that someone might find it useful and that other people might also share any nice CSS customizations they have done.

On the theme of sharing... If there are many people with custom PerlMonks CSS, it might be nice to have a node dedicated to snippets or external links to supplement the primary themes that are available in Display Settings. This might help quench some people's thirsts for a 'repainted' monastery, without actually having to do any real painting.

EDIT: I posted screenshots of how it looks on my screen with and without this CSS.

EDIT #2: Added a bit so that things look as expected when viewing PM from my phone.

Comment on CSS Show and Tell: Colored Code Select or Download Code

Replies are listed 'Best First'.
Re: CSS Show and Tell: Colored Code by jdporter (Paladin) on Dec 06, 2012 at 04:32 UTC
I also put it up as a GitHub gist so that I can point to it from Display Settings Fine, if you want to, but you don't need to. You can use the 'download' link of that code block. Behold! I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.	[reply] [d/l]
Re^2: CSS Show and Tell: Colored Code by frozenwithjoy (Priest) on Dec 06, 2012 at 04:39 UTC
Ah ya, I put it up mainly to test out linking to an external CSS stylesheet in Display Settings and for version control. EDIT: Apparently, GitHub sends raw files as `text/plain`, which causes problems for Firefox. However, it is working for Chrome and Safari.	[reply] [d/l]
Re^3: CSS Show and Tell: Colored Code by jdporter (Paladin) on Dec 06, 2012 at 17:40 UTC
I put it up mainly to test out linking to an external CSS stylesheet I realize that. But you can link to an external stylesheet even if it's being served by perlmonks.	[reply]
Re: CSS Show and Tell: Colored Code by tobyink (Canon) on Dec 06, 2012 at 14:00 UTC
I can beat that. Add the following to your Free Nodelet HTML (see Free Nodelet Settings)... <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/ja +vascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.j +s" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushP +erl.js" type="text/javascript"></script> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEcl +ipse.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() { $('p.code').each(function (i, c) { var $code = $(c).find('tt.codetext').text(); var $dl = $(c).find('span.embed-code-dl'); var $pre = '<pre class="brush: perl; toolbar: false;">' + $('<div/>').text($code).html() + '</pre>'; $(c).after($dl); $(c).replaceWith($pre); }); SyntaxHighlighter.all(); }); </script> [download] Make sure that your Free Nodelet is visible on Nodelet Settings, then... holy crap... syntax highlighting for all code blocks! Caveat: it assumes that all code blocks should use Perl syntax highlighting. Bonus points for anyone crazy enough to attempt content sniffing to determine the correct syntax highlighting style. `perl -E'sub Monkey::do{say$_,for@_,do{($monkey=[caller(0)]->[3])=~s{::}{ }and$monkey}}"Monkey say"->Monkey::do'`	[reply] [d/l]
Re^2: CSS Show and Tell: Colored Code by Anonymous Monk on Dec 06, 2012 at 14:21 UTC
Bonus points for anyone crazy enough to attempt content sniffing to determine the correct syntax highlighting style. Not sure, but I think CodeMirror might support that. Knowledge of CodeMirror courtesy of Farabi, a modern web-based Perl editor that runs inside your favorite browser.	[reply]
Re^3: CSS Show and Tell: Colored Code by tobyink (Canon) on Dec 06, 2012 at 22:48 UTC
OK, here's the CodeMirror magic. You're right; it does sniff the content. The code below loads Perl and HTML/XML syntax highlighting, including support for embedded CSS and Javascript. These seem to be the most commonly used syntaxes on PerlMonks. 'Tis awesome. Think I'm going to keep this in my Free Nodelet. <link rel="stylesheet" href="http://buzzword.org.uk/2012/codemirror-2. +36/lib/codemirror.css" type="text/css" media="all" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/ja +vascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/lib/codemirro +r.js" type="text/javascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/mode/perl/per +l.js" type="text/javascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/mode/xml/xml. +js" type="text/javascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/mode/css/css. +js" type="text/javascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/mode/javascri +pt/javascript.js" type="text/javascript"></script> <script src="http://buzzword.org.uk/2012/codemirror-2.36/mode/htmlmixe +d/htmlmixed.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('p.code').each(function (i, c) { var $code = $(c).find('tt.codetext').text().replace(/\u00a0/g, +' '); var $dl = $(c).find('span.embed-code-dl'); var $pre = $( '<textarea class="CodeMirror">' + $('<div/>').text($code).html().replace(/\s+$/,'') + '</textarea>' ); if ($dl.html()) $(c).after( '<div style="text-align:right"><small>' + $dl.html() + "</small></div>" ); $(c).replaceWith($pre); CodeMirror.fromTextArea($pre.get(0), { lineNumbers: true, readOnly: true, matchBrackets: true, lineWrapping: true }); }); }); </script> [download] Note that you also need the "Auto Code Wrapping" setting turned on in Display Settings for this script to work. Updated 2012-08-12: script now replaces non-breaking spaces with normal spaces; added above note about auto code wrapping setting. `perl -E'sub Monkey::do{say$_,for@_,do{($monkey=[caller(0)]->[3])=~s{::}{ }and$monkey}}"Monkey say"->Monkey::do'`	[reply] [d/l]
Re^3: CSS Show and Tell: Colored Code by tobyink (Canon) on Dec 06, 2012 at 14:27 UTC
When I think CodeMirror, I think `<textarea>` - i.e. input. But hell, I'm already rewriting PerlMonks' `<p class="code">` tags into `<pre>` so CodeMirror ought to be doable. `perl -E'sub Monkey::do{say$_,for@_,do{($monkey=[caller(0)]->[3])=~s{::}{ }and$monkey}}"Monkey say"->Monkey::do'`	[reply] [d/l] [select]
Re^2: CSS Show and Tell: Colored Code by LanX (Saint) on Jan 19, 2013 at 12:47 UTC
for completeness: see also (Client side) Perl Syntax Highlighter Free Nodelet hack: Syntax colouring Cheers Rolf	[reply]
Re: CSS Show and Tell: Colored Code (tag your themes, theme design tool) by Anonymous Monk on Dec 06, 2012 at 13:35 UTC
On the theme of sharing... If there are many people with custom PerlMonks CSS, it might be nice to have a node dedicated to snippets or external links to supplement the primary themes that are available in Display Settings. This might help quench some people's thirsts for a 'repainted' monastery, without actually having to do any real painting. I linked it!:P themes for Anonymous Monk or try out themes without changing display settings, Based on PerlMonks CSS HOWTO, PerlMonks CSS Examples, User CSS Repository, Ok, I didn't link PerlMonks CSS Examples I suppose we could add "{pmcss-theme}" to the title so you could ?node_id=3989;HIT={pmcss-theme} to find them easier, but I already linked all of them :) Ok, I found a few new ones with ?node_id=3989;BIT=.reply-body Re^2: <readmore> for [Anonymous Monk] renders with a background, how about only an outline?, Re^2: Site facelift? Although whats really missing is a comprehensive list of live-use perlmonks css targets, something generated from the perlmonks codebase or a list of notable nodes like SOPW/RAT/FPChat	[reply]
Re^2: CSS Show and Tell: Colored Code (tag your themes, theme design tool) by Anonymous Monk on Dec 06, 2012 at 13:37 UTC
Forgot Purple & Green PM Theme	[reply]
Re: CSS Show and Tell: Colored Code by Tux (Canon) on Jan 28, 2013 at 14:00 UTC
Today I added `max-width` to prevent overly wide code snippets causing unwanted scrollbars: Read more... (1406 Bytes) Enjoy, Have FUN! H.Merijn	[reply] [d/l] [select]
Re^2: CSS Show and Tell: Colored Code by BrowserUk (Patriarch) on Jan 28, 2013 at 14:52 UTC
Today I added max-width to prevent overly wide code snippets causing unwanted scrollbars: If the content is overly wide; why are the scrollbars "unwanted"? How do you get to view the right hand side if you do away with them? With the rise and rise of 'Social' network sites: 'Computers are making people easier to use everyday' Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error. "Science is about questioning the status quo. Questioning authority". In the absence of evidence, opinion is indistinguishable from prejudice.	[reply]
Re^3: CSS Show and Tell: Colored Code by Tux (Canon) on Jan 28, 2013 at 15:18 UTC
OK, "unwanted" is maybe not the best choice of wording. With my desktop being two 1920x1200 24" monitors, my first "need" with websites is to use 100% of the available width so I do not have these silly white edges. So I change a lot of fixed with garbage designed for 1980 devices to use `100%` instead of `640px`. HTTP::Proxy to the rescue. I just measured my Opera to have a current size of 1530px in width. When I want the code snippets in the threads to "fit" left of the right bar (from which I indeed block some content), I need to restrict the size. Not wanting the scrollbar actually means I don't want the need for the scrollbar, as then the other elements get scrolled out, e.g. the (--) and (*)++ radio buttons. Enjoy, Have FUN! H.Merijn	[reply] [d/l] [select]

Back to Perl Monks Discussion