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.

const hightlight = (code) => code
    // Mandatory, else innerHTML comments them with <!-- -->
    .replaceAll(/(<)/g,'<span>$1</span>') 
    // Markup
    .replaceAll(/(?:<span><<\/span>)([\w\/!:]+[^\s\n>]?)(>|\s)/g,'<<span class="c-markup">$1</span>$2')
    // Strings
    .replaceAll(/('.*?'|"(?!c\-markup|>).*?")/g,'<span class="c-string">$1</span>')
    // 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,
        '<span class="c-operator">$1</span>$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,
        '<span class="c-type">$1</span>$2')
    // Comments
    .replaceAll(/(\/\*[^]*?\*\/|<span><<\/span>\!\-\-[^]*?\-\->|(?<!\:)(\/\/)[^\n\r]+|#[#\s]+[^\n\r\?]+)/gim,'<span class="c-comment">$1</span>')
    // Variables & Function names
    .replaceAll(/([a-z\_\$][a-z0-9_]*)(\s?([\(\)\[\];]|[=+\-\*,<]\s)|\s>)/gi,'<span class="c-variable">$1</span>$2')
    // Braces
    .replaceAll(/(\{|\}|\]|\[|\|)/gi,'<span class="c-punctuation">$1</span>')
    // Numbers
    .replaceAll(/(0x[0-9a-f]*|\b(\d*\.)?([\d]+(e-?[0-9]*)?)\b)/gi,'<span class="c-atom">$1</span>')//|(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}
}