☰

GreasyFork Code: Syntax Highlight by highlight.js

To syntax highlight GreasyFork Code by highlight.js

  1. // ==UserScript==
  2. // @name         GreasyFork Code: Syntax Highlight by highlight.js
  3. // @namespace    Violentmonkey Scripts
  4. // @grant        none
  5. // @version      0.5.1
  6. // @author       CY Fung
  7. // @description  To syntax highlight GreasyFork Code by highlight.js
  8. // @run-at       document-start
  9. // @inject-into  page
  10. // @unwrap
  11. // @license      MIT
  12. // @match        https://greatest.deepsurf.us/*
  13. // @match        https://sleazyfork.org/*
  14. //
  15. // ==/UserScript==
  16.  
  17.  
  18. (() => {
  19.  
  20.     const cdn = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0';
  21.     const resoruces = {
  22.         'highlight.min.js': `${cdn}/highlight.min.js`,
  23.         'javascript.min.js': `${cdn}/languages/javascript.min.js`,
  24.         'css.min.js': `${cdn}/languages/css.min.js`,
  25.         'stylus.min.js': `${cdn}/languages/stylus.min.js`,
  26.         'nnfx-light.css': `${cdn}/styles/nnfx-light.min.css`,
  27.         'nnfx-dark.css': `${cdn}/styles/nnfx-dark.min.css`
  28.     }
  29.  
  30.     const doActionCSS = () => `
  31.  
  32.         .code-container{
  33.             height:100vh;
  34.         }
  35.         .code-container .CodeMirror, .code-container textarea{
  36.             height:100%;
  37.         }
  38.     `;
  39.  
  40.  
  41.     const global_css = () =>`
  42.  
  43.         html {
  44.             line-height: 1.5;
  45.             -webkit-text-size-adjust: 100%;
  46.             -moz-tab-size: 4;
  47.             -o-tab-size: 4;
  48.             tab-size: 4;
  49.             font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  50.             font-feature-settings: normal;
  51.             font-variation-settings: normal
  52.         }
  53.         
  54.         .code-container code, .code-container kbd, .code-container pre, .code-container samp {
  55.             font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  56.             font-size: 1em
  57.         }
  58.  
  59.         #script-content > .code-container[class] {
  60.             width: 100%;
  61.         }
  62.  
  63.         .code-container[class] {
  64.             border-radius: 0;
  65.         }
  66.  
  67.         .code-container[class] {
  68.             border-radius: 0;
  69.         }
  70.  
  71.         .code-container > pre:only-child{
  72.             padding:0;
  73.         }
  74.  
  75.         code.syntax-highlighted[class] {
  76.             font-family: monospace;
  77.             font-size: 13px;
  78.             font-variant-ligatures: contextual;
  79.             line-height: 1.15rem;
  80.             text-shadow: none !important;
  81.         }
  82.  
  83.         .hljs-comment[class], .hljs-quote[class] {
  84.             font-style: inherit;
  85.             color: #259789;
  86.         }
  87.  
  88.         .hljs-add-marker-width .marker-fixed-width[class] {
  89.             user-select: none !important;
  90.             width: calc(var(--hljs-marker-width, 0em) + 16px);
  91.             background: #f4f4f4;
  92.             padding-right: 6px;
  93.             margin-right: 4px;
  94.             contain: paint style;
  95.         }
  96.         
  97.         [dark] .hljs-add-marker-width .marker-fixed-width[class] {
  98.             background: #242424;
  99.             color: #b6b2b2;
  100.         }
  101.  
  102.         .marker-fixed-width[marker-text]::before {
  103.             content: attr(marker-text);
  104.         }
  105.  
  106.     `;
  107.  
  108.  
  109.     const cssForCodePage = () => /\/scripts\/\d+[^\s\/\\]*\/code(\/|$)/.test(location.href) ? `
  110.  
  111.         html:not([dkkfv]) div.code-container {
  112.             display:none;
  113.         }
  114.  
  115.         .code-container,
  116.         .code-container pre:only-child,
  117.         .code-container pre:only-child code:only-child {
  118.             max-height: calc(100vh + 4px);
  119.             max-width: calc(100vw + 4px);
  120.         }
  121.     ` : '';
  122.  
  123.  
  124.     const cssAdd = () => `
  125.  
  126.         ${global_css()}
  127.  
  128.         ${cssForCodePage()}
  129.  
  130.         .code-container {
  131.             max-width: 100%;
  132.             display: inline-flex;
  133.             flex-direction: column;
  134.             overflow: auto;
  135.             border-radius: 8px;
  136.             max-height: 100%;
  137.             overflow: visible;
  138.         }
  139.         .code-container > pre:only-child {
  140.             max-width: 100%;
  141.             display: inline-flex;
  142.             flex-direction: column;
  143.             flex-grow: 1;
  144.             height: 0;
  145.         }
  146.         .code-container > pre:only-child > code:only-child {
  147.             max-width: 100%;
  148.             flex-grow: 1;
  149.             height: 0;
  150.         }
  151.         .code-container pre code {
  152.             padding: 0;
  153.             font-family: Consolas;
  154.             cursor: text;
  155.             overflow: auto;
  156.             box-sizing: border-box;
  157.         }
  158.         .code-container pre code .marker {
  159.             display: inline-block;
  160.             color: #636d83;
  161.             text-align: right;
  162.             padding-right: 20px;
  163.             user-select: none;
  164.             cursor: auto;
  165.         }
  166.  
  167.         .code-container[contenteditable]{
  168.           outline: 0 !important;
  169.           contain: strict;
  170.           box-sizing: border-box;
  171.         }
  172.  
  173.         .code-container[contenteditable]>pre[contenteditable="false"]{
  174.           contain: strict;
  175.           width: initial;
  176.           box-sizing: border-box;
  177.         }
  178.  
  179.     `;
  180.  
  181.     const Promise = (async function () { })().constructor;
  182.  
  183.     const delayPn = delay => new Promise((fn => setTimeout(fn, delay)));
  184.  
  185.     const PromiseExternal = ((resolve_, reject_) => {
  186.         const h = (resolve, reject) => { resolve_ = resolve; reject_ = reject };
  187.         return class PromiseExternal extends Promise {
  188.             constructor(cb = h) {
  189.                 super(cb);
  190.                 if (cb === h) {
  191.                     /** @type {(value: any) => void} */
  192.                     this.resolve = resolve_;
  193.                     /** @type {(reason?: any) => void} */
  194.                     this.reject = reject_;
  195.                 }
  196.             }
  197.         };
  198.     })();
  199.  
  200.     // -------- fix requestIdleCallback issue for long coding --------
  201.  
  202.     const pud = new PromiseExternal();
  203.     if (typeof window.requestIdleCallback === 'function' && !window.requestIdleCallback842 && window.requestIdleCallback.length === 1) {
  204.         window.requestIdleCallback842 = window.requestIdleCallback;
  205.         window.requestIdleCallback = function (callback, ...args) {
  206.             return (this || window).requestIdleCallback842(async function () {
  207.                 await pud.then();
  208.                 return callback.apply(this, arguments);
  209.             }, ...args);
  210.         }
  211.     }
  212.  
  213.     // -------- fix requestIdleCallback issue for long coding --------
  214.  
  215.     const pScript = new PromiseExternal();
  216.     const pElementQuery = new PromiseExternal();
  217.  
  218.     HTMLElement.prototype.getElementsByTagName331 = HTMLElement.prototype.getElementsByTagName;
  219.     Document.prototype.getElementsByTagName331 = Document.prototype.getElementsByTagName;
  220.  
  221.     HTMLElement.prototype.getElementsByTagName = getElementsByTagName;
  222.     Document.prototype.getElementsByTagName = getElementsByTagName;
  223.  
  224.     let byPass = true;
  225.  
  226.     const observablePromise = (proc, timeoutPromise) => {
  227.         let promise = null;
  228.         return {
  229.             obtain() {
  230.                 if (!promise) {
  231.                     promise = new Promise(resolve => {
  232.                         let mo = null;
  233.                         const f = () => {
  234.                             let t = proc();
  235.                             if (t) {
  236.                                 mo.disconnect();
  237.                                 mo.takeRecords();
  238.                                 mo = null;
  239.                                 resolve(t);
  240.                             }
  241.                         }
  242.                         mo = new MutationObserver(f);
  243.                         mo.observe(document, { subtree: true, childList: true })
  244.                         f();
  245.                         timeoutPromise && timeoutPromise.then(() => {
  246.                             resolve(null)
  247.                         });
  248.                     });
  249.                 }
  250.                 return promise
  251.             }
  252.         }
  253.     }
  254.  
  255.     const documentReady = new Promise(resolve => {
  256.         Promise.resolve().then(() => {
  257.             if (document.readyState !== 'loading') {
  258.                 resolve();
  259.             } else {
  260.                 window.addEventListener("DOMContentLoaded", resolve, false);
  261.             }
  262.         });
  263.     });
  264.  
  265.     documentReady.then(async () => {
  266.         pud.resolve();
  267.     });
  268.  
  269.     function getElementsByTagName(tag) {
  270.         if (byPass) {
  271.             if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
  272.                 if (location.pathname.endsWith('/code')) {
  273.                     pElementQuery.resolve();
  274.                     return [];
  275.                 }
  276.             }
  277.         }
  278.         return this.getElementsByTagName331(tag);
  279.     }
  280.  
  281.     async function onBodyHeadReadyAsync() {
  282.         await observablePromise(() => document.body && document.head).obtain();
  283.     }
  284.  
  285.  
  286.     // Load CSS
  287.     function loadJS(href) {
  288.  
  289.         return new Promise(resolve => {
  290.  
  291.             const script = document.createElement('script');
  292.             script.src = href;
  293.             script.onload = () => {
  294.                 resolve(script);
  295.             };
  296.             document.head.appendChild(script);
  297.  
  298.         });
  299.  
  300.     }
  301.  
  302.     // Load CSS
  303.     function loadCSS(href) {
  304.         const link = document.createElement('link');
  305.         link.rel = 'stylesheet';
  306.         link.href = href;
  307.         document.head.appendChild(link);
  308.         return link;
  309.     }
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.     /** @param {HTMLElement} pre */
  317.     async function prepareCodeAreaAsync(pre) {
  318.  
  319.         if (pre.isConnected === false) return;
  320.  
  321.         for (const li of pre.querySelectorAll('li')) {
  322.             li.append(document.createTextNode('\n'));
  323.         }
  324.  
  325.         const codeElement = document.createElement('code');
  326.         // codeElement.classList.add('language-javascript');
  327.         codeElement.innerHTML = pre.innerHTML;
  328.  
  329.         // Clearing the original code container and appending the new one
  330.         // pre.classList = '';
  331.         pre.innerHTML = '';
  332.         // pre.appendChild(codeElement);
  333.  
  334.         // if (pre.querySelector('code')) return;
  335.         const code = codeElement;
  336.  
  337.         const codeContainer = pre.closest('.code-container');
  338.         if (codeContainer && codeContainer.querySelector('.code-container>pre:only-child')) {
  339.             // avoid selection to the outside by mouse dragging
  340.             codeContainer.setAttribute('contenteditable', '');
  341.             codeContainer.querySelector('.code-container>pre:only-child').setAttribute('contenteditable', 'false');
  342.         }
  343.  
  344.  
  345.         // let parentNode = code.parentNode;
  346.         // let nextNode = code.nextSibling;
  347.  
  348.         // code.remove();
  349.         let parentNode = pre;
  350.         let nextNode = null;
  351.         await Promise.resolve().then();
  352.  
  353.         // preset language
  354.         /*
  355.         const text = codeElement.textContent;
  356.         if(/(^|\n)\s*\/\/\s+==UserScript==\s*\n/.test(text)){
  357.             codeElement.classList.add('language-javascript');
  358.         }else if(/(^|\n)\s*\/\*\s+==UserStyle==\s*\n/.test(text)){
  359.             codeElement.classList.add('language-css');
  360.         }
  361.         */
  362.  
  363.         let preLang = '';
  364.  
  365.         if (pre.classList.contains('lang-js')) {
  366.             preLang = 'lang-js';
  367.         } else if (pre.classList.contains('lang-css')) {
  368.             preLang = 'lang-css';
  369.         } else if (pre.classList.contains('uglyprint')){
  370.             let m =/\/\/\s*={2,9}(\w+)={2,9}\s*[\r\n]/.exec(codeElement.textContent);
  371.             if(m){
  372.                 m = m[1];
  373.                 if(m === 'UserScript') preLang = 'lang-js';
  374.                 if(m === 'UserStyle') preLang = 'lang-css';
  375.             }
  376.         }
  377.  
  378.         let className = '';
  379.         if (preLang === 'lang-js') {
  380.             className = 'language-javascript';
  381.         } else if (preLang === 'lang-css') {
  382.  
  383.             const text = codeElement.textContent;
  384.             let m = /\n@preprocessor\s+([-_a-zA-Z]{3,8})\s*\n/.exec(text);
  385.             className = 'language-css'
  386.             if (m) {
  387.                 const preprocessor = m[1];
  388.                 if (preprocessor === 'stylus') {
  389.                     className = 'language-stylus';
  390.                 } else if (preprocessor === 'uso') {
  391.                     className = 'language-stylus';
  392.                 } else if (preprocessor === 'less') {
  393.                     className = 'language-less';
  394.                 } else if (preprocessor === 'default') {
  395.                     className = 'language-stylus';
  396.                 } else {
  397.                     className = 'language-stylus';
  398.                 }
  399.             }
  400.  
  401.  
  402.         }
  403.  
  404.  
  405.         if (!className) return;
  406.  
  407.  
  408.  
  409.  
  410.         codeElement.classList.add(className);
  411.         codeElement.classList.add('syntax-highlighted')
  412.  
  413.         // Highlighting
  414.         // hljs.highlightElement(code);
  415.  
  416.         let htmlCode = '';
  417.  
  418.         if (className === 'language-javascript') {
  419.  
  420.             const result = hljs.highlight(code.textContent, {language: 'javascript', ignoreIllegals: true});
  421.             htmlCode = result.value;
  422.  
  423.         } else if (className === 'language-stylus') {
  424.  
  425.             const result = hljs.highlight(code.textContent, {language: 'stylus', ignoreIllegals: true});
  426.             htmlCode = result.value;
  427.  
  428.         } else if (className === 'language-less') {
  429.  
  430.             const result = hljs.highlight(code.textContent, {language: 'less', ignoreIllegals: true});
  431.             htmlCode = result.value;
  432.  
  433.         } else {
  434.  
  435.             const result = hljs.highlight(code.textContent, {language: 'css', ignoreIllegals: true});
  436.             htmlCode = result.value;
  437.  
  438.         }
  439.  
  440.  
  441.  
  442.         // Adding line numbers
  443.         htmlCode = htmlCode || '';
  444.         const htmlSplit = htmlCode ? htmlCode.split('\n') : [];
  445.         const totalLines = htmlSplit.length;
  446.  
  447.         let mwStyle = '';
  448.  
  449.         if (totalLines >= 1) {
  450.             code.classList.add('hljs-add-marker-width');
  451.             const len = `${totalLines}`.length * 0.5;
  452.             mwStyle = `${len}em`;
  453.             htmlCode = htmlSplit.map((n, i) => `<span class="marker marker-fixed-width" marker-text="${i + 1}"></span>${n}`).join('\n');
  454.  
  455.         } else {
  456.  
  457.             code.classList.remove('hljs-add-marker-width');
  458.         }
  459.  
  460.         let targetCode = code;
  461.  
  462.         if (htmlCode) {
  463.  
  464.             const template = document.createElement('template');
  465.  
  466.             template.innerHTML = `<code>${htmlCode}</code>`;
  467.             const code2 = template.content.firstChild;
  468.             for (const className of code.classList) {
  469.                 code2.classList.add(className);
  470.             }
  471.  
  472.             targetCode = code2;
  473.         } else {
  474.             code.innerHTML = "";
  475.             targetCode = code;
  476.         }
  477.  
  478.         targetCode.style.setProperty('--hljs-marker-width', mwStyle);
  479.  
  480.         parentNode.insertBefore(targetCode, nextNode);
  481.  
  482.  
  483.  
  484.     }
  485.  
  486.     const documentBodyHeadReady = onBodyHeadReadyAsync();
  487.  
  488.     documentBodyHeadReady.then(async () => {
  489.  
  490.         if (!location.pathname.endsWith('/code')) {
  491.             return;
  492.         }
  493.  
  494.         document.head.appendChild(document.createElement('style')).textContent = `${cssAdd()}`;
  495.  
  496.  
  497.         await loadJS(resoruces['highlight.min.js']);
  498.         await loadJS(resoruces['javascript.min.js']);
  499.         await loadJS(resoruces['css.min.js']);
  500.         await loadJS(resoruces['stylus.min.js']);
  501.  
  502.         if (document.documentElement.hasAttribute('dark')) {
  503.  
  504.             loadCSS(resoruces['nnfx-dark.css']);
  505.         } else {
  506.  
  507.             loadCSS(resoruces['nnfx-light.css']);
  508.         }
  509.  
  510.  
  511.         pScript.resolve();
  512.  
  513.  
  514.  
  515.  
  516.     });
  517.  
  518.     let keydownActive = false;
  519.  
  520.     documentReady.then(async () => {
  521.  
  522.         if (!location.pathname.endsWith('/code')) {
  523.             byPass = false;
  524.             return;
  525.         }
  526.  
  527.         await pScript.then();
  528.  
  529.         await Promise.race([pElementQuery, delayPn(800)]);
  530.  
  531.         const targets = document.querySelectorAll('.code-container pre.lang-js, .code-container pre.lang-css, .code-container pre.uglyprint');
  532.  
  533.         if (targets.length === 0) return;
  534.  
  535.         await delayPn(40);
  536.  
  537.         document.head.appendChild(document.createElement('style')).textContent = doActionCSS();
  538.  
  539.         await delayPn(40);
  540.  
  541.         byPass = false;
  542.  
  543.         // Code highlighting
  544.         const promises = [...targets].map(prepareCodeAreaAsync)
  545.         await Promise.all(promises);
  546.  
  547.         await delayPn(40);
  548.         document.documentElement.setAttribute('dkkfv', '');
  549.         keydownActive = true;
  550.  
  551.     });
  552.  
  553.     function selectAllWithinElement(element) {
  554.         window.getSelection().removeAllRanges();
  555.         let range = document.createRange();
  556.         if (element) {
  557.             range.selectNodeContents(element);
  558.             window.getSelection().addRange(range);
  559.         } else {
  560.             console.error('Element not found with ID:', element);
  561.         }
  562.     }
  563.     document.addEventListener('keydown', (e) => {
  564.         if (keydownActive && e && e.code === 'KeyA' && e.isTrusted && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
  565.  
  566.             const target = e.target;
  567.             const container = target ? target.closest('div.code-container') : null;
  568.             const code = container ? container.querySelector('code') : null;
  569.  
  570.             if (container && code) {
  571.  
  572.                 e.preventDefault();
  573.                 e.stopPropagation();
  574.                 e.stopImmediatePropagation();
  575.  
  576.                 setTimeout(() => {
  577.                     selectAllWithinElement(code);
  578.                 }, 1)
  579.  
  580.             }
  581.  
  582.         }
  583.     }, true);
  584.  
  585.  
  586. })();