☰

Javascript-css beautify

Beautify and syntax highlighting for source code JavaScript, JSON, CSS.

As of 2019-10-28. See the latest version.

  1. // ==UserScript==
  2. // @name            Javascript-css beautify
  3. // @name:vi         Javascript-css beautify
  4. // @namespace       http://devs.forumvi.com
  5. // @description     Beautify and syntax highlighting for source code JavaScript, JSON, CSS.
  6. // @description:vi  Định dạng và làm đẹp mã nguồn JavaScript, JSON, CSS.
  7. // @version         3.2.3
  8. // @icon            http://i.imgur.com/kz8nqz1.png
  9. // @author          Zzbaivong
  10. // @oujs:author     baivong
  11. // @license         MIT; https://baivong.mit-license.org/license.txt
  12. // @match           http://*/*
  13. // @match           https://*/*
  14. // @resource        js_beautify https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.min.js
  15. // @resource        css_beautify https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-css.min.js
  16. // @resource        hljs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js
  17. // @resource        dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css
  18. // @resource        light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-light.min.css
  19. // @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  20. // @noframes
  21. // @supportURL      https://github.com/lelinhtinh/Userscript/issues
  22. // @run-at          document-idle
  23. // @grant           GM.getResourceUrl
  24. // @grant           GM_getResourceURL
  25. // @grant           GM_addStyle
  26. // @grant           GM_getResourceText
  27. // ==/UserScript==
  28.  
  29. /* eslint-env worker, es6 */
  30. (function() {
  31.   'use strict';
  32.  
  33.   /**
  34.    * Color themes
  35.    * @type {String} dark|light
  36.    */
  37.   const STYLE = 'dark';
  38.  
  39.   /* === DO NOT CHANGE === */
  40.  
  41.   var doc = document,
  42.     contenttype = doc.contentType,
  43.     pathname = location.pathname;
  44.  
  45.   if (
  46.     !(
  47.       /^application\/(x-javascript|javascript|json)|text\/css$/.test(contenttype) ||
  48.       (/.+\.(js|json|css)$/.test(pathname) &&
  49.         !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contenttype))
  50.     )
  51.   )
  52.     return;
  53.  
  54.   var output = doc.getElementsByTagName('pre')[0],
  55.     lang = 'javascript',
  56.     blobURL,
  57.     worker;
  58.  
  59.   if (contenttype === 'text/css' || /.+\.css$/.test(pathname)) lang = 'css';
  60.  
  61.   blobURL = URL.createObjectURL(
  62.     new Blob(
  63.       [
  64.         '(',
  65.         function() {
  66.           self.window = {};
  67.  
  68.           self.onmessage = function(e) {
  69.             var source = e.data.content,
  70.               beautify = 'js_beautify';
  71.  
  72.             if (e.data.lang === 'javascript') {
  73.               importScripts(e.data.libs[0]);
  74.             } else {
  75.               importScripts(e.data.libs[1]);
  76.               beautify = 'css_beautify';
  77.             }
  78.             source = self.window[beautify](source);
  79.  
  80.             importScripts(e.data.libs[2]);
  81.             source = self.window.hljs.highlight(e.data.lang, source, true).value;
  82.  
  83.             self.postMessage({
  84.               source: source,
  85.             });
  86.           };
  87.         }.toString(),
  88.         ')()',
  89.       ],
  90.       {
  91.         type: 'text/javascript',
  92.       }
  93.     )
  94.   );
  95.   worker = new Worker(blobURL);
  96.  
  97.   worker.onmessage = function(e) {
  98.     if (!e.data) return;
  99.  
  100.     var fragment = doc.createDocumentFragment(),
  101.       pre = doc.createElement('pre');
  102.  
  103.     pre.innerHTML = e.data.source;
  104.     pre.className = 'hljs ' + lang;
  105.  
  106.     fragment.appendChild(pre);
  107.     doc.body.replaceChild(fragment, output);
  108.   };
  109.  
  110.   var js_beautify = GM.getResourceUrl('js_beautify'),
  111.     css_beautify = GM.getResourceUrl('css_beautify'),
  112.     hljs = GM.getResourceUrl('hljs');
  113.  
  114.   GM.getResourceUrl(STYLE)
  115.     .then(function(url) {
  116.       return fetch(url);
  117.     })
  118.     .then(function(resp) {
  119.       return resp.text();
  120.     })
  121.     .then(function(style) {
  122.       GM_addStyle(
  123.         '*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}' +
  124.           style
  125.       );
  126.     });
  127.  
  128.   Promise.all([js_beautify, css_beautify, hljs]).then(function(urls) {
  129.     worker.postMessage({
  130.       libs: urls,
  131.       lang: lang,
  132.       content: output.textContent,
  133.     });
  134.   });
  135. })();