Beefy Boxes and Bandwidth Generously Provided by pair Networks
Welcome to the Monastery
 
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.

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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://1007585]
help
Chatterbox?
[LanX]: D : Oberbefehlshaber
[GotToBTru]: yeah, thats the story I remember. some card the President is supposed to carry around at all times
[GotToBTru]: I suppose the actual details about what is necessary to actually do something is kept fuzzy deliberately
[LanX]: the interview was with the guy who designed the process
[LanX]: in the 70s
[GotToBTru]: so the font on the card is probably NOT Comic Sans
[GotToBTru]: that's a relief
[LanX]: Bruce_G._Blair
[choroba]: as in embossed card?

How do I use this? | Other CB clients
Other Users?
Others drinking their drinks and smoking their pipes about the Monastery: (9)
As of 2017-01-20 12:55 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Do you watch meteor showers?




    Results (174 votes). Check out past polls.