☰

Greasy Fork is available in English.

Javascript-css beautify

Beautify and syntax highlight javascript/css source code

Fra 06.04.2016. Se den seneste versjonen.

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