Beefy Boxes and Bandwidth Generously Provided by pair Networks
We don't bite newbies here... much
 
PerlMonks  

CSS Show and Tell: Colored Code

by frozenwithjoy (Curate)
on Dec 06, 2012 at 03:44 UTC ( #1007451=monkdiscuss: print w/ replies, xml ) Need Help??

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%; } }

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
Re: CSS Show and Tell: Colored Code
by jdporter (Canon) 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.
      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.

        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.

Re: CSS Show and Tell: Colored Code (tag your themes, theme design tool)
by Anonymous Monk on Dec 06, 2012 at 13:35 UTC
Re: CSS Show and Tell: Colored Code
by tobyink (Abbot) 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>

    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'

      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.

        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'

        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>

        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'
Re: CSS Show and Tell: Colored Code
by Tux (Monsignor) on Jan 28, 2013 at 14:00 UTC

    Today I added max-width to prevent overly wide code snippets causing unwanted scrollbars:


    Enjoy, Have FUN! H.Merijn
      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.

        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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://1007451]
Approved by Old_Gray_Bear
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others musing on the Monastery: (5)
As of 2014-12-27 11:56 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    Is guessing a good strategy for surviving in the IT business?





    Results (177 votes), past polls