Beefy Boxes and Bandwidth Generously Provided by pair Networks
No such thing as a small change
 
PerlMonks  

Re: CSS Show and Tell: Colored Code

by tobyink (Abbot)
on Dec 06, 2012 at 14:00 UTC ( #1007577=note: print w/ replies, xml ) Need Help??


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>

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'


Comment on Re: CSS Show and Tell: Colored Code
Download Code
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.

      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^2: CSS Show and Tell: Colored Code
by LanX (Canon) on Jan 19, 2013 at 12:47 UTC

Log In?
Username:
Password:

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

How do I use this? | Other CB clients
Other Users?
Others pondering the Monastery: (19)
As of 2014-09-19 14:00 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    How do you remember the number of days in each month?











    Results (138 votes), past polls