☰

Javascript-css beautify

Beautify and syntax highlighting for source code javascript, json, css.

Versione datata 19/05/2018. Vedi la nuova versione l'ultima versione.

  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.
  5. // @version      3.1.0
  6. // @icon         http://i.imgur.com/kz8nqz1.png
  7. // @author       Zzbaivong
  8. // @oujs:author  baivong
  9. // @license      MIT; https://baivong.mit-license.org/license.txt
  10. // @match        http://*/*
  11. // @match        https://*/*
  12. // @resource     js_beautify https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js
  13. // @resource     css_beautify https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js
  14. // @resource     hljs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
  15. // @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  16. // @noframes
  17. // @supportURL   https://github.com/lelinhtinh/Userscript/issues
  18. // @run-at       document-idle
  19. // @grant        GM.getResourceUrl
  20. // @grant        GM_getResourceURL
  21. // ==/UserScript==
  22.  
  23. /* eslint-env worker, es6 */
  24. (function () {
  25.     'use strict';
  26.  
  27.     var doc = document,
  28.         contenttype = doc.contentType,
  29.         pathname = location.pathname;
  30.  
  31.     if (!(/^application\/(x-javascript|javascript|json)|text\/css$/.test(contenttype) || (/.+\.(js|json|css)$/.test(pathname) && !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contenttype)))) return;
  32.  
  33.     var output = doc.getElementsByTagName('pre')[0],
  34.         lang = 'javascript',
  35.         blobURL, worker,
  36.  
  37.         addstyle = function (aCss) {
  38.             var head = doc.getElementsByTagName('head')[0];
  39.             if (!head) return null;
  40.             var style = doc.createElement('style');
  41.             style.setAttribute('type', 'text/css');
  42.             style.textContent = aCss;
  43.             head.appendChild(style);
  44.             return style;
  45.         };
  46.  
  47.     if (contenttype === 'text/css' || /.+\.css$/.test(pathname)) lang = 'css';
  48.  
  49.     blobURL = URL.createObjectURL(new Blob(['(',
  50.         function () {
  51.             self.window = {};
  52.  
  53.             self.onmessage = function (e) {
  54.                 var source = e.data.content,
  55.                     beautify = 'js_beautify';
  56.  
  57.                 if (e.data.lang === 'javascript') {
  58.                     importScripts(e.data.libs[0]);
  59.                 } else {
  60.                     importScripts(e.data.libs[1]);
  61.                     beautify = 'css_beautify';
  62.                 }
  63.                 source = self.window[beautify](source);
  64.  
  65.                 self.postMessage({
  66.                     action: 'beautify',
  67.                     source: source
  68.                 });
  69.  
  70.                 importScripts(e.data.libs[2]);
  71.                 source = self.window.hljs.highlight(e.data.lang, source, true).value;
  72.  
  73.                 source = source.split('\n');
  74.                 source = source.join('</code><code>');
  75.                 source = '<code>' + source + '</code>';
  76.  
  77.                 self.postMessage({
  78.                     action: 'hljs',
  79.                     source: source
  80.                 });
  81.             };
  82.  
  83.         }.toString(),
  84.         ')()'
  85.     ], {
  86.         type: 'text/javascript'
  87.     }));
  88.     worker = new Worker(blobURL);
  89.  
  90.     worker.onmessage = function (e) {
  91.         if (!e.data) return;
  92.  
  93.         var fragment = doc.createDocumentFragment(),
  94.             pre = doc.createElement('pre');
  95.  
  96.         if (e.data.action === 'beautify') {
  97.             addstyle('*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{counter-reset:line-numbers;white-space:pre-wrap;word-wrap:break-word;word-break:break-all}code::before{counter-increment:line-numbers;content:counter(line-numbers);display:block;position:absolute;left:-4.5em;top:0;width:4em;text-align:right;color:#60686f;white-space:pre}code{display:block;position:relative;margin-left:4em;padding-left:.5em;min-height:1em;border-left:1px solid #32363b}pre{padding:.5em .5em .5em 5em;border-left:1px solid #1d1f21}pre.hljs{padding-left:.5em;border-left:0 none}code::after{content:".";visibility:hidden} .hljs-comment,.hljs-quote{color:#969896}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c66}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#de935f}.hljs-attribute{color:#f0c674}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b5bd68}.hljs-title,.hljs-section{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}');
  98.  
  99.             pre.textContent = e.data.source;
  100.         } else {
  101.             pre.innerHTML = e.data.source;
  102.             pre.className = 'hljs ' + lang;
  103.         }
  104.  
  105.         fragment.appendChild(pre);
  106.         doc.body.replaceChild(fragment, output);
  107.  
  108.         if (e.data.action === 'beautify') output = doc.getElementsByTagName('pre')[0];
  109.     };
  110.  
  111.     var js_beautify = GM.getResourceUrl('js_beautify'),
  112.         css_beautify = GM.getResourceUrl('css_beautify'),
  113.         hljs = GM.getResourceUrl('hljs');
  114.  
  115.     Promise.all([js_beautify, css_beautify, hljs]).then(function (urls) {
  116.         worker.postMessage({
  117.             libs: urls,
  118.             lang: lang,
  119.             content: output.textContent
  120.         });
  121.     });
  122.  
  123. }());