☰

Greasy Fork is available in English.

Javascript-css beautify

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

当前为 2019-09-30 提交的版本，查看 最新版本。

  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.2.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.10.2/beautify.min.js
  13. // @resource     css_beautify https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-css.min.js
  14. // @resource     hljs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js
  15. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css
  16. // @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-light.min.css
  17. // @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  18. // @noframes
  19. // @supportURL   https://github.com/lelinhtinh/Userscript/issues
  20. // @run-at       document-idle
  21. // @grant        GM.getResourceUrl
  22. // @grant        GM_getResourceURL
  23. // @grant        GM_addStyle
  24. // @grant        GM_getResourceText
  25. // ==/UserScript==
  26.  
  27. /* eslint-env worker, es6 */
  28. (function () {
  29.     'use strict';
  30.  
  31.     /**
  32.      * Color themes
  33.      * @type {String} dark|light
  34.      */
  35.     const STYLE = 'dark';
  36.  
  37.  
  38.     /* === DO NOT CHANGE === */
  39.  
  40.     var doc = document,
  41.         contenttype = doc.contentType,
  42.         pathname = location.pathname;
  43.  
  44.     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;
  45.  
  46.     var output = doc.getElementsByTagName('pre')[0],
  47.         lang = 'javascript',
  48.         blobURL, worker;
  49.  
  50.     if (contenttype === 'text/css' || /.+\.css$/.test(pathname)) lang = 'css';
  51.  
  52.     blobURL = URL.createObjectURL(new Blob(['(',
  53.         function () {
  54.             self.window = {};
  55.  
  56.             self.onmessage = function (e) {
  57.                 var source = e.data.content,
  58.                     beautify = 'js_beautify';
  59.  
  60.                 if (e.data.lang === 'javascript') {
  61.                     importScripts(e.data.libs[0]);
  62.                 } else {
  63.                     importScripts(e.data.libs[1]);
  64.                     beautify = 'css_beautify';
  65.                 }
  66.                 source = self.window[beautify](source);
  67.  
  68.                 importScripts(e.data.libs[2]);
  69.                 source = self.window.hljs.highlight(e.data.lang, source, true).value;
  70.  
  71.                 self.postMessage({
  72.                     source: source
  73.                 });
  74.             };
  75.  
  76.         }.toString(),
  77.         ')()'
  78.     ], {
  79.         type: 'text/javascript'
  80.     }));
  81.     worker = new Worker(blobURL);
  82.  
  83.     worker.onmessage = function (e) {
  84.         if (!e.data) return;
  85.  
  86.         var fragment = doc.createDocumentFragment(),
  87.             pre = doc.createElement('pre');
  88.  
  89.         pre.innerHTML = e.data.source;
  90.         pre.className = 'hljs ' + lang;
  91.  
  92.         fragment.appendChild(pre);
  93.         doc.body.replaceChild(fragment, output);
  94.     };
  95.  
  96.     var js_beautify = GM.getResourceUrl('js_beautify'),
  97.         css_beautify = GM.getResourceUrl('css_beautify'),
  98.         hljs = GM.getResourceUrl('hljs'),
  99.         style = GM_getResourceText(STYLE);
  100.  
  101.     GM_addStyle('*{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}' + style);
  102.  
  103.     Promise.all([js_beautify, css_beautify, hljs]).then(function (urls) {
  104.         worker.postMessage({
  105.             libs: urls,
  106.             lang: lang,
  107.             content: output.textContent
  108.         });
  109.     });
  110.  
  111. }());