☰

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.

目前為 2017-09-08 提交的版本，檢視 最新版本。

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