☰

Lazyfoo Highlight Code

Add code highlight to LazyFoo's code snippets in the tutorials section, updated to HLJS 11.6, no jQuery, switchable theme.

  1. // ==UserScript==
  2. // @name        Lazyfoo Highlight Code
  3. // @namespace   codesthings.com
  4. // @match       *://*.lazyfoo.net/tutorials/*
  5. // @version     1.5
  6. // @license MIT
  7. // @require     https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js
  8. // @require     https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/cpp.min.js
  9. // @resource    THEME_DEFAULT https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css
  10. // @resource    THEME_DARK https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css
  11. // @grant       GM_getResourceText
  12. // @grant       GM_addStyle
  13. // @description Add code highlight to LazyFoo's code snippets in the tutorials section, updated to HLJS 11.6, no jQuery, switchable theme.
  14. // ==/UserScript==
  15.  
  16.  
  17. // Highlight JS
  18. var hljs = hljs || null;
  19.  
  20. (function() {
  21.     'use strict';
  22.     const blocks = document.querySelectorAll('div.tutCode');
  23.  
  24.     if (blocks.length) {
  25.         if (typeof GM_getResourceText === 'function') {
  26.             // Change THEME_DARK to THEME_DEFAULT here for light theme.
  27.             const themeCss = GM_getResourceText("THEME_DARK");
  28.             GM_addStyle(themeCss);
  29.         } else {
  30.             document.head.innerHTML += `<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css' />`;
  31.         }
  32.  
  33.         blocks.forEach((block) => {
  34.             block.innerHTML = `<pre><code class="cpp">${block.innerHTML}</code></pre>`;
  35.         });
  36.  
  37.         if (hljs && typeof hljs.highlightAll === 'function') {
  38.             hljs.highlightAll();
  39.         }
  40.     }
  41. })();