☰

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.

As of 2017-05-15. See the latest version.

  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 see the source code by holding the right mouse and drag.
  5. // @version      2.3.8
  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.5.0/styles/github-gist.min.css
  12. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai-sublime.min.css
  13. // @require      https://greatest.deepsurf.us/scripts/18531-beautify-js/code/beautify-js.js?version=126854
  14. // @require      https://greatest.deepsurf.us/scripts/18528-beautify-css/code/beautify-css.js?version=126856
  15. // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.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. (function () {
  24.  
  25.     'use strict';
  26.  
  27.     var theme = 'light', // light|dark
  28.  
  29.         url = location.pathname,
  30.         doc = document,
  31.         contenttype = doc.contentType;
  32.  
  33.     function scrollByDragging(container, disableH, disableV) {
  34.  
  35.         function mouseUp(e) {
  36.             if (e.which !== 3) return;
  37.  
  38.             window.removeEventListener('mousemove', mouseMove, true);
  39.             container.style.cursor = 'default';
  40.         }
  41.  
  42.         function mouseDown(e) {
  43.             if (e.which !== 3) return;
  44.  
  45.             pos = {
  46.                 x: e.clientX,
  47.                 y: e.clientY
  48.             };
  49.  
  50.             window.addEventListener('mousemove', mouseMove, true);
  51.             container.style.cursor = 'move';
  52.         }
  53.  
  54.         function mouseMove(e) {
  55.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  56.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  57.         }
  58.  
  59.         var pos = {
  60.             x: 0,
  61.             y: 0
  62.         };
  63.  
  64.         container.oncontextmenu = function (e) {
  65.             e.preventDefault();
  66.         };
  67.  
  68.         container.addEventListener('mousedown', mouseDown, false);
  69.         window.addEventListener('mouseup', mouseUp, false);
  70.  
  71.     }
  72.  
  73.     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))) {
  74.  
  75.         var output = doc.getElementsByTagName('pre')[0],
  76.             txt = output.textContent,
  77.             lang = 'javascript',
  78.             lines = 0,
  79.             l = '';
  80.  
  81.         GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0}.hljs{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}');
  82.  
  83.         if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
  84.             lang = 'css';
  85.             txt = css_beautify(txt);
  86.         } else {
  87.             txt = js_beautify(txt);
  88.         }
  89.  
  90.         output.textContent = txt;
  91.         output.setAttribute('class', lang);
  92.  
  93.         hljs.highlightBlock(output);
  94.  
  95.         lines = txt.split('\n');
  96.         lines = lines ? lines.length : 0;
  97.         for (var i = 0; i < lines; i++) {
  98.             l += (i + 1) + '\n';
  99.         }
  100.  
  101.         output.setAttribute('data-lines', l);
  102.         output.style.width = output.scrollWidth + 'px';
  103.  
  104.         scrollByDragging(doc.body);
  105.         scrollByDragging(doc.documentElement);
  106.  
  107.     }
  108.  
  109. }());