Push light : Pseudo-Universal Syntax Highlighter, light

Après être tombé sur ce Codepen par Arturs Jansons, j'ai commencé à modifier quelque peu pour arriver à quelque chose d'à peu près aussi léger que microlight. Comme ça ne vaut pas vraiment la création d'un nouveau dépôt Git, je vais juste le poser ici. N'hésitez pas à me contacter si vous pouvez l'améliorer. Notez que je ne l'enveloppe pas dans un évènement DOMContentLoaded, puisque l'on veut qu'il agisse le plus rapidement possible. Ça prend moins de 3 Ko, 2,5 Ko lorsque minifié, en incluant le CSS dans le calcul. Push light peut se tromper (souvent), mais au moins il est léger, fait un poil plus que microlight, et est presque aussi léger… Si besoin, vous pouvez télécharger les fichiers dans sa page de projet.

=> Le Codepen par Arturs Jansons | Microlight | La page de projet

const hightlight = (code) => code
	// Mandatory, else innerHTML comments them with 
	.replaceAll(/(<)/g,'$1')
	// Markup
	.replaceAll(/(?:<<\/span>)([\w\/!:]+[^\s\n>]?)(>|\s)/g,'<$1$2')
	// Strings
	.replaceAll(/('.*?'|"(?!c\-markup|>).*?")/g,'$1')
	// Operators
	.replaceAll(/\b(a(?:bstract|lias|rray|s|ssert)|b(?:egin|reak)|de(?:bugger|clare|f|fault|fer|l|legate|lete)|do|e(?:cho|l(?:se|seif|if)?|nd(?:if)?|nsure|num|vent|x(?:cept|ec|it|p(?:licit|ort)?|te(?:nds|rn)?)?)|f(?:inal|inally|or|oreach|rom|un(?:c|ction)?)|c(?:ase|atch|har|lass |lone|onst|ontinue)|g(?:oto|lobal)|i(?:f|mp(?:lements|licit|ort)?|n(?:it|clude(?:_once)?|stanceof|t(?:erface|ernal)?)?)|l(?:et|ock)|n(?:amespace|ative|ext|ew |ot)|o(?:perator|r|ut|verride)|p(?:ackage|rivate|rot(?:ected|ocol)?|ublic)|r(?:aise|e(?:adonly|do|f|gister|peat|quire|quire_once|scue|strict|try|turn)?)|s(?:ealed|elf|hort|igned|izeof|tatic|truct|ubscript|uper|ynchronized|witch)|t(?:hen|his|hrows |ry|ypeof)|u(?:n(?:def|defined|ion|less|signed|til)?|se|sing)|v(?:ar|irtual|olatile)|w(?:h(en|ere|ile)|ith)|xor|yield)([^a-z0-9\$_])/g,
		'$1$3')
	// Types
	.replaceAll(/\b(Array|BigInt|Boolean|Function|Infinity|Math|NaN|Number|Object|RegExp|String|Symbol|false|float|int|module|null|this|true|undefined)([^a-z0-9\$_])/g,
		'$1$2')
	// Comments
	.replaceAll(/(\/\*[^]*?\*\/|<<\/span>\!\-\-[^]*?\-\->|(?$1')
	// Variables & Function names
	.replaceAll(/([a-z\_\$][a-z0-9_]*)(\s?([\(\)\[\];]|[=+\-\*,<]\s)|\s>)/gi,'$1$2')
	// Braces
	.replaceAll(/(\{|\}|\]|\[|\|)/gi,'$1')
	// Numbers
	.replaceAll(/(0x[0-9a-f]*|\b(\d*\.)?([\d]+(e-?[0-9]*)?)\b)/gi,'$1')//|(0x[0-9abcdefx]*)
	// Tabs (2 spaces)
	//.replace(/\t/g,'  ')

document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code')
	.forEach((code) => {
		code.innerHTML=hightlight(code.textContent)
	});

code .c-type, .c-markup {font-weight:700}
code .c-variable, .c-type {color: #228}
code .c-operator {color: #708}
code .c-string {color:#a22}
code .c-punctuation {color:#666}
code .c-atom {color:#281}
code .c-comment, .c-comment * {color: #A70!important}
@media screen and (prefers-color-scheme: dark) {
	code .c-markup{color:#C96754;font-weight:initial}
	code .c-string {color:#D7C467}
	code .c-type {color:#DB9455;}
	code .c-operator {color: #B194B4}
	code .c-variable {color: #83A1C1}
	code .c-atom {color: #B1BE59}
	code .c-punctuation {color:inherit}
	code .c-comment, .c-comment * {color: #999!important;opacity:.5}
}

=> Accueil

Permaliens :

=> gemini://unbon.cafe/yomli/dev/blog/2023-01-31-push-light-pseudo-universal-syntax-highlighter-light.gmi | https://dev.yom.li/blog/push-light-pseudo-universal-syntax-highlighter-light