☰

代码片段高亮

选择代码片段后点击图标弹出新窗口显示高亮美化与格式化后的代码与字数统计

当前为 2016-11-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Highlight Every Code
  3. // @name:zh-CN   代码片段高亮
  4. // @name:zh-TW   代碼片斷高亮
  5. // @namespace    hoothin
  6. // @version      0.79
  7. // @description  Add a icon to popup a window that allows syntax highlighting and beautify and word count of source code snippets on current page
  8. // @description:zh-CN 选择代码片段后点击图标弹出新窗口显示高亮美化与格式化后的代码与字数统计
  9. // @description:zh-TW 選擇代碼片段后點擊圖標彈出新窗口顯示高亮美化與格式化后的代碼與字數統計
  10. // @author       Hoothin
  11. // @grant        GM_openInTab
  12. // @compatible   chrome
  13. // @compatible   firefox
  14. // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=rixixi@sina.com&item_name=Greasy+Fork+donation
  15. // @contributionAmount 1
  16. // @include      *
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.     'use strict';
  21.     var isChrome=unsafeWindow.chrome;
  22.     var codeIcon=document.createElement("img");
  23.     var codes, scrollX, scrollY;
  24.     codeIcon.style="position:fixed;z-index:99999;display:none;cursor: pointer;";
  25.     codeIcon.title="Show this code snippet";
  26.     codeIcon.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYAgMAAACD0OXYAAAACVBMVEX7+/swMDBTU1MLxgsCAAAAJElEQVQI12MIBYEAGLUKBBbAqAUMQICgAoAqoBQ95JaCnASjAAgXMdk3d5HTAAAAAElFTkSuQmCC";
  27.     codeIcon.onmousedown=function(){
  28.         let html='<title>Code Snippet</title>'+
  29.             '<link rel="stylesheet" href="http'+(isChrome?'s':'')+'://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css"/>'+
  30.             '<script>var code,codeStr;window.onload=function(){code=document.querySelector("#code");codeStr=code.innerHTML.replace(/&amp;/g, "&").replace(/&(nbsp;|amp;|#39;|quot;)/g, "&amp;$1");prettyPrint();}</script>'+
  31.             '<script src="http'+(isChrome?'s':'')+'://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js?skin=sons-of-obsidian"></script>'+
  32.             '<script src="http'+(isChrome?'s':'')+'://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify.min.js"></script>'+
  33.             '<script src="http'+(isChrome?'s':'')+'://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-html.min.js"></script>'+
  34.             '<script src="http'+(isChrome?'s':'')+'://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-css.min.js"></script>'+
  35.             'Code formatting: <a href="#" onclick="code.innerHTML=js_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Javaspcript</a> '+
  36.             '<a href="#" onclick="code.innerHTML=html_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Html</a> '+
  37.             '<a href="#" onclick="code.innerHTML=css_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Css</a> '+
  38.             '<a href="#" onclick="code.innerHTML=codeStr;code.className=\'prettyprint linenums\';prettyPrint();return false;">Raw</a> <b style="color:red">('+codes.length+' words)</b>'+
  39.             '<pre id="code" class="prettyprint linenums" style="word-wrap: break-word; white-space: pre-wrap;border: 1px solid rgb(136, 136, 204);border-radius: 8px;">' + codes + "</pre>";
  40.         if(isChrome){
  41.             let c = window.open("", "_blank", "width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0");
  42.             c.document.write(html);
  43.             c.document.close();
  44.         }else{
  45.             GM_openInTab('data:text/html;charset=utf-8,' + encodeURIComponent(html));
  46.         }
  47.     };
  48.     document.body.appendChild(codeIcon);
  49.     document.addEventListener('mousedown', function(o) {
  50.         codeIcon.style.display="none";
  51.     });
  52.     document.addEventListener('mouseup', function(o) {
  53.         if (o.button === 0 && (o.ctrlKey || o.altKey || o.metaKey || o.shiftKey)) {
  54.             setTimeout(function(){
  55.                 codes = document.getSelection().toString().replace(/&/g, "&amp;").replace(/\</g,"&lt;").replace(/\>/g,"&gt;");
  56.                 if(codes){
  57.                     codeIcon.style.display="block";
  58.                     let pos=getMousePos(o);
  59.                     let left, top;
  60.                     if(isChrome){
  61.                         top=pos.y>document.documentElement.clientHeight-50?(pos.y-25):(pos.y+15);
  62.                         left=pos.x>document.documentElement.clientWidth-50?(pos.x-25):(pos.x+15);
  63.                     }else{
  64.                         top=pos.y-25;
  65.                         left=pos.x+15;
  66.                     }
  67.                     codeIcon.style.top=top+"px";
  68.                     codeIcon.style.left=left+"px";
  69.                 }
  70.             },1);
  71.         }
  72.     },false);
  73.  
  74.     function getMousePos(event) {
  75.         var e = event || window.event;
  76.         scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  77.         scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  78.         var x = (e.pageX || e.clientX) - scrollX;
  79.         var y = (e.pageY || e.clientY) - scrollY;
  80.         return { 'x': x, 'y': y };
  81.     }
  82. })();