Syntaxify

Universal syntax highlighting

Устаревшая версия за 26.06.2015. Перейдите к последней версии.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==UserScript==
// @name Syntaxify
// @description Universal syntax highlighting
// @namespace http://rob-bolton.co.uk
// @version 1.4
// @include http*
// @grant GM_addStyle
// @grant GM_getResourceText
// @require http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js
// @resource highlightJsCss https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/monokai.min.css
// ==/UserScript==
//

var tagsToSearch = ["pre", "code"];

GM_addStyle(GM_getResourceText("highlightJsCss"));

var codeBlocks = {};
var itemCounter = 0;
var selectedItem;

function isCodeBlock(node) {
	if(node) {
		var tagname = node.tagName.toLowerCase();
		for(var i=0; i<tagsToSearch.length; i++) {
			if(tagname == tagsToSearch[i]) {
				return true;
			}
		}
	}
	
	return false;
}

function wrapSelection() {
	var selection = window.getSelection();
	if(selection.rangeCount > 0) {
		var range = selection.getRangeAt(0);
		var parent = range.startContainer.parentNode;
		if(!isCodeBlock(parent)) {
			var container = document.createElement("code");
			var containerData = addBlock(container);
			containerData.originalFragment = range.cloneContents();
			container.setAttribute("contextmenu", "SyntaxifyPreUnwrapMenu");
			range.surroundContents(container);
		}
	}
}

function unwrap() {
	if(selectedItem) {
		var node = selectedItem;
		var nodeData = codeBlocks[node.id];
		var parent = node.parentNode;
		parent.insertBefore(nodeData.originalFragment, node);
		parent.removeChild(node);
	}
}

function addBlock(node) {
	if(!node.id) {
		node.id = "SyntaxifyBlock" + itemCounter++;
	}
	codeBlocks[node.id] = {
		"node": node,
		"highlighted": false,
		"originalNode": node.cloneNode(true)
	}
	
	return codeBlocks[node.id];
}

function revert(nodeData) {
	var parent = nodeData.node.parentNode;
	parent.insertBefore(nodeData.originalNode, nodeData.node);
	parent.removeChild(nodeData.node);
	nodeData.node = nodeData.originalNode;
	nodeData.highlighted = false;
	if(nodeData.originalFragment) {
		nodeData.node.setAttribute("contextMenu", "SyntaxifyPreUnwrapMenu");
	} else {
		nodeData.node.setAttribute("contextMenu", "SyntaxifyPreMenu");
	}
}

function highlight() {
	var node = selectedItem;
	if(node) {
		if(!codeBlocks[node.id]) {
			addBlock(node);
		}
		var nodeData = codeBlocks[node.id];
		if(nodeData.highlighted === false) {
			nodeData.originalNode = node.cloneNode(true);
			try {
				if(nodeData.lang) {
					node.className = (node.className || "") + " lang-" + nodeData.lang;
				}
				hljs.highlightBlock(node);
			} catch(e) {
				console.err(e);
				revert(nodeData);
				alert(e);
				return;
			}
			nodeData.highlighted = true;
			node.setAttribute("contextMenu", "SyntaxifyPostMenu");
		}
	}
}

function highlightAs() {
	var node = selectedItem;
	if(node) {
		if(!codeBlocks[node.id]) {
				addBlock(node);
		}
		var lang = prompt("Language:");
		if(lang) {
			codeBlocks[node.id].lang = lang;
			highlight();
		} else {
			codeBlocks[node.id].lang = null;
		}
	}
}

function unHighlight() {
	var node = selectedItem;
	if(node) {
		if(!codeBlocks[node.id]) {
			addBlock(node);
		}
		var nodeData = codeBlocks[node.id];
		if(nodeData.highlighted === true) {
			revert(nodeData);
		}
	}
}

var syntaxableElements = [];
for(var i=0; i<tagsToSearch.length; i++) {
	var tagsFound = document.getElementsByTagName(tagsToSearch[i]);
	for(var j=0; j<tagsFound.length; j++) {
		syntaxableElements.push(tagsFound.item(j));
	}
}

if(syntaxableElements) {
	for(var i=0; i<(syntaxableElements.length || 0); i++) {
		syntaxableElements[i].setAttribute("contextmenu", "SyntaxifyPreMenu");
	}
}

var body = document.body;
var bodyMenu;
var bodyMenuId = body.getAttribute("contextmenu");
if(!bodyMenuId) {
	bodyMenu = document.createElement("menu");
	bodyMenu.setAttribute("type", "context");
	bodyMenu.setAttribute("id", "SyntaxifyMenuMain");
} else {
	bodyMenu = document.getElementById(bodyMenuId);
}

var wrapItem = document.createElement("menuitem");
wrapItem.setAttribute("label", "Syntaxify - Wrap with <code>");
wrapItem.addEventListener("click", wrapSelection, false);

bodyMenu.appendChild(wrapItem);
body.appendChild(bodyMenu);
body.setAttribute("contextmenu", bodyMenu.getAttribute("id"));

// Menu for un-highlighted code blocks
var syntaxPreMenu = document.createElement("menu");
syntaxPreMenu.setAttribute("type", "context");
syntaxPreMenu.setAttribute("id", "SyntaxifyPreMenu");

var syntaxPreMenuHighlightItem = document.createElement("menuitem");
syntaxPreMenuHighlightItem.setAttribute("label", "Syntaxify - Highlight");
syntaxPreMenuHighlightItem.addEventListener("click", highlight, false);
syntaxPreMenu.appendChild(syntaxPreMenuHighlightItem);

var syntaxPreMenuHighlightAsItem = document.createElement("menuitem");
syntaxPreMenuHighlightAsItem.setAttribute("label", "Syntaxify - Highlight as...");
syntaxPreMenuHighlightAsItem.addEventListener("click", highlightAs, false);
syntaxPreMenu.appendChild(syntaxPreMenuHighlightAsItem);

body.appendChild(syntaxPreMenu);


// Menu for un-highlighted ad-hoc code blocks created via the context-menu's wrap entry
var syntaxPreUnwrapMenu = syntaxPreMenu.cloneNode(false);
syntaxPreUnwrapMenu.setAttribute("id", "SyntaxifyPreUnwrapMenu");

var syntaxPreUnwrapMenuUnwrapItem = document.createElement("menuitem");
syntaxPreUnwrapMenuUnwrapItem.setAttribute("label", "Syntaxify - Unwrap");
syntaxPreUnwrapMenuUnwrapItem.addEventListener("click", unwrap, false);

var syntaxPreUnwrapMenuHighlightItem = syntaxPreMenuHighlightItem.cloneNode(false);
var syntaxPreUnwrapMenuHighlightAsItem = syntaxPreMenuHighlightAsItem.cloneNode(false);

syntaxPreUnwrapMenuHighlightItem.addEventListener("click", highlight, false);
syntaxPreUnwrapMenuHighlightAsItem.addEventListener("click", highlightAs, false);

syntaxPreUnwrapMenu.appendChild(syntaxPreUnwrapMenuHighlightItem);
syntaxPreUnwrapMenu.appendChild(syntaxPreUnwrapMenuHighlightAsItem);
syntaxPreUnwrapMenu.appendChild(syntaxPreUnwrapMenuUnwrapItem);

body.appendChild(syntaxPreUnwrapMenu);


var syntaxPostMenu = document.createElement("menu");
syntaxPostMenu.setAttribute("type", "context");
syntaxPostMenu.setAttribute("id", "SyntaxifyPostMenu");

var syntaxPostMenuUnHighlightItem = document.createElement("menuitem");
syntaxPostMenuUnHighlightItem.setAttribute("label", "Syntaxify - UnHighlight");
syntaxPostMenuUnHighlightItem.addEventListener("click", unHighlight, false);
syntaxPostMenu.appendChild(syntaxPostMenuUnHighlightItem);

body.appendChild(syntaxPostMenu);

document.addEventListener("mousedown", function(event) {
	if(event.button == 2) {
		var node = event.target;
		while(node.parentNode && !isCodeBlock(node)) {
			node = node.parentNode;
		}
		if(isCodeBlock(node)) {
			selectedItem = node;
		} else {
			selectedItem = null;
		}
	}
});