comment on

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

(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);
    });
});
[download]

In reply to [Free Nodelet Hack] CodeMirror by haukex

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


good chemistry is complicated, and a little bit messy -LW
	PerlMonks