Add <br> around <code> tags on FreeCodeCamp

Adds <br> before and after <code> tags on FreeCodeCamp using Monaco Editor API

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Add <br> around <code> tags on FreeCodeCamp
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description  Adds <br> before and after <code> tags on FreeCodeCamp using Monaco Editor API
// @author       Geromet
// @match        https://www.freecodecamp.org/learn/*
// @grant        none
// @license      MIT
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
readPage();
    function addLineBreaks() {
        const codeElements = document.getElementsByTagName('code');
        for (const codeElement of codeElements) {
            const prevSibling = codeElement.previousSibling;
            const nextSibling = codeElement.nextSibling;
            if (prevSibling && prevSibling.tagName === 'BR' && nextSibling && nextSibling.tagName === 'BR') {
                continue;
            }
            const lineBreakBefore = document.createElement('br');
            codeElement.parentNode.insertBefore(lineBreakBefore, codeElement);
            const lineBreakAfter = document.createElement('br');
            codeElement.parentNode.insertBefore(lineBreakAfter, codeElement.nextSibling);
        }
    }

    function simulateMouseDrag(element) {
        const event = new MouseEvent('mousedown', {
            bubbles: true,
            cancelable: true,
            clientX: element.getBoundingClientRect().left,
            clientY: element.getBoundingClientRect().top,
        });

        element.dispatchEvent(event);

        const moveEvent = new MouseEvent('mousemove', {
            bubbles: true,
            cancelable: true,
            clientX: element.getBoundingClientRect().left + 1,
            clientY: element.getBoundingClientRect().top,
        });

        element.dispatchEvent(moveEvent);

        const upEvent = new MouseEvent('mouseup', {
            bubbles: true,
            cancelable: true,
        });

        element.dispatchEvent(upEvent);
    }
function onSubmitButtonClick() {
    setTimeout(function() {
        location.reload();
    }, 1000);
}
     function oncheckButtonClick() {
         setTimeout(setSubmitButton(),1000);

    }
    function readPage()
    {
        const intervalId = setInterval(function() {
        const codeElements = document.getElementsByTagName('code');

if (codeElements.length > 0) {
            addLineBreaks();
            const checkButton = document.querySelector('button[data-playwright-test-label="lowerJaw-check-button"]');
            if(checkButton)
            {
                 checkButton.addEventListener('click', oncheckButtonClick);
            }
            const reflexSplitter = document.querySelector('.reflex-splitter');
            if (reflexSplitter) {
                simulateMouseDrag(reflexSplitter);
            }

            clearInterval(intervalId);

            }


    }, 100);
    }
 function setSubmitButton()
    {
      const submitButton = document.querySelector('button[data-playwright-test-label="lowerJaw-submit-button"]');
            if (submitButton) {
                submitButton.addEventListener('click', onSubmitButtonClick);
            }
    }
})();