☰

Javascript-css beautify

Beautify and syntax highlighting for source code JavaScript, JSON, CSS. From v4.1+, a few more formats are also supported.

安装此脚本?
作者推荐脚本

您可能也喜欢viewsource。

安装此脚本 
  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. From v4.1+, a few more formats are also supported.
  6. // @description:vi  Định dạng và làm đẹp mã nguồn JavaScript, JSON, CSS. Từ bản v4.1+, một vài định dạng khác cũng được hỗ trợ .
  7. // @version         4.1.2
  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           *://*/*
  13. // @require         https://unpkg.com/prettier@2.8.4/standalone.js
  14. // @require         https://unpkg.com/prettier@2.8.4/parser-postcss.js
  15. // @require         https://unpkg.com/prettier@2.8.4/parser-html.js
  16. // @require         https://unpkg.com/prettier@2.8.4/parser-babel.js
  17. // @require         https://unpkg.com/prettier@2.8.4/parser-graphql.js
  18. // @require         https://unpkg.com/prettier@2.8.4/parser-markdown.js
  19. // @require         https://unpkg.com/prettier@2.8.4/parser-typescript.js
  20. // @require         https://unpkg.com/prettier@2.8.4/parser-yaml.js
  21. // @require         https://unpkg.com/prettier@2.8.4/parser-angular.js
  22. // @require         https://unpkg.com/@prettier/plugin-php@0.19.3/standalone.js
  23. // @require         https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js
  24. // @resource        dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css
  25. // @resource        light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-light.min.css
  26. // @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
  27. // @noframes
  28. // @supportURL      https://github.com/lelinhtinh/Userscript/issues
  29. // @run-at          document-idle
  30. // @grant           GM.getResourceUrl
  31. // @grant           GM_getResourceURL
  32. // @grant           GM_addStyle
  33. // @inject-into     content
  34. // ==/UserScript==
  35.  
  36. /* global prettier, prettierPlugins, hljs */
  37. /* eslint-env worker, es6 */
  38. (() => {
  39.   'use strict';
  40.  
  41.   /**
  42.    * Color themes
  43.    * @type {'dark'|'light'}
  44.    */
  45.   const STYLE = 'dark';
  46.  
  47.   /* === DO NOT CHANGE === */
  48.  
  49.   const output = document.querySelector('body > pre');
  50.   if (output === null) return;
  51.   if (document.querySelector('body').firstElementChild.tagName !== 'PRE') return;
  52.  
  53.   const contentType = document.contentType,
  54.     pathname = location.pathname;
  55.  
  56.   if (/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contentType)) return;
  57.  
  58.   let parser;
  59.   if (contentType === 'text/css' || /.+\.css$/.test(pathname)) {
  60.     parser = 'css';
  61.   } else if (contentType === 'application/json' || /.+\.(json|map)$/.test(pathname)) {
  62.     parser = 'json';
  63.   } else if (/^application\/(x-javascript|javascript)$/.test(contentType) || /.+\.jsx?$/.test(pathname)) {
  64.     parser = 'babel';
  65.   } else if (contentType === 'text/plain') {
  66.     if (/.+\.component\.html$/.test(pathname)) {
  67.       parser = 'angular';
  68.     } else if (/.+\.(gql|graphql)$/.test(pathname)) {
  69.       parser = 'graphql';
  70.     } else if (/.+\.ya?ml$/.test(pathname)) {
  71.       parser = 'yaml';
  72.     } else if (/.+\.(x?html?|xml)$/.test(pathname)) {
  73.       parser = 'html';
  74.     } else if (/.+\.tsx?$/.test(pathname)) {
  75.       parser = 'typescript';
  76.     } else if (/.+\.php$/.test(pathname)) {
  77.       parser = 'php';
  78.     } else if (/.+\.vue$/.test(pathname)) {
  79.       parser = 'vue';
  80.     } else if (/.+\.(less|scss)$/.test(pathname)) {
  81.       parser = 'css';
  82.     } else if (/.+\.(md|markdown)$/.test(pathname)) {
  83.       parser = 'markdown';
  84.     }
  85.   }
  86.  
  87.   GM.getResourceUrl(STYLE)
  88.     .then((url) => fetch(url))
  89.     .then((resp) => resp.text())
  90.     .then((style) =>
  91.       GM_addStyle(
  92.         `${style}*{margin:0;padding:0}html{line-height:1em;background:${
  93.           STYLE === 'dark' ? '#282c34' : '#fafafa'
  94.         }}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}`
  95.       )
  96.     );
  97.  
  98.   let source = output.textContent;
  99.  
  100.   try {
  101.     if (parser) source = prettier.format(source, { parser: parser, plugins: prettierPlugins });
  102.   } catch (err) {
  103.     console.error(err);
  104.   }
  105.  
  106.   source = hljs.highlightAuto(source).value;
  107.  
  108.   const fragment = document.createDocumentFragment(),
  109.     pre = document.createElement('pre');
  110.  
  111.   pre.innerHTML = source;
  112.   pre.className = 'hljs';
  113.  
  114.   fragment.appendChild(pre);
  115.   document.body.replaceChild(fragment, output);
  116. })();