Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl Monk, Perl Meditation
 
PerlMonks  

[Free Nodelet Hack] CodeMirror

by haukex (Bishop)
on May 03, 2020 at 09:48 UTC ( #11116375=monkdiscuss: print w/replies, xml ) Need Help??

You need to be logged in, then enable the Free Nodelet in your Nodelet Settings, turn on the option "Code Wrapping Off" in your Display Settings, and in your Free Nodelet Settings, paste the following, and all textareas and code blocks will become CodeMirror editors with syntax highlighting, line numbers, etc. For code blocks, the syntax highlighter is Perl (which doesn't appear to mess up the syntax highlighting on non-Perl source too much), and for text areas, the syntax highlighting is HTML, with support for JavaScript in <script> tags and CSS in <style> tags, as well as for Perl in <c> tags (not <code> tags for now, because those are actually valid HTML5 tags; I'm open for suggestions otherwise).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/co +demirror/5.53.2/codemirror.min.css" integrity="sha256-vZ3SaLOjnKO/gGvcUWegySoDU6ff33CS5i9ot8J9Czk=" cros +sorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +codemirror.min.js" integrity="sha256-sRwcFCKzBvYiAJfddXlx1Ld5+hAxpYzCM+drX/GHMKE=" cros +sorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +mode/xml/xml.min.js" integrity="sha256-Lfk8z6WUsBN6YiCaMpH6bxBHyRqkPK4O2QbQHFNUS40=" cros +sorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +mode/javascript/javascript.min.js" integrity="sha256-tnhIfKT2keR1i4Y7lQL70BBfwnxp10ywUpnXjSjIlH4=" cros +sorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +mode/css/css.min.js" integrity="sha256-Np6VKUByekB6pozOOgM2TcmhyGX46hnWr9TpJbUXpyo=" cros +sorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +mode/htmlmixed/htmlmixed.min.js" integrity="sha256-9Dta/idKg17o/o0a3PEsL6JjkYvijj9UMh3Z86HhUcg=" cros +sorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/ +mode/perl/perl.min.js" integrity="sha256-fQeGcgwNMEHlEqr9CCAoDsorVyJXm1mDMq1E/rB1wiQ=" cros +sorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <script src="/?node_id=11116375;displaytype=displaycode;part=2" type="text/javascript"></script>

(If you've already got jQuery loaded from another nodelet hack, you don't need to put that <script> tag twice, of course.)

Note: If something goes wrong in your browser, and suddenly the text areas break, you need to disable JavaScript to be able to edit your Free Nodelet to disable this hack. And of course let me know, with OS and browser version, and best would be the error messages from your browser's JS console too.

Since this code isn't particularly long, if you'd like to customize any of the CodeMirror settings (like indentation), you can also copy the below code into your Free Nodelet directly (inside <script> tags, and omit the final <script> tag above).

There is support for CodeMirror Themes: add the desired stylesheet to the Free Nodelet (e.g. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/theme/lesser-dark.min.css" integrity="sha256-kRDm75ZpAk6HEGxwszCLc7vt79azRsrfybbL4llVXBw=" crossorigin="anonymous" />) and then add <script> CM_THEME="lesser-dark"; </script>.

I've created a Gist to version-control this code. I'll consider this particular node a "living document", as in I'm not going to add an "Updated" tag every time I make a change - if you want the version history, see the Gist.

"use strict"; $(function () { $("<style type='text/css'> .CodeMirror { border: 1px solid lightgr +ey; height: auto; resize: both; } </style>") .appendTo("body"); var opts = { lineNumbers: true, indentWithTabs: true, tabSize: 4, indentUni +t: 4, viewportMargin: Infinity, lineWrapping: true, mode: { name: "htmlmixed", // text/html tags: { style: [ ["type", /^text\/(x-)?scss$/, "text/x-scss"], [null, null, "css"] ], script: [[null, null, "text/javascript"]], c: [[null, null, "text/x-perl"]] } } }; if ( window["CM_THEME"] ) opts.theme = window.CM_THEME; var opts_codeblock = JSON.parse(JSON.stringify(opts)); // deep cop +y opts_codeblock['readOnly'] = true; opts_codeblock['mode'] = 'text/x-perl'; $('textarea').each(function () { var myCodeMirror = CodeMirror.fromTextArea(this, opts); }); $('.codeblock:has(.codetext)').each(function () { var div = this; var text = $(div).text().trimEnd(); var myCodeMirror = CodeMirror( function(elt) { div.parentNode.replaceChild(elt, div); }, opts_codeblock); myCodeMirror.setValue(text); }); });

Log In?
Username:
Password:

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

How do I use this? | Other CB clients
Other Users?
Others cooling their heels in the Monastery: (4)
As of 2020-08-05 16:17 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Which rocket would you take to Mars?










    Results (36 votes). Check out past polls.

    Notices?