☰

Greasy Fork is available in English.

Javascript-css beautify

Beautify and syntax highlight javascript/css source code

Fra 14.03.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. // @include     *
  6. // @version     2.2.1
  7. // @author      Zzbaivong
  8. // @resource    light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css
  9. // @resource    dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css
  10. // @require     https://openuserjs.org/src/libs/baivong/beautify-js.min.js
  11. // @require     https://openuserjs.org/src/libs/baivong/beautify-css.min.js
  12. // @require     https://openuserjs.org/src/libs/baivong/highlight-css-js.min.js
  13. // @run-at      document-end
  14. // @grant       GM_addStyle
  15. // @grant       GM_getResourceText
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.  
  20.     'use strict';
  21.  
  22.     var theme = 'light', // light|dark
  23.  
  24.         url = window.top.location.pathname,
  25.         contenttype = document.contentType;
  26.  
  27.     if (/^(application\/x-javascript|application\/javascript|application\/json|text\/css)$/.test(contenttype) || /.+\.(js|json|css)$/.test(url)) {
  28.  
  29.         var output = document.getElementsByTagName('pre')[0],
  30.             txt = output.textContent,
  31.             lang = 'javascript',
  32.             lines = 0,
  33.             l = '';
  34.  
  35.         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: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}#scroll-x{position:fixed;right:0;top:0;width:120px;cursor:w-resize;z-index:999;background:transparent;bottom:0}');
  36.  
  37.         if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
  38.             lang = 'css';
  39.             txt = css_beautify(txt);
  40.         } else {
  41.             txt = js_beautify(txt);
  42.         }
  43.  
  44.         output.textContent = txt;
  45.         output.setAttribute('class', lang);
  46.  
  47.         hljs.highlightBlock(output);
  48.  
  49.         lines = txt.split('\n');
  50.         lines = lines ? lines.length : 0;
  51.         for (var i = 0; i < lines; i++) {
  52.             l += (i + 1) + '\n';
  53.         }
  54.  
  55.         output.setAttribute('data-lines', l);
  56.  
  57.         var node = document.createElement('DIV');
  58.         node.id = 'scroll-x';
  59.         document.body.appendChild(node);
  60.  
  61.         node.onwheel = function(e) {
  62.             e.preventDefault();
  63.             output.scrollLeft += (e.deltaY * 10);
  64.             return false;
  65.         };
  66.  
  67.     }
  68.  
  69. }());