☰

Syntax Highlighting - UserStyles.world

Syntax Highlighting for the Source Code

目前為 2023-06-25 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Syntax Highlighting - UserStyles.world
// @namespace    https://github.com/pabli24
// @version      0.1
// @description  Syntax Highlighting for the Source Code
// @author       Pabli
// @license      MIT
// @match        https://userstyles.world/style/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=userstyles.world
// @require      https://greasyfork.org/scripts/469422-highlight-js-css-less-scss-stylus/code/Highlightjs%20CSS%20Less%20SCSS%20Stylus.js?version=1210677
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

//tomorrow-night-bright
GM_addStyle(`pre{background-color:#242424}pre code.hljs{display:block}code.hljs{padding:3px 5px}.hljs-comment,.hljs-quote{color:#969896}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d54e53}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#e78c45}.hljs-attribute{color:#e7c547}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#b9ca4a}.hljs-section,.hljs-title{color:#7aa6da}.hljs-keyword,.hljs-selector-tag{color:#c397d8}.hljs{color:#eaeaea}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}`);

let code = document.querySelector("#code code");
let codeMark = document.querySelector("#code mark");
let userCss = document.getElementById("install").href;

highlight();

if (codeMark) {
	codeMark.innerHTML += `<a id="fullcode" style="margin: 0 5px;cursor: pointer;font-weight: bold"> Load full code</a>`
	document.getElementById("fullcode").onclick = () => fullUserCss();
}

function highlight() {
	if (/@preprocessor\s+stylus/.test(code.innerText)) {
		code.classList.add("language-stylus");
	} else if (/@preprocessor\s+less/.test(code.innerText)) {
		code.classList.add("language-less");
	} else {
		code.classList.add("language-css");
	}
	hljs.highlightAll();
}

async function fullUserCss() {
	const response = await fetch(userCss);
	const css = await response.text();
	code.innerHTML = css;
	codeMark.remove();
	highlight();
}

})();