Improving snippets highlight of forum

General Usage
1

For. discourse.julialang.org

seems improve a little.

need inject a js script

if your browser are chrome or edge , you can use tampermonkey
if you use Safari , you can use use Userscripts

screenshot_1209
screenshot_12091007×660 58.8 KB

copy this snippet , save as. js file

// ==UserScript==
// @name         discourse.julialang hightlighter -2
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Add syntax highlight  
// // @author       Johnatan Dias
// @match        https://discourse.julialang.org/**
// @grant        none
// ==/UserScript==
 
/*global hljs: true */
 
(function () {
  'use strict';
 
  const ENABLE_DEBUG = false;
  const styl1='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/codepen-embed.min.css'
  const styl2='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css'
  const styl3='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css'
  const styl4='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css'
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = styl4;
  document.body.appendChild(style);
    
   const  sc1='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia.min.js'
   const  sc2='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'
   const  sc3='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia-repl.min.js'
   
  const script = document.createElement('script');
  script.src =sc1;
  document.body.appendChild(script);
  
    
 
  const DEBUG = {
    LOG: message => ENABLE_DEBUG && console.log('=>', message),
  };
 
  const highlightCode = () => {
    const notHighlightedCode = document.querySelectorAll(
      '.code-diff:not([data-highlighted="true"])'
    );
 
    if (!notHighlightedCode.length) return;
    DEBUG.LOG({ notHighlightedCode });
 
    const articleFilesElements = document.querySelectorAll(
      '[data-qa="pr-diff-file-styles"]'
    );
 
    if (!articleFilesElements.length) return;
    DEBUG.LOG({ articleFilesElements });
 
    addEventListenerOnShowMoreButton();
 
    const handleExtensionName = extension => {
      const extensions = { json: 'js' };
      return extensions[extension] || extension;
    }
 
    Array.from(articleFilesElements).forEach(file => {
      const fileTitle = file.querySelector('[data-qa="bk-filepath"]')
        .firstChild
        .lastElementChild
        .innerText;
 
      const language = handleExtensionName(fileTitle.split('.').pop());
      DEBUG.LOG({ fileTitle, language });
 
      const linesCode = file.querySelectorAll(
        '.code-diff:not([data-highlighted="true"])'
      );
 
      DEBUG.LOG({ linesCode });
 
      Array.from(linesCode).forEach(codeElement => {
        const parentElement = codeElement.parentElement;
        parentElement.classList.add(language);
        parentElement.style.display = 'flex';
        parentElement.style.alignItems = 'center';
 
        hljs.highlightBlock(codeElement);
        codeElement.style.backgroundColor = 'transparent';
        codeElement.style.padding = '0';
        codeElement.dataset.highlighted = true;
      });
    });
  }
 
  const addEventListenerOnShowMoreButton = () => {
    const buttons = document.querySelectorAll(
      '[data-qa="pr-diff-show-more-lines"]:not([data-event-added="true"])'
    );
 
    DEBUG.LOG({ buttons });
 
    for (let button of buttons) {
      button.addEventListener('click', highlightCode, false);
      button.dataset.eventAdded = true;
    }
  };
 
  window.addEventListener('scroll', highlightCode, false);
})();// ==UserScript==
// @name        NewScript-a9gb02o7
// @description This is your new file, start writing code
// @match       *://*/*
// ==/UserScript==
1 Like