JS/CSS をシンタックスハイライトするユーザースクリプト

JSCSS_Highlihgt.user.js

// ==UserScript==
// @name           JSCSS_Highlight
// @description    JS and CSS Syntax Highlight.
// @namespace      http://d.hatena.ne.jp/Griever/
// @author         Griever
// @license        MIT License
// @include        *.js
// @include        *.js?*
// @include        *.jsm
// @include        *.jsee
// @include        *.ng
// @include        data:text/javascript,*
// @include        *.css
// @include        *.css?*
// @include        data:text/css,*
// @exclude        view-source:*
// @version        0.0.1
// ==/UserScript==

(function() {

var pre = document.getElementsByTagName('pre')[0];
if (!pre) return;


var type = "JS";
if (document.contentType && document.contentType.indexOf("css") >= 0 || location.href.indexOf(".css") > 0) {
	type = "CSS";
} 


var JS = {};
var CSS = {};
var BASE = {};


JS.keyword = [
"abstract","boolean","break","byte","case","catch","char","class","const",
"continue","debugger","default","delete","do","double","else","enum","export",
"extends","false","final","finally","float","for","function","goto","if",
"implements","import","in","instanceof","int","interface","long","native","new",
"null","package","private","protected","public","return","short","static",
"super","switch","synchronized","this","throw","throws","transient","true","try",
"typeof","var","void","volatile","while","with",
"let","yield"
];

JS.object = [
"Array","Boolean","Date","Error","EvalError","Function","Number","Object",
"RangeError","ReferenceError","RegExp","String","SyntaxError","TypeError",
"URIError","eval","decodeURI","decodeURIComponent","encodeURI",
"encodeURIComponent","escape","unescape","isFinite","isNaN","parseFloat",
"parseInt"
];

JS.method = [
"addEventListener","removeEventListener","handleEvent","alert","prompt",
"confirm","setTimeout","setInterval","clearTimeout","clearInterval","toString",
"toSource"
];

JS.property = [
"window","document","prototype","callee","caller","event","arguments","infinity","NaN","undefined"
];

JS.hougen = [
"$","jQuery",
"opera","chrome",
"gBrowser","Components",
"GM_log","GM_addStyle","GM_xmlhttpRequest","GM_openInTab",
"GM_registerMenuCommand","GM_getResourceText","GM_getResourceURL",
"GM_setValue","GM_getValue","GM_listValues","GM_deleteValue"
];


CSS.keyword = [
"@import","@charset","@media","@font-face","@page","@namespace",
"(?:\\!important)\\;",
"@-moz-document"
];

CSS.property = [
"(?:(?:min|max)-)?(?:height|width)",
"background(?:-(?:color|image|repeat|attachment|position))?",
"border(?:-(?:top|right|bottom|left))?(?:-(?:width|color|style))?",
"border-(?:collapse|spacing)",
"font(?:-(?:family|style|variant|weight|stretch|size|size-adjust))?",
"list-style(?:-(?:type|image|position))?",
"margin(?:-(?:top|right|bottom|left))?",
"outline(?:-(?:width|style|color))?",
"padding(?:-(?:top|right|bottom|left))?",
"text-(?:indent|align|decoration|shadow|transform)",
"bottom","caption-side","clear","clip","color","content","cursor","direction",
"display","empty-cells","float","left","letter-spacing","line-height",
"marker-offset","overflow","position","quotes","right","table-layout",
"top","unicode-bidi","vertical-align","visibility","white-space","word-spacing",
"z-index"
];

CSS.colors = [
'aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black',
'blanchedalmond','blue','blueviolet','brass','brown','burlywood','cadetblue',
'chartreuse','chocolate','coolcopper','copper','coral','cornflower',
'cornflowerblue','cornsilk','crimson','cyan','darkblue','darkbrown','darkcyan',
'darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta',
'darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen',
'darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink',
'deepskyblue','dimgray','dodgerblue','feldsper','firebrick','floralwhite',
'forestgreen','fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray',
'green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki',
'lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral',
'lightcyan','lightgoldenrodyellow','yellowgreen',

'ActiveBorder','ActiveCaption','AppWorkspace','Background','ButtonFace',
'ButtonHighlight','ButtonShadow','ButtonText','CaptionText','GrayText',
'Highlight','HighlightText','InactiveBorder','InactiveCaption',
'InactiveCaptionText','InfoBackground','InfoText','Menu','MenuText',
'Scrollbar','ThreeDDarkShadow','ThreeDFace','ThreeDHighlight',
'ThreeDLightShadow','ThreeDShadow','Window','WindowFrame','WindowText'
];

CSS.hougen = [
"-moz-appearance",
"-moz-background-inline-policy",
"-moz-binding",
"-moz-border-(?:top|right|bottom|left)-colors",
"-moz-box-(?:align|direction|flex|orient|ordinal-group|pack|sizing)",
"-moz-column-(?:count|width|gap)",
"-moz-float-edge",
"-moz-font-feature-settings",
"-moz-font-language-override",
"-moz-force-broken-image-icon",
"-moz-image-region",
"-moz-opacity",
"-moz-outline(?:-(?:color|style|width|offset))?",
"-moz-outline-radius(?:-(?:top|bottom)(?:left|right))",
"-moz-(?:margin|padding)-(?:end|start)",
"-moz-user-(?:focus|input|modify|select)",
"-moz-border-(?:end|start)(?:-(?:color|style|width))?",
"-moz-stack-sizing",
"-moz-border-image",
"-moz-column-rule(?:-(?:width|style|color))?",
"-moz-transform(?:-origin)?",
"-moz-window-shadow",
"-moz-transition(?:-(?:property|duration|delay|timing-function))?",
"-moz-tab-size"
];


JS.keyword_r  = '\\b(?:' + JS.keyword.join('|') + ')\\b';
JS.object_r   = '\\b(?:' + JS.object.join('|') + ')\\b';
JS.method_r   = '\\b(?:' + JS.method.join('|') + ')\\b';
JS.property_r = '\\b(?:' + JS.property.join('|') + ')\\b';
JS.hougen_r   = '\\b(?:' + JS.hougen.join('|') + ')\\b';
JS.regexp_r   = "\\\/\(\(\?\:\\\\\.\|\\\[\(\?\:\\\\\.\|\[\^\\\]\]\)\*\\\]\|\[\^\\\/\\n\]\)\{0\,100\}\)\\\/\(\[gimy\]\*\)";
JS.CDATA_r    = "&lt\\\;\\!\\\[CDATA\\\[\[\\s\\S\]\*\?\\\]\\\]&gt\\\;";

CSS.keyword_r  = '(?:' + CSS.keyword.join('|') + ')',
CSS.property_r = '\\b(?:' + CSS.property.join('|') + ')\\b'
CSS.colors_r   = '\\b(?:' + CSS.colors.join('|') + ')\\b';
CSS.hougen_r   = '(?:' + CSS.hougen.join('|') + ')\\b',

BASE.URL_r      = "\(\?\:https\?\|ftp\|file\|chrome\|data\)\:\\\/\\\/\\\/\?\[a\-z0\-9\]\[\\w#\$%&\(\)=~\^@\:\;\?_\.\,\/\+\-\]\+\[\\w#\$%&=\:\;\?_\,\/\+\-\]";
BASE.MComment_r = "\\\/\\\*\[\\s\\S\]\*\?\\\*\\\/";
BASE.SComment_r = "\\\/\\\/\.\*";
BASE.string_r   = "\\\"\(\?\:\[\^\\n\\\"\\\\\]\|\\\\\.\|\\\\\\n\)\*\\\"\|\\\'\(\?\:\[\^\\n\\\'\\\\\]\|\\\\\.\|\\\\\\n\)\*\\\'";


JS.keyword_s  = 'color:#a09;';
JS.object_s   = 'color:#c15;';
JS.method_s   = 'color:#027;';
JS.property_s = 'color:#06a;';
JS.hougen_s   = 'color:#06a;';
JS.regexp_s   = 'color:#c11;';
JS.CDATA_s    = 'color:#c11;';

CSS.keyword_s  = 'color:#a09;';
CSS.property_s = 'color:#06a;';
CSS.hougen_s   = 'color:#06a;';

BASE.MComment_s = 'color:#080;';
BASE.SComment_s = 'color:#080;';
BASE.string_s   = 'color:#c11;';
BASE.URL_s      = '';

JS.R_keyword  = new RegExp(JS.keyword_r);
JS.R_object   = new RegExp(JS.object_r);
JS.R_method   = new RegExp(JS.method_r);
JS.R_property = new RegExp(JS.property_r);
JS.R_hougen   = new RegExp(JS.hougen_r);

CSS.R_keyword  = new RegExp(CSS.keyword_r);
CSS.R_property = new RegExp(CSS.property_r);
CSS.R_colors   = new RegExp(CSS.colors_r);
CSS.R_hougen   = new RegExp(CSS.hougen_r);

BASE.R_URL = new RegExp(BASE.URL_r, "g");

JS.R_ALL = new RegExp([
	BASE.MComment_r,
	BASE.SComment_r,
	BASE.string_r,
	JS.CDATA_r,
	JS.keyword_r,
	JS.object_r,
	JS.method_r,
	JS.property_r,
	JS.hougen_r,
	JS.regexp_r
].join('|'), "g");

CSS.R_ALL = new RegExp([
	BASE.MComment_r,
	BASE.string_r,
	CSS.keyword_r,
	CSS.property_r,
	CSS.colors_r,
	CSS.hougen_r
].join('|'), "g");


parse(pre, type);


function parse(pre, type) {
	var text = pre.textContent;
	if (text.length > 100000) {
		log("This script is too long. " + text.length + 'char.');
		return;
	}
	text = text.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
	
	var newText = type == "CSS" ? CSSParser(text) : JSParser(text);

	newText = newText.replace(BASE.R_URL, '<a href="$&" style="'+ BASE.URL_s +'">$&</a>');

	var preRange = document.createRange();
	preRange.selectNodeContents(pre);
	preRange.deleteContents();
	
	/* Firefox 3.6 */
	var newDoc = !window.opera && !window.chrome && !("getBoundingClientRect" in preRange)?
		createDocument():
		document;

	var range = newDoc.createRange();
	range.selectNodeContents(newDoc.body);
	var df = range.createContextualFragment(newText);
	range.detach();
	preRange.insertNode(df);
	preRange.detach();

}

function JSParser(aText) {
	return aText.replace(JS.R_ALL, function(str, offset, s) {
		if (str.indexOf("//") === 0) 
		{
			return '<span style="'+ BASE.SComment_s +'">' + str + '</span>';
		}
		else if (str.indexOf("/*") === 0) {
			return '<span style="'+ BASE.MComment_s +'">' + str + '</span>';
		}
		else if (str.indexOf("'") === 0 || str.indexOf('"') === 0) {
			return '<span style="'+ BASE.string_s +'">' + str + '</span>';
		}
		else if (str.indexOf("/") === 0) {
			return '<span style="'+ JS.regexp_s +'">' + str + '</span>';
		}
		else if (str.indexOf("&lt;![CDATA[") === 0) {
			if (CSS.R_keyword.test(str))
				return CSSParser(str);
			return '<span style="'+ JS.CDATA_s +'">' + str + '</span>';
		}
		else if (JS.R_keyword.test(str)) {
			return '<span style="'+ JS.keyword_s +'">' + str + '</span>';
		}
		else if (JS.R_object.test(str)) {
			return '<span style="'+ JS.object_s +'">' + str + '</span>';
		}
		else if (JS.R_method.test(str)) {
			return '<span style="'+ JS.method_s +'">' + str + '</span>';
		}
		else if (JS.R_property.test(str)) {
			return '<span style="'+ JS.property_s +'">' + str + '</span>';
		}
		else if (JS.R_hougen.test(str)) {
			return '<span style="'+ JS.hougen_s +'">' + str + '</span>';
		}
		else {
			return str;
		}
	});
}

function CSSParser(aText) {
	return aText.replace(CSS.R_ALL, function(str, offset, s) {
		if (str.indexOf("/*") === 0) {
			return '<span style="'+ BASE.MComment_s +'">' + str + '</span>';
		}
		else if (str.indexOf("'") === 0 || str.indexOf('"') === 0) {
			return '<span style="'+ BASE.string_s +'">' + str.replace(/\"/g, "&quot;").replace(/\'/g, "&apos;") + '</span>';
		}
		else if (CSS.R_hougen.test(str)) {
			return '<span style="'+ CSS.hougen_s +'">' + str + '</span>';
		}
		else if (CSS.R_colors.test(str)) {
			return '<span style="color:'+ str +';">' + str + '</span>';
		}
		else if (CSS.R_keyword.test(str)) {
			return '<span style="'+ CSS.keyword_s +'">' + str + '</span>';
		}
		else if (CSS.R_property.test(str)) {
			return '<span style="'+ CSS.property_s +'">' + str + '</span>';
		}
		else {
			return str;
		}
	});
}


function createDocument(){
	var f = document.createElement('iframe');
	f.style.display = 'none';
	f.src = 'data:text/html,<html><title></title></html>';
	document.body.appendChild(f);
	var doc = f.contentDocument;
	document.body.removeChild(f);
	return doc;
}

function log(str){
	if (typeof GM_log != 'undefined') {
		GM_log(str);
	} else if ('console' in window){
		console.log(str);
	} else if('opera' in window) {
		opera.postError(str);
	}
}

})();