Beefy Boxes and Bandwidth Generously Provided by pair Networks
XP is just a number
 
PerlMonks  

Re^2: CSS Show and Tell: Colored Code

by Anonymous Monk
on Dec 06, 2012 at 14:21 UTC ( #1007585=note: print w/ replies, xml ) Need Help??


in reply to Re: CSS Show and Tell: Colored Code
in thread CSS Show and Tell: Colored Code

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.


Comment on Re^2: CSS Show and Tell: Colored Code
Re^3: CSS Show and Tell: Colored Code
by tobyink (Abbot) 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'
Re^3: CSS Show and Tell: Colored Code
by tobyink (Abbot) 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>

    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'

Log In?
Username:
Password:

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

How do I use this? | Other CB clients
Other Users?
Others imbibing at the Monastery: (12)
As of 2014-10-23 21:20 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    For retirement, I am banking on:










    Results (129 votes), past polls