☰

Javascript-css beautify

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

2020-08-17 기준 버전입니다. 최신 버전을 확인하세요.

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