☰

Greasy Fork is available in English.

Javascript-css beautify

Beautify and syntax highlight javascript/css source code

2016-03-14 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  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.0
  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) {
  28.  
  29.         function mouseUp(e) {
  30.             if (e.which !== 3) return;
  31.  
  32.             window.removeEventListener('mousemove', mouseMove, 0);
  33.             container.style.cursor = 'auto';
  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, 0);
  45.             container.style.cursor = 'move';
  46.         }
  47.  
  48.         function mouseMove(e) {
  49.             container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  50.             container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  51.         }
  52.  
  53.         var pos = {
  54.             x: 0,
  55.             y: 0
  56.         };
  57.  
  58.         if (container.clientWidth < container.scrollWidth || container.clientHeight < container.scrollHeight) {
  59.             container.addEventListener('mousedown', mouseDown, 0);
  60.             window.addEventListener('mouseup', mouseUp, false);
  61.             container.oncontextmenu = function (e) {
  62.                 e.preventDefault();
  63.             };
  64.         }
  65.  
  66.     }
  67.  
  68.     if (/^(application\/x-javascript|application\/javascript|application\/json|text\/css)$/.test(contenttype) || /.+\.(js|json|css)$/.test(url)) {
  69.  
  70.         var output = doc.getElementsByTagName('pre')[0],
  71.             txt = output.textContent,
  72.             lang = 'javascript',
  73.             lines = 0,
  74.             l = '';
  75.  
  76.         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:120%}.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}');
  77.  
  78.         if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
  79.             lang = 'css';
  80.             txt = css_beautify(txt);
  81.         } else {
  82.             txt = js_beautify(txt);
  83.         }
  84.  
  85.         output.textContent = txt;
  86.         output.setAttribute('class', lang);
  87.  
  88.         hljs.highlightBlock(output);
  89.  
  90.         lines = txt.split('\n');
  91.         lines = lines ? lines.length : 0;
  92.         for (var i = 0; i < lines; i++) {
  93.             l += (i + 1) + '\n';
  94.         }
  95.  
  96.         output.setAttribute('data-lines', l);
  97.         output.style.width = output.scrollWidth + 'px';
  98.  
  99.         scrollByDragging(doc.body);
  100.  
  101.     }
  102.  
  103. }());