☰

Javascript-css beautify

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

当前为 2020-08-16 提交的版本，查看 最新版本。

  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         4.0.0
  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        prettier https://unpkg.com/prettier@2.0.5/standalone.js
  15. // @resource        parser-babel https://unpkg.com/prettier@2.0.5/parser-babel.js
  16. // @resource        parser-postcss https://unpkg.com/prettier@2.0.5/parser-postcss.js
  17. // @resource        hljs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js
  18. // @resource        dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-dark.min.css
  19. // @resource        light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-light.min.css
  20. // @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  21. // @noframes
  22. // @supportURL      https://github.com/lelinhtinh/Userscript/issues
  23. // @run-at          document-idle
  24. // @grant           GM.getResourceUrl
  25. // @grant           GM_getResourceURL
  26. // @grant           GM_addStyle
  27. // @grant           GM_getResourceText
  28. // ==/UserScript==
  29.  
  30. /* eslint-env worker, es6 */
  31. (() => {
  32.   'use strict';
  33.  
  34.   /**
  35.    * Color themes
  36.    * @type {'dark'|'light'}
  37.    */
  38.   const STYLE = 'dark';
  39.  
  40.   /* === DO NOT CHANGE === */
  41.  
  42.   const doc = document,
  43.     contentType = doc.contentType,
  44.     pathname = location.pathname;
  45.  
  46.   if (
  47.     !(
  48.       /^application\/(x-javascript|javascript|json)|text\/css$/.test(contentType) ||
  49.       (/.+\.(js|json|css)$/.test(pathname) &&
  50.         !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contentType))
  51.     )
  52.   )
  53.     return;
  54.  
  55.   let parser;
  56.   if (contentType === 'text/css' || /.+\.css$/.test(pathname)) {
  57.     parser = 'css';
  58.   } else if (contentType === 'application/json' || /.+\.json$/.test(pathname)) {
  59.     parser = 'json';
  60.   } else {
  61.     parser = 'babel';
  62.   }
  63.  
  64.   const blobURL = URL.createObjectURL(
  65.     new Blob(
  66.       [
  67.         '(',
  68.         function () {
  69.           self.onmessage = (e) => {
  70.             let source = e.data.content;
  71.  
  72.             importScripts(e.data.libs[0]);
  73.             importScripts(e.data.libs[1]);
  74.             /* global prettierPlugins */
  75.             source = prettier.format(source, { parser: e.data.parser, plugins: prettierPlugins });
  76.  
  77.             importScripts(e.data.libs[2]);
  78.             source = hljs.highlight(e.data.parser === 'babel' ? 'javascript' : e.data.parser, source, true).value;
  79.  
  80.             self.postMessage({
  81.               theme: e.data.libs[3],
  82.               source: source,
  83.             });
  84.           };
  85.         }.toString(),
  86.         ')()',
  87.       ],
  88.       {
  89.         type: 'application/javascript',
  90.       }
  91.     )
  92.   );
  93.  
  94.   const output = doc.getElementsByTagName('pre')[0];
  95.   const worker = new Worker(blobURL);
  96.  
  97.   worker.onmessage = (e) => {
  98.     if (!e.data) return;
  99.  
  100.     const fragment = doc.createDocumentFragment(),
  101.       pre = doc.createElement('pre');
  102.  
  103.     pre.innerHTML = e.data.source;
  104.     pre.className = 'hljs';
  105.  
  106.     fragment.appendChild(pre);
  107.     doc.body.replaceChild(fragment, output);
  108.  
  109.     GM_addStyle(
  110.       `${e.data.theme}*{margin:0;padding:0}html{line-height:1em;background:${
  111.         STYLE === 'dark' ? '#282c34' : '#fafafa'
  112.       }}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}`
  113.     );
  114.   };
  115.  
  116.   const prettier = GM.getResourceUrl('prettier'),
  117.     parserBabel = GM.getResourceUrl('parser-babel'),
  118.     parserPostcss = GM.getResourceUrl('parser-postcss'),
  119.     hljs = GM.getResourceUrl('hljs'),
  120.     theme = GM.getResourceUrl(STYLE)
  121.       .then((url) => fetch(url))
  122.       .then((resp) => resp.text());
  123.  
  124.   Promise.all([prettier, parser === 'css' ? parserPostcss : parserBabel, hljs, theme]).then((urls) => {
  125.     worker.postMessage({
  126.       libs: urls,
  127.       parser: parser,
  128.       content: output.textContent,
  129.     });
  130.   });
  131. })();