☰

Javascript-css beautify

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

当前为 2016-04-10 提交的版本，查看 最新版本。

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