Beefy Boxes and Bandwidth Generously Provided by pair Networks
There's more than one way to do things
 
PerlMonks  

comment on

( #3333=superdoc: 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); }); });

In reply to [Free Nodelet Hack] CodeMirror by haukex

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others imbibing at the Monastery: (5)
    As of 2020-08-09 21:32 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?
      Which rocket would you take to Mars?










      Results (55 votes). Check out past polls.

      Notices?