GreasyFork Code: Syntax Highlight by CodeMirror

To syntax highlight GreasyFork Code by CodeMirror

Versão de: 02/08/2023. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name        GreasyFork Code: Syntax Highlight by CodeMirror
// @namespace   Violentmonkey Scripts
// @match       https://greasyfork.org/*
// @grant       none
// @version     0.2.1
// @author      CY Fung
// @description To syntax highlight 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.classList.add('code-container')

    textarea.style.width = '100%';
    textarea.style.height = '100vh';


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





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

      mode: "javascript",

      readOnly: true,
      styleActiveLine: true,
      lineNumbers: true,
      extraKeys: {"Alt-F": "findPersistent"}
    });
    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, 1));



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

      .code-container{
        height:100vh;
      }
      .code-container .CodeMirror, .code-container textarea{
        height:100%;
      }
      /*
          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;
              gap:2px;
          }
          body > div:last-child > #script-info:last-child > #script-content:last-child > * {
              margin:0;
          }
          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',


        'https://cdn.jsdelivr.net/npm/[email protected]/addon/search/search.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/addon/search/searchcursor.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/addon/search/jump-to-line.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/addon/dialog/dialog.js'

      ]);

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

      await Promise.all([new Promise(r => setTimeout(r, 60)),  new Promise(r=>window.requestAnimationFrame(r))]);


      byPass = false;

      applyCodeMirrorSyntaxHighlighting();






  }


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



  function getElementsByTagName(tag) {

    if (byPass) {
      if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
        if(location.pathname.endsWith('/code')){

          setTimeout(mTz, 10)
          return [];
        }
      }
    }
    return this.getElementsByTagName331(tag);
  }



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

  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;
  */


  documentReady.then(async () => {

    if(location.pathname.endsWith('/code')) return;

    byPass = false;

  });

})();