☰

Greasy Fork is available in English.

Javascript-css beautify

Beautify and syntax highlight javascript/css source code

Fra og med 15.03.2016. Se den nyeste version.

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