Javascript-css beautify

Beautify and syntax highlighting for source code JavaScript, JSON, CSS.
Verzia zo dňa 16.08.2020. Pozri najnovšiu verziu.
Navštíviť stránky autora skriptu pre podporu, spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==UserScript==
// @name            Javascript-css beautify
// @name:vi         Javascript-css beautify
// @namespace       http://devs.forumvi.com
// @description     Beautify and syntax highlighting for source code JavaScript, JSON, CSS.
// @description:vi  Định dạng và làm đẹp mã nguồn JavaScript, JSON, CSS.
// @version         4.0.0
// @icon            http://i.imgur.com/kz8nqz1.png
// @author          Zzbaivong
// @oujs:author     baivong
// @license         MIT; https://baivong.mit-license.org/license.txt
// @match           http://*/*
// @match           https://*/*
// @resource        prettier https://unpkg.com/[email protected]/standalone.js
// @resource        parser-babel https://unpkg.com/[email protected]/parser-babel.js
// @resource        parser-postcss https://unpkg.com/[email protected]/parser-postcss.js
// @resource        hljs https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js
// @resource        dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-dark.min.css
// @resource        light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-light.min.css
// @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
// @noframes
// @supportURL      https://github.com/lelinhtinh/Userscript/issues
// @run-at          document-idle
// @grant           GM.getResourceUrl
// @grant           GM_getResourceURL
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

/* eslint-env worker, es6 */
(() => {
  'use strict';

  /**
   * Color themes
   * @type {'dark'|'light'}
   */
  const STYLE = 'dark';

  /* === DO NOT CHANGE === */

  const doc = document,
    contentType = doc.contentType,
    pathname = location.pathname;

  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;

  let parser;
  if (contentType === 'text/css' || /.+\.css$/.test(pathname)) {
    parser = 'css';
  } else if (contentType === 'application/json' || /.+\.json$/.test(pathname)) {
    parser = 'json';
  } else {
    parser = 'babel';
  }

  const blobURL = URL.createObjectURL(
    new Blob(
      [
        '(',
        function () {
          self.onmessage = (e) => {
            let source = e.data.content;

            importScripts(e.data.libs[0]);
            importScripts(e.data.libs[1]);
            /* global prettierPlugins */
            source = prettier.format(source, { parser: e.data.parser, plugins: prettierPlugins });

            importScripts(e.data.libs[2]);
            source = hljs.highlight(e.data.parser === 'babel' ? 'javascript' : e.data.parser, source, true).value;

            self.postMessage({
              theme: e.data.libs[3],
              source: source,
            });
          };
        }.toString(),
        ')()',
      ],
      {
        type: 'application/javascript',
      }
    )
  );

  const output = doc.getElementsByTagName('pre')[0];
  const worker = new Worker(blobURL);

  worker.onmessage = (e) => {
    if (!e.data) return;

    const fragment = doc.createDocumentFragment(),
      pre = doc.createElement('pre');

    pre.innerHTML = e.data.source;
    pre.className = 'hljs';

    fragment.appendChild(pre);
    doc.body.replaceChild(fragment, output);

    GM_addStyle(
      `${e.data.theme}*{margin:0;padding:0}html{line-height:1em;background:${
        STYLE === 'dark' ? '#282c34' : '#fafafa'
      }}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}`
    );
  };

  const prettier = GM.getResourceUrl('prettier'),
    parserBabel = GM.getResourceUrl('parser-babel'),
    parserPostcss = GM.getResourceUrl('parser-postcss'),
    hljs = GM.getResourceUrl('hljs'),
    theme = GM.getResourceUrl(STYLE)
      .then((url) => fetch(url))
      .then((resp) => resp.text());

  Promise.all([prettier, parser === 'css' ? parserPostcss : parserBabel, hljs, theme]).then((urls) => {
    worker.postMessage({
      libs: urls,
      parser: parser,
      content: output.textContent,
    });
  });
})();