GreasyFork Code: Syntax Highlight by CodeMirror

To syntax hightlight GreasyFork Code by CodeMirror

Versión del día 30/7/2023. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name        GreasyFork Code: Syntax Highlight by CodeMirror
// @namespace   Violentmonkey Scripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.1.1
// @author      CY Fung
// @description To syntax hightlight GreasyFork Code by CodeMirror
// @run-at      document-start
// @inject-into page
// @unwrap
// @license     MIT
// ==/UserScript==



(() => {
  let byPass = true;

  let documentReady = new Promise(resolve => {
    Promise.resolve().then(() => {
      if (document.readyState !== 'loading') {
        resolve();
      } else {
        window.addEventListener("DOMContentLoaded", resolve, false);
      }
    });
  });

  // Function to load CodeMirror library
  function loadCodeMirror(arr) {


    const promises = arr.map((href) => {
      return new Promise(resolve => {


        const script = document.createElement('script');
        script.src = href;
        script.onload = () => {
          resolve(script);
        };
        document.head.appendChild(script);

      });


    });

    return Promise.all(promises);
  }

  // Function to load CodeMirror CSS
  function loadCodeMirrorCSS(href) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

  async function runBlock(codeBlock){

    let textarea = document.createElement('textarea');
    textarea.value = `${codeBlock.textContent}`;
    textarea.readOnly = true;
    textarea.id = 'editor651';

    textarea.style.width = '100%';
    textarea.style.height = '400px';

    codeBlock.replaceWith(textarea);
    codeBlock.remove();

    await new Promise(r=>setTimeout(r, 40));




    let editor651 = CodeMirror.fromTextArea(document.querySelector('#editor651'), {

      mode: "javascript",

      readOnly: true,
      styleActiveLine: true,
      lineNumbers: true,
    });
    editor651.save();







  }

  // Main function to apply CodeMirror syntax highlighting to pre elements
  function applyCodeMirrorSyntaxHighlighting() {
    const codeBlocks = document.querySelectorAll('pre.prettyprint.linenums.lang-js');


    // Check if CodeMirror is loaded
    if (typeof CodeMirror !== 'undefined') {

      codeBlocks.forEach(runBlock);
    } else {
      console.error('CodeMirror library is not loaded. Syntax highlighting cannot be applied.');
    }
  }

  async function doAction() {


    await new Promise(r => setTimeout(r, 0));

    if (mgg) {

      byPass = false;


      document.head.appendChild(document.createElement('style')).textContent = `

          body {

              display: flex;
              flex-direction: column;
              height: 100vh;
          }

          body  > div:last-child{
              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;
          }

          body  > div:last-child >  #script-info:last-child{

              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;
          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child > textarea:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child > .CodeMirror:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

              `;

      await loadCodeMirror(['https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js']);

      await loadCodeMirror([
        'https://cdn.jsdelivr.net/npm/[email protected]/mode/javascript/javascript.min.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/addon/selection/active-line.min.js']);

      loadCodeMirrorCSS('https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css');

      await new Promise(r => setTimeout(r, 20));


      applyCodeMirrorSyntaxHighlighting();




    }



  }


  let mz = HTMLElement.prototype.getElementsByTagName
  let mzd = Document.prototype.getElementsByTagName

  let mgg = 0;
  async function mTz() {
    if (mgg) return;
    mgg = 1;
    byPass = false;
    documentReady.then(doAction);
  }

  function getElementsByTagName(tag) {

    if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
      if (byPass) {
        setTimeout(mTz, 10)
        return [];
      }
    }
    if (this instanceof Document) {
      return mzd.call(this, tag);
    } else {
      return mz.call(this, tag);
    }
  }


  HTMLElement.prototype.getElementsByTagName = getElementsByTagName
  Document.prototype.getElementsByTagName = getElementsByTagName

  /*
  let mz= function(evt){

    if(evt && evt.type ==='readystatechange') return;
    return EventTarget.prototype.addEventListener.apply(this,arguments)

  };
  window.addEventListener = mz
  document.addEventListener = mz;
  */



})();