☰

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.

As of 10.06.2017. See ბოლო ვერსია.

  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.3.9
  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/github-gist.min.css
  12. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css
  13. // @require      https://greatest.deepsurf.us/scripts/18531-beautify-js/code/beautify-js.js?version=194235
  14. // @require      https://greatest.deepsurf.us/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.  
  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{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(doc.body);
  106.         scrollByDragging(doc.documentElement);
  107.  
  108.     }
  109.  
  110. }());