☰

Greasy Fork is available in English.

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.

Verze ze dne 16. 05. 2018. Zobrazit nejnovější verzi.

  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. }());