in reply to CSS Show and Tell: Colored Code

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'

Replies are listed 'Best First'.
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]

      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]

      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
[reply]

In Section Perl Monks Discussion