Here's a quick way to add syntax highlighting to code blocks in the monastery:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hi
+ghlight.js/11.7.0/styles/base16/one-light.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.
+0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.
+0/languages/perl.min.js"></script>
<script>
window.addEventListener( "DOMContentLoaded", ( event ) => {
  hljs.configure( {
    cssSelector: '.codeblock .codetext font',
    languages:   new Array( 'perl', 'html', 'css', 'xml', 'json', 'yam
+l', 'diff' ),
  } );
  hljs.highlightAll();

  /* If you use the free nodelet for only Javascript/CSS,
   * and not as a display area, then you can uncomment
   * the next line of Javascript.
   */
  // document.getElementById( 'Free_Nodelet' ).display.style = 'none';
} );
</script>
<style>
.codeblock .codetext font {
  white-space: pre;
  display: block;
  padding: 0.5rem;
  margin: 0.5rem 1rem 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: 0.125rem;
}
</style>

[download]

You may want to double-check the CSS selector used because I think this may differ based on other settings you've chosen.

Also, you may wish to choose a different colour scheme. highlight.js (the syntax highlighter used) comes with a huge variety of colour schemes. Scroll down to the bottom of this page to find URLs for other options. (And previews are here.)

Hire me at Toby Ink Ltd or Join my OnlyFans

Replies are listed 'Best First'.
Re: Free Nodelet hack for syntax highlighting
by Discipulus (Canon) on Mar 27, 2023 at 10:00 UTC
    Hello and thanks!,

    is this intended to be used inside On-Site CSS Markup in profile settings -> Stylesheet Settings ? If yes what to put inside: Link to External CSS stylesheet ? ..infact I blindly tried some variation but without luck.

    PS ..I misread, but no luck also with Free Nodelet Settings

    L*

    PPS thank to Corion: Removing the font from cssSelector: '.codeblock .codetext font', makes it work for me

    There are no rules, there are no thumbs..
    Reinvent the wheel, then learn The Wheel; may be one day you reinvent one of THE WHEELS.
[reply]
[d/l]
[select]
[reply]
Re: Free Nodelet hack for syntax highlighting
by cavac (Prior) on Mar 28, 2023 at 14:45 UTC

    Another variant that might be useful, especially for copy&paste of posted code is just turning the code blocks into textarea form fields:

    <script>
window.addEventListener( "DOMContentLoaded", ( event ) => {
  document.querySelectorAll('.codeblock .codetext font').forEach(funct
+ion (currentValue, currentIndex, listObj) {
    currentValue.innerHTML = '<textarea class="blockofcode">' + curren
+tValue.innerHTML + '</textarea>';
  });
} );
</script>

    [download]

    PerlMonks XP is useless? Not anymore: XPD - Do more with your PerlMonks XP
[reply]
[d/l]

Back to Perl Monks Discussion