☰

Add <br> around <code> tags on FreeCodeCamp

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

  1. // ==UserScript==
  2. // @name         Add <br> around <code> tags on FreeCodeCamp
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.7
  5. // @description  Adds <br> before and after <code> tags on FreeCodeCamp using Monaco Editor API
  6. // @author       Geromet
  7. // @match        https://www.freecodecamp.org/learn/*
  8. // @grant        none
  9. // @license      MIT
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15. readPage();
  16.     function addLineBreaks() {
  17.         const codeElements = document.getElementsByTagName('code');
  18.         for (const codeElement of codeElements) {
  19.             const prevSibling = codeElement.previousSibling;
  20.             const nextSibling = codeElement.nextSibling;
  21.             if (prevSibling && prevSibling.tagName === 'BR' && nextSibling && nextSibling.tagName === 'BR') {
  22.                 continue;
  23.             }
  24.             const lineBreakBefore = document.createElement('br');
  25.             codeElement.parentNode.insertBefore(lineBreakBefore, codeElement);
  26.             const lineBreakAfter = document.createElement('br');
  27.             codeElement.parentNode.insertBefore(lineBreakAfter, codeElement.nextSibling);
  28.         }
  29.     }
  30.  
  31.     function simulateMouseDrag(element) {
  32.         const event = new MouseEvent('mousedown', {
  33.             bubbles: true,
  34.             cancelable: true,
  35.             clientX: element.getBoundingClientRect().left,
  36.             clientY: element.getBoundingClientRect().top,
  37.         });
  38.  
  39.         element.dispatchEvent(event);
  40.  
  41.         const moveEvent = new MouseEvent('mousemove', {
  42.             bubbles: true,
  43.             cancelable: true,
  44.             clientX: element.getBoundingClientRect().left + 1,
  45.             clientY: element.getBoundingClientRect().top,
  46.         });
  47.  
  48.         element.dispatchEvent(moveEvent);
  49.  
  50.         const upEvent = new MouseEvent('mouseup', {
  51.             bubbles: true,
  52.             cancelable: true,
  53.         });
  54.  
  55.         element.dispatchEvent(upEvent);
  56.     }
  57. function onSubmitButtonClick() {
  58.     setTimeout(function() {
  59.         location.reload();
  60.     }, 1000);
  61. }
  62.      function oncheckButtonClick() {
  63.          setTimeout(setSubmitButton(),1000);
  64.  
  65.     }
  66.     function readPage()
  67.     {
  68.         const intervalId = setInterval(function() {
  69.         const codeElements = document.getElementsByTagName('code');
  70.  
  71. if (codeElements.length > 0) {
  72.             addLineBreaks();
  73.             const checkButton = document.querySelector('button[data-playwright-test-label="lowerJaw-check-button"]');
  74.             if(checkButton)
  75.             {
  76.                  checkButton.addEventListener('click', oncheckButtonClick);
  77.             }
  78.             const reflexSplitter = document.querySelector('.reflex-splitter');
  79.             if (reflexSplitter) {
  80.                 simulateMouseDrag(reflexSplitter);
  81.             }
  82.  
  83.             clearInterval(intervalId);
  84.  
  85.             }
  86.  
  87.  
  88.     }, 100);
  89.     }
  90.  function setSubmitButton()
  91.     {
  92.       const submitButton = document.querySelector('button[data-playwright-test-label="lowerJaw-submit-button"]');
  93.             if (submitButton) {
  94.                 submitButton.addEventListener('click', onSubmitButtonClick);
  95.             }
  96.     }
  97. })();