10 CSS- och JavaScript-snuttar för snygg syntaxmarkering

Vi är alla bekanta med programvara för datorkodning och webb-IDE. Dessa funktioner syntaxmarkering för att underlätta skrivning och felsökning av kod.

Men visste du att du kan ta samma syntaxfärg och lägga till den i ditt webbinnehåll?

Naturligtvis är det inte alla som skriver om kod eller har kodavsnitt i sina blogginlägg. Men om du skriver många kodningsartiklar eller behöver lägga till kodsektioner på dina målsidor, kommer du att älska dessa CSS- och JS-kodbelysningslösningar.

Om du letar efter syntax highlight-plugins för WordPress, kolla in den här artikeln.

1. Kantig källkodslåda

Här är ett intressant utdrag skapat av Andrew Archibald, byggt helt i Angular.js.

Alla dessa exempelkodrutor har flikar som de du hittar i CodePen-inbäddningar. Men du kan lägga till den här typen av kod på din sida inlagdallt hanteras med CSS för styling.

Detta kommer att minska HTTP-inbäddningsförfrågningar, vilket ger dig mer kontroll över vilken typ av syntax du använder.

Jag erkänner att dessa flikar är ganska coola och den här använder ett vinkelljusbibliotek för syntaxkompatibilitet på dussintals språk.

2)
Estilo de etiqueta

Här är ett mycket mer detaljerat exempel för utvecklare som skriver långa tutorials och delar stora bitar av kod.

Detta koddesignprojekt fungerar med två funktioner: en vänster vertikal stapel med radnummer eller en mörk helsidesbakgrund för exempelkoden.

Du kan ändra stilen på färgalternativen du vill ha med bara lite jQuery. För att inte tala om, det finns ett enormt utbud här för att passa alla webbdesigner.

3. Fliken Textområde

Så här är ett riktigt unikt projekt utvecklat av Ashley Ktorou som visar vad du kan göra med ett enkelt textområde.

En kodare på webben måste ange koden någonstans. Ett textområde är det perfekta elementet för att hantera det.

Men med det här utdraget hittar du ett anpassat textområde med urval tillsammans med anpassade flikar och en helskärmsfunktion. För att inte tala om att allt detta fungerar med CSS och grundläggande kod.

Det är galet att vi kan bygga kodredigerare i webbläsare nu för tiden.

4. Endast CSS radnummer

Detta dynamiska syntaxelement är faktiskt väldigt enkelt. Men det är på grund av denna enkelhet som den verkligen förtjänar en plats på den här listan.

Denna kod låter dig dynamiskt lägga till radnummer dynamiskt till skarvblock. Du behöver inte hårdkoda siffrorna och de kommer att anges oavsett hur många rader kod du lägger till.

Jag tror att det här kan fungera bra för en blogg med mycket kod mellan skrivandet.

Och det är ett av få exempel här som använder en ljusare bakgrund med mörkare text.

5. Val av bootstrap-syntax med flikar

Vill du lägga till en syntaxmarkeringsfunktion med Bootstrap? Då kommer du över den perfekta pennan från utvecklaren Kijan Maharjan.

Detta låter dig lägga till en widget med flikar på en sida som innehåller olika stilar för syntaxmarkering.

Välj färger med ett kurerat kodbibliotek och konfigurera hela layouter med små CSS-justeringar.

6. Syntaxvalsdemo

Här är en väldigt cool demonstrationsdemo som stöder flera språk att välja mellan.

Varje språk har sin egen designstil och färgschema, men du kan också justera dem själv med lite CSS.

Du hittar några enhetliga alternativ i mer grundläggande utdrag, till exempel det inbäddade JSON-exemplet ovan. Detta erbjuder dock fortfarande variation och designen är enkel nog att passa in i vilken design som helst.

7. Prism.js. Demo

Det kostnadsfria Prism.js-skriptet är en av de bästa lösningarna med öppen källkod för syntaxmarkering. Den används av stora designbloggar som Smashing Magazine och är fritt tillgänglig för alla användningsfall.

Men om du vill dyka in i prismat utan mycket kod kan du studera detta utdrag skapat av Bram de Haan.

Från den koden hittar du en mycket enkel inställning som du kan kopiera och ändra stilen så att den passar din webbplats. Använd zebraränder och anpassade rullningslister för att verkligen sticka ut från andra element på sidan.

8. Ren CSS Code Editor

Okej, så namnet på detta är lite missvisande. Tekniskt sett är det inte en kodredigerare du kan använda som bara körs i CSS.

Men det här stycket är fortfarande extremt imponerande.

Det är ett statiskt gränssnitt IDE som återskapats med endast HTML och CSS.

Du kommer förmodligen inte att hitta mycket användning för något liknande på din webbplats. Men kodstilarna kan inspirera dig att kopiera en liknande layout för dina egna kodavsnitt.

9. syntaxfärgning

Superenkelt och superenkelt beskriver detta utdrag skapat av Michaël Germini.

Om du vill undvika att skapa din egen uppmärkningssyntax från grunden är den här pennan för dig. Den använder en ren vit bakgrund med tom text och är en trevlig startmall.

Kom bara ihåg att det är så super basic så du måste lägga lite tid på att redigera stilen så att den passar din webbplats.

10. Kodhandledning

I denna kostnadsfria Jo Dahl Code Wizard kan du se hur dessa syntaxljusblock används i en verklig miljö.

Handledningen tar dig igenom HTML och CSS i en mycket ren rutnätslayout. Bitarna ser bra ut och har en färgpalett för att fånga din uppmärksamhet utan att irritera läsupplevelsen.

Överväg denna design om du skapar en blogg eller webbplats som innehåller kodavsnitt.