代碼片斷高亮

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

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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         HighlightEveryCode
// @name:zh-CN   代码片段高亮
// @name:zh-TW   代碼片斷高亮
// @namespace    hoothin
// @version      0.1
// @description  Add a icon that allows syntax highlighting and beautify of source code snippets on current page
// @description:zh-CN 选择代码片段后点击图标高亮并美化代码
// @description:zh-TW 選擇代碼片段后點擊圖標高亮並美化代碼
// @author       Hoothin
// @include      *
// ==/UserScript==

(function() {
    'use strict';
    var codeIcon=document.createElement("img");
    var codes;
    codeIcon.style="position:fixed;z-index:99999;display:none;cursor: pointer;";
    codeIcon.title="Show this code snippet";
    codeIcon.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANAgMAAAACm3yoAAAADFBMVEX///8AAAAwMDBTU1Og8tv3AAAAAnRSTlNAAIbqgj0AAAAlSURBVAjXY1i1agXD//9/GA4w8DDcXDWH4SKDDE761ao1DEAAAE49FDOQFA4bAAAAAElFTkSuQmCC";
    codeIcon.onclick=function(){
        let c = window.open("", "_blank", "width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0");
        c.document.write('<title>Code Snippet</title>');
        c.document.write('<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css"/>');
        c.document.write('<script>var code,codeStr;window.onload=function(){code=document.querySelector("#code");codeStr=code.innerHTML;prettyPrint();}</script>');
        c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js?skin=sons-of-obsidian"></script>');
        c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify.min.js"></script>');
        c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-html.min.js"></script>');
        c.document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-css.min.js"></script>');
        c.document.write('Code formatting: <a href="#" onclick="code.innerHTML=js_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Javaspcript</a> '+
                         '<a href="#" onclick="code.innerHTML=html_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Html</a> '+
                         '<a href="#" onclick="code.innerHTML=css_beautify(codeStr);code.className=\'prettyprint linenums\';prettyPrint();return false;">Css</a> '+
                         '<a href="#" onclick="code.innerHTML=codeStr;code.className=\'prettyprint linenums\';prettyPrint();return false;">Raw</a>');
        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>");
        c.document.close();
    };
    document.body.appendChild(codeIcon);
    document.addEventListener('mouseup', function(o) {
        if (o.button === 0) {
            setTimeout(function(){
                codes = document.getSelection().toString().replace(/\</g,"&lt;").replace(/\>/g,"&gt;");
                if(codes){
                    codeIcon.style.display="block";
                    let pos=getMousePos(o);
                    codeIcon.style.top=pos.y+15+"px";
                    codeIcon.style.left=pos.x+15+"px";
                }else{
                    codeIcon.style.display="none";
                }
            },1);
        }
    },false);

    function getMousePos(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = (e.pageX || e.clientX) - scrollX;
        var y = (e.pageY || e.clientY) - scrollY;
        return { 'x': x, 'y': y };
    }
})();