☰

Javascript-css beautify

Beautify and syntax highlighting for source code javascript, json, css.

当前为 2018-05-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Javascript-css beautify
  3. // @namespace    http://devs.forumvi.com
  4. // @description  Beautify and syntax highlighting for source code javascript, json, css.
  5. // @version      3.0.0
  6. // @icon         http://i.imgur.com/kz8nqz1.png
  7. // @author       Zzbaivong
  8. // @oujs:author  baivong
  9. // @license      MIT; https://baivong.mit-license.org/license.txt
  10. // @match        http://*/*
  11. // @match        https://*/*
  12. // @noframes
  13. // @supportURL   https://github.com/lelinhtinh/Userscript/issues
  14. // @run-at       document-idle
  15. // @grant        none
  16. // ==/UserScript==
  17.  
  18. /* global importScripts */
  19. (function () {
  20.     'use strict';
  21.  
  22.     var doc = document,
  23.         contenttype = doc.contentType,
  24.         pathname = location.pathname;
  25.  
  26.     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;
  27.  
  28.     var output = doc.getElementsByTagName('pre')[0],
  29.         lang = 'javascript',
  30.         blobURL, worker,
  31.  
  32.         addstyle = function (aCss) {
  33.             var head = doc.getElementsByTagName('head')[0];
  34.             if (!head) return null;
  35.             var style = doc.createElement('style');
  36.             style.setAttribute('type', 'text/css');
  37.             style.textContent = aCss;
  38.             head.appendChild(style);
  39.             return style;
  40.         };
  41.  
  42.     if (contenttype === 'text/css' || /.+\.css$/.test(pathname)) lang = 'css';
  43.  
  44.     blobURL = URL.createObjectURL(new Blob(['(',
  45.         function () {
  46.             self.window = {};
  47.  
  48.             self.onmessage = function (e) {
  49.                 var source = e.data.content,
  50.                     beautify = 'js_beautify';
  51.  
  52.                 if (e.data.lang === 'javascript') {
  53.                     importScripts('https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js');
  54.                 } else {
  55.                     importScripts('https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js');
  56.                     beautify = 'css_beautify';
  57.                 }
  58.                 source = self.window[beautify](source);
  59.  
  60.                 self.postMessage({
  61.                     action: 'beautify',
  62.                     source: source
  63.                 });
  64.  
  65.                 importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js');
  66.                 source = self.window.hljs.highlight(e.data.lang, source, true).value;
  67.  
  68.                 source = source.split('\n');
  69.                 source = source.join('</code><code>');
  70.                 source = '<code>' + source + '</code>';
  71.  
  72.                 self.postMessage({
  73.                     action: 'hljs',
  74.                     source: source
  75.                 });
  76.             };
  77.  
  78.         }.toString(),
  79.         ')()'
  80.     ], {
  81.         type: 'text/javascript'
  82.     }));
  83.     worker = new Worker(blobURL);
  84.  
  85.     worker.onmessage = function (e) {
  86.         if (!e.data) return;
  87.  
  88.         var fragment = doc.createDocumentFragment(),
  89.             pre = doc.createElement('pre');
  90.  
  91.         if (e.data.action === 'beautify') {
  92.             addstyle('*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{counter-reset:line-numbers;white-space:pre-wrap}code::before{counter-increment:line-numbers;content:counter(line-numbers);display:block;position:absolute;left:-4.5em;top:0;width:4em;text-align:right;color:#60686f;white-space:pre}code{display:block;position:relative;margin-left:4em;padding-left:.5em;min-height:1em;border-left:1px solid #32363b}pre{padding:.5em .5em .5em 5em;border-left:1px solid #1d1f21}pre.hljs{padding-left:.5em;border-left:0 none}code::after{content:".";visibility:hidden} .hljs-comment,.hljs-quote{color:#969896}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c66}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#de935f}.hljs-attribute{color:#f0c674}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b5bd68}.hljs-title,.hljs-section{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}');
  93.  
  94.             pre.textContent = e.data.source;
  95.         } else {
  96.             pre.innerHTML = e.data.source;
  97.             pre.className = 'hljs ' + lang;
  98.         }
  99.  
  100.         fragment.appendChild(pre);
  101.         doc.body.replaceChild(fragment, output);
  102.  
  103.         if (e.data.action === 'beautify') output = doc.getElementsByTagName('pre')[0];
  104.     };
  105.  
  106.     worker.postMessage({
  107.         lang: lang,
  108.         content: output.textContent
  109.     });
  110.  
  111. }());