Op een canvas gezet, niet via foreignObject

De korte weg om HTML in een afbeelding te veranderen is hem in een SVG foreignObject wikkelen en dat op een canvas tekenen. Het is ook een valstrik: zodra de inhoud naar een webfont verwijst (en een code-afbeelding wil altijd een monospace lettertype) is het canvas besmet, en gooit toBlob een SecurityError nadat elke pixel al getekend is.

De tekst wordt daarom stuk voor stuk gemeten en getekend. Dat kost ongeveer veertig regels, het kan niets besmetten, en het gebruikt de monospace stack die al op je machine staat. De letterbreedte wordt gemeten en nooit aangenomen: monospace lettertypes zijn niet allemaal 0,6em breed, en gokken is hoe code-afbeeldingen rechts afgeknipt raken.

De highlighter is een scanner, en dat zegt hij erbij

Er is hier geen parser en er zijn geen grammaticabestanden. Strings, commentaar, getallen, sleutelwoorden en leestekens worden gevonden met een kleine set geordende reguliere expressies: ongeveer honderd regels voor acht talen, tegenover tientallen kilobytes voor de kleinste echte highlighter plus een grammatica per taal.

Die ruil klopt voor deze klus en zou fout zijn voor een editor. Een afbeelding van code heeft aannemelijke kleur nodig, geen syntaxisboom; niemand heeft ooit gedebugd op de tokenisatie van een schermafbeelding. Hij kleurt een regex-literal die op een deling lijkt verkeerd, en een sleutelwoord dat als propertynaam gebruikt wordt. Allebei zijn ze op deze maat cosmetisch, en geen van beide is een megabyte download waard om te repareren.

PNG of SVG

PNG voor overal waar de afbeelding geplakt wordt: issue trackers, chat, dia's, sociale berichten. Exporteer op 2x zodat hij scherp blijft op een scherm met hoge dichtheid. SVG voor documentatie die je zelf beheert, waar hij op elke maat scherp blijft en een fractie weegt. Het addertje is dat hij in het monospace lettertype van de lezer getekend wordt, dus de regellengtes kunnen verschuiven.

Veelvoorkomende problemen

De afbeelding is heel breed. Eén lange regel bepaalt de breedte van het hele plaatje. Breek hem in je editor af voordat je plakt; een afbeelding kan niet opnieuw lopen.
Tabs zien er verkeerd uit. Tabs worden als één teken getekend. Zet ze eerst om naar spaties (dat doet Witruimte verwijderen) en de inspringing lijnt uit.
De kleuren ogen vlak. Probeer een ander thema. Alle drie zijn ze aan het eigen palet van deze site gekoppeld en niet aan een geleend editorthema, dus de uitvoer ziet eruit alsof hij ergens vandaan komt in plaats van uit een standaardinstelling.
De verkeerde taal werd herkend. De herkenning is een handvol vuistregels over de eerste paar duizend tekens. Kies de taal expliciet en hij stopt met gokken.

Veelgestelde vragen

Moet ik code überhaupt als afbeelding plaatsen?

Meestal niet. Een afbeelding is niet te kopiëren, niet te doorzoeken, niet door een schermlezer te lezen en niet te diffen, en op een telefoon is hij vaak onleesbaar. Gebruik een codeblok waar er een is. Afbeeldingen zijn voor de plekken zonder codeblok: een sociaal bericht, een dia, een conferentiepraatje. Daar winnen ze van een wazige schermafbeelding van een editor.

Wordt mijn code geüpload?

Nee, en hij komt ook niet in de adresbalk. Alleen de keuzes voor thema en taal reizen mee in de URL. Dat telt hier meer dan gewoonlijk: de code waar iemand een schermafbeelding van maakt is heel vaak een configbestand of een foutmelding met een token erin.

Kan ik een eigen thema toevoegen?

Niet vanaf de pagina. De drie hier zijn het eigen palet van de site in donker, licht en indigo, en elke tokenkleur erin is op contrast tegen zijn achtergrond gecontroleerd. Dat geldt niet voor de meeste editorthema's die naar een afbeelding geëxporteerd worden.

Waarom zit er een lengtelimiet op?

Voorbij ongeveer twintigduizend tekens is de afbeelding hoger dan wat iemand nog leest, en legt de browser een heel groot canvas uit om hem te maken. Is het fragment zo lang, dan is het eerlijke antwoord een link naar het bestand.