Free Nodelet hack for syntax highlighting

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

Comment on Free Nodelet hack for syntax highlighting Download Code

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]
Re^2: Free Nodelet hack for syntax highlighting by tobyink (Canon) on Mar 27, 2023 at 10:53 UTC
You need to paste the code into Free Nodelet Settings and then make sure the Free Nodelet is enabled at Nodelet Settings by setting its order to be non-zero. Hire me at Toby Ink Ltd or Join my OnlyFans	[reply]
Re: Free Nodelet hack for syntax highlighting by cavac (Parson) 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]