Add a icon to popup a window that allows syntax highlighting and beautify and word count of source code snippets on current page
// ==UserScript==
// @name Highlight Every Code
// @name:zh-CN 代码片段高亮
// @name:zh-TW 代碼片斷高亮
// @namespace hoothin
// @version 0.72
// @description Add a icon to popup a window that allows syntax highlighting and beautify and word count 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, scrollX, scrollY;
codeIcon.style="position:fixed;z-index:99999;display:none;cursor: pointer;";
codeIcon.title="Show this code snippet";
codeIcon.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYAgMAAACD0OXYAAAACVBMVEX7+/swMDBTU1MLxgsCAAAAJElEQVQI12MIBYEAGLUKBBbAqAUMQICgAoAqoBQ95JaCnASjAAgXMdk3d5HTAAAAAElFTkSuQmCC";
codeIcon.onmousedown=function(){
let c = window.open("", "_blank", "width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0");
let html='<title>Code Snippet</title>'+
'<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css"/>'+
'<script>var code,codeStr;window.onload=function(){code=document.querySelector("#code");codeStr=code.innerHTML.replace(/ /g, " ").replace(/>/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "\'").replace(/"/g, "\"").replace(/<br>/g, "\n");prettyPrint();}</script>'+
'<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js?skin=sons-of-obsidian"></script>'+
'<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify.min.js"></script>'+
'<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-html.min.js"></script>'+
'<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.4/beautify-css.min.js"></script>'+
'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> <b style="color:red">('+codes.length+' words)</b>'+
'<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.write(html);
c.document.close();
};
document.body.appendChild(codeIcon);
document.addEventListener('mousedown', function(o) {
codeIcon.style.display="none";
});
document.addEventListener('mouseup', function(o) {
if (o.button === 0 && (o.ctrlKey || o.altKey || o.metaKey)) {
setTimeout(function(){
codes = document.getSelection().toString().replace(/\</g,"<").replace(/\>/g,">");
if(codes){
codeIcon.style.display="block";
let pos=getMousePos(o);
let left, top;
if(unsafeWindow.chrome){
top=pos.y>document.documentElement.clientHeight-50?(pos.y-25):(pos.y+15);
left=pos.x>document.documentElement.clientWidth-50?(pos.x-25):(pos.x+15);
}else{
top=pos.y;
left=pos.x;
}
codeIcon.style.top=top+"px";
codeIcon.style.left=left+"px";
}
},1);
}
},false);
function getMousePos(event) {
var e = event || window.event;
scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
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 };
}
})();