# Improving snippets highlight of forum

**URL:** <https://discourse.julialang.org/t/improving-snippets-highlight-of-forum/99070>\
**Category:** General Usage\
**Created:** [May 18, 2023, 3:19pm UTC](https://discourse.julialang.org/t/improving-snippets-highlight-of-forum/99070 "2023-05-18T15:19:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![math4mad](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/math4mad/32/49486_2.png) [@math4mad](https://discourse.julialang.org/u/math4mad)\
**Post date:** [May 18, 2023, 3:19pm UTC](https://discourse.julialang.org/t/improving-snippets-highlight-of-forum/99070/1 "2023-05-18T15:19:20Z")

</div>

For. [discourse.julialang.org](http://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](https://global.discourse-cdn.com/julialang/original/3X/3/f/3f5f5c9de08832a3cb5b31d4d86adc6cc478a7e7.jpeg)

> copy this snippet , save as. js file

```js
// ==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==

```