☰

Javascript-css beautify

Beautify and syntax highlight javascript/css source code

目前为 2016-04-06 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Javascript-css beautify
  3. // @namespace    http://devs.forumvi.com
  4. // @description  Beautify and syntax highlight javascript/css source code
  5. // @version      2.3.3
  6. // @icon         http://i.imgur.com/kz8nqz1.png
  7. // @author       Zzbaivong
  8. // @match        *
  9. // @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github-gist.min.css
  10. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css
  11. // @require      https://greasyfork.org/scripts/18531-beautify-js/code/beautify-js.js?version=117786
  12. // @require      https://greasyfork.org/scripts/18528-beautify-css/code/beautify-css.js?version=117789
  13. // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js
  14. // @noframes
  15. // @supportURL   https://github.com/baivong/Userscript/issues
  16. // @run-at       document-end
  17. // @grant        GM_addStyle
  18. // @grant        GM_getResourceText
  19. // ==/UserScript==
  20.  
  21. (function () {
  22.  
  23.     'use strict';
  24.  
  25.     var theme = 'light', // light|dark
  26.  
  27.         url = window.top.location.pathname,
  28.         doc = document,
  29.         contenttype = doc.contentType;
  30.  
  31.     function scrollByDragging(container, disableH, disableV) {
  32.  
  33.         function mouseUp(e) {
  34.             if (e.which !== 3) return;
  35.  
  36.             window.removeEventListener('mousemove', mouseMove, true);
  37.             container.style.cursor = 'default';
  38.         }
  39.  
  40.         function mouseDown(e) {
  41.             if (e.which !== 3) return;
  42.  
  43.             pos = {
  44.                 x: e.clientX,
  45.                 y: e.clientY
  46.             };
  47.  
  48.             window.addEventListener('mousemove', mouseMove, true);
  49.             container.style.cursor = 'move';
  50.         }
  51.  
  52.         function mouseMove(e) {
  53.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  54.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  55.         }
  56.  
  57.         var pos = {
  58.             x: 0,
  59.             y: 0
  60.         };
  61.  
  62.         container.oncontextmenu = function (e) {
  63.             e.preventDefault();
  64.         };
  65.  
  66.         container.addEventListener('mousedown', mouseDown, false);
  67.         window.addEventListener('mouseup', mouseUp, false);
  68.  
  69.     }
  70.  
  71.     if (/^(application\/x-javascript|application\/javascript|application\/json|text\/css)$/.test(contenttype) || /.+\.(js|json|css)$/.test(url)) {
  72.  
  73.         var output = doc.getElementsByTagName('pre')[0],
  74.             txt = output.textContent,
  75.             lang = 'javascript',
  76.             lines = 0,
  77.             l = '';
  78.  
  79.         GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0}.hljs{overflow:hidden;word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:#d2d2d2;text-align:right;width:3.5em;left:-.5em;border-right:1px solid rgba(221, 221, 221, 0.36);padding-right:.5em}');
  80.  
  81.         if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
  82.             lang = 'css';
  83.             txt = css_beautify(txt);
  84.         } else {
  85.             txt = js_beautify(txt);
  86.         }
  87.  
  88.         output.textContent = txt;
  89.         output.setAttribute('class', lang);
  90.  
  91.         hljs.highlightBlock(output);
  92.  
  93.         lines = txt.split('\n');
  94.         lines = lines ? lines.length : 0;
  95.         for (var i = 0; i < lines; i++) {
  96.             l += (i + 1) + '\n';
  97.         }
  98.  
  99.         output.setAttribute('data-lines', l);
  100.         //output.style.width = output.scrollWidth + 'px';
  101.  
  102.         scrollByDragging(output, false, true);
  103.         scrollByDragging(doc.body, true);
  104.         scrollByDragging(doc.documentElement, true);
  105.  
  106.     }
  107.  
  108. }());