☰

Javascript-css beautify

Beautify and syntax highlighting for source code javascript, json, css. Support to view the source code by holding the right mouse and drag.

La data de 16-05-2018. Vezi ultima versiune.

  1. // ==UserScript==
  2. // @name         Javascript-css beautify
  3. // @namespace    http://devs.forumvi.com
  4. // @description  Beautify and syntax highlighting for source code javascript, json, css. Support to view the source code by holding the right mouse and drag.
  5. // @version      2.5.1
  6. // @icon         http://i.imgur.com/kz8nqz1.png
  7. // @author       Zzbaivong
  8. // @oujs:author  baivong
  9. // @license      MIT; https://baivong.mit-license.org/license.txt
  10. // @match        http://*/*
  11. // @match        https://*/*
  12. // @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css
  13. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night.min.css
  14. // @require      https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js
  15. // @require      https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js
  16. // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
  17. // @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  18. // @noframes
  19. // @supportURL   https://github.com/lelinhtinh/Userscript/issues
  20. // @run-at       document-idle
  21. // @grant        GM.getResourceUrl
  22. // @grant        GM_getResourceURL
  23. // ==/UserScript==
  24.  
  25. /* global css_beautify, js_beautify, hljs */
  26. (function () {
  27.  
  28.     'use strict';
  29.  
  30.     var theme = 'dark', // light|dark
  31.         lineColor = {
  32.             light: ['#a7a7a7', '#e8e8e7'],
  33.             dark: ['#4d4d4d', '#3a3a3a']
  34.         },
  35.         bgColor = {
  36.             light: '#ffffff',
  37.             dark: '#1d1f21'
  38.         },
  39.  
  40.         url = location.pathname,
  41.         doc = document,
  42.         contenttype = doc.contentType;
  43.  
  44.     function scrollByDragging(container, disableH, disableV) {
  45.  
  46.         function mouseUp(e) {
  47.             if (e.which !== 3) return;
  48.  
  49.             window.removeEventListener('mousemove', mouseMove, true);
  50.             container.style.cursor = 'default';
  51.         }
  52.  
  53.         function mouseDown(e) {
  54.             if (e.which !== 3) return;
  55.  
  56.             pos = {
  57.                 x: e.clientX,
  58.                 y: e.clientY
  59.             };
  60.  
  61.             window.addEventListener('mousemove', mouseMove, true);
  62.             container.style.cursor = 'move';
  63.         }
  64.  
  65.         function mouseMove(e) {
  66.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  67.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  68.         }
  69.  
  70.         var pos = {
  71.             x: 0,
  72.             y: 0
  73.         };
  74.  
  75.         container.oncontextmenu = function (e) {
  76.             e.preventDefault();
  77.         };
  78.  
  79.         container.addEventListener('mousedown', mouseDown, false);
  80.         window.addEventListener('mouseup', mouseUp, false);
  81.  
  82.     }
  83.  
  84.     if (/^application\/(x-javascript|javascript|json)|text\/css$/.test(contenttype) || (/.+\.(js|json|css)$/.test(url) && !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contenttype))) {
  85.  
  86.         var output = doc.getElementsByTagName('pre')[0],
  87.             txt = output.textContent,
  88.             lang = 'javascript',
  89.             lines = 0,
  90.             l = '';
  91.  
  92.         GM_getResourceText(theme).then(function (res) {
  93.             GM_addStyle(res + 'html,body,pre{margin:0;padding:0;background:' + bgColor[theme] + '}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:' + lineColor[theme][0] + ';text-align:right;width:3.5em;left:-.5em;border-right:1px solid ' + lineColor[theme][1] + ';padding-right:.5em}');
  94.         });
  95.  
  96.         if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
  97.             lang = 'css';
  98.             txt = css_beautify(txt);
  99.         } else {
  100.             txt = js_beautify(txt);
  101.         }
  102.  
  103.         output.textContent = txt;
  104.         output.setAttribute('class', lang);
  105.  
  106.         hljs.highlightBlock(output);
  107.  
  108.         lines = txt.split('\n');
  109.         lines = lines ? lines.length : 0;
  110.         for (var i = 0; i < lines; i++) {
  111.             l += (i + 1) + '\n';
  112.         }
  113.  
  114.         output.setAttribute('data-lines', l);
  115.         output.style.width = output.scrollWidth + 'px';
  116.  
  117.         scrollByDragging(doc.body);
  118.         scrollByDragging(doc.documentElement);
  119.  
  120.     }
  121.  
  122. }());