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. })();