☰

代碼片斷高亮

選擇代碼片段后點擊圖標高亮並美化代碼

目前為 2016-10-19 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         HighlightEveryCode
  3. // @name:zh-CN   代码片段高亮
  4. // @name:zh-TW   代碼片斷高亮
  5. // @namespace    hoothin
  6. // @version      0.2
  7. // @description  Add a icon that allows syntax highlighting and beautify of source code snippets on current page
  8. // @description:zh-CN 选择代码片段后点击图标高亮并美化代码
  9. // @description:zh-TW 選擇代碼片段后點擊圖標高亮並美化代碼
  10. // @author       Hoothin
  11. // @include      *
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.     var codeIcon=document.createElement("img");
  17.     var codes;
  18.     codeIcon.style="position:fixed;z-index:99999;display:none;cursor: pointer;";
  19.     codeIcon.title="Show this code snippet";
  20.     codeIcon.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANAgMAAAACm3yoAAAADFBMVEX///8AAAAwMDBTU1Og8tv3AAAAAnRSTlNAAIbqgj0AAAAlSURBVAjXY1i1agXD//9/GA4w8DDcXDWH4SKDDE761ao1DEAAAE49FDOQFA4bAAAAAElFTkSuQmCC";
  21.     codeIcon.onclick=function(){
  22.         let c = window.open("", "_blank", "width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0");
  23.         c.document.write('<title>Code Snippet</title>');
  24.         c.document.write('<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css"/>');
  25.         c.document.write('<script>var code,codeStr;window.onload=function(){code=document.querySelector("#code");codeStr=code.innerHTML;prettyPrint();}</script>');
  26.         c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js?skin=sons-of-obsidian"></script>');
  27.         c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify.min.js"></script>');
  28.         c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-html.min.js"></script>');
  29.         c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-css.min.js"></script>');
  30.         c.document.write('Code formatting: <a href="#" onclick="code.innerHTML=js_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Javaspcript</a> '+
  31.                          '<a href="#" onclick="code.innerHTML=html_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Html</a> '+
  32.                          '<a href="#" onclick="code.innerHTML=css_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Css</a> '+
  33.                          '<a href="#" onclick="code.innerHTML=codeStr;code.className=\'prettyprint linenums\';prettyPrint();return false;">Raw</a>');
  34.         c.document.write('<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>");
  35.         c.document.close();
  36.     };
  37.     document.body.appendChild(codeIcon);
  38.     document.addEventListener('mouseup', function(o) {
  39.         codeIcon.style.display="none";
  40.         if (o.button === 0 && (o.ctrlKey || o.metaKey)) {
  41.             setTimeout(function(){
  42.                 codes = document.getSelection().toString().replace(/\</g,"&lt;").replace(/\>/g,"&gt;");
  43.                 if(codes){
  44.                     codeIcon.style.display="block";
  45.                     let pos=getMousePos(o);
  46.                     codeIcon.style.top=pos.y+15+"px";
  47.                     codeIcon.style.left=pos.x+15+"px";
  48.                 }
  49.             },1);
  50.         }
  51.     },false);
  52.  
  53.     function getMousePos(event) {
  54.         var e = event || window.event;
  55.         var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  56.         var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  57.         var x = (e.pageX || e.clientX) - scrollX;
  58.         var y = (e.pageY || e.clientY) - scrollY;
  59.         return { 'x': x, 'y': y };
  60.     }
  61. })();