Så här skapar du en jQuery-kodkod

I den här handledningen kommer vi att skapa en kodfält som visar exempelkod på webbsidor på ett snyggt formaterat och lättläst sätt, ungefär som det du ser här på Webuts. Kodfragmentet förhandsgranskningsrutor som detta görs ofta som Wordpress-plugins, men vi får se hur vi kan göra samma sak med bara en liten jQuery och CSS.

Vi kan lägga till alla förväntade funktioner som linjenummering och linjebandning och alla vanliga verktyg som att visa koden som vanlig text och skriva ut det på ett skrivarvänligt sätt. Följande skärmdump visar vilken typ av sak som vi kommer att sluta med i slutet av handledningen:

Komma igång

Kodfältet kommer att byggas från en underliggande

 element; Det här är det perfekta elementet att använda eftersom det gör vad som helst som du lägger in det som vanlig text i ett fastbreddstypsnitt som monospace, vilket är idealiskt för att visa kodprover på ett tydligt och kortfattat sätt. Det bevarar också raderingar som är en funktion som vi kan utnyttja för att lägga till radnummererings- och randfunktionerna.
 
En annan anledning till att vi använder 
 taggen beror på att den utgör en idealisk grund för vår kodlåda; i webbläsare med JavaScript inaktiverat, eller de som helt enkelt inte stöder det, kommer koden fortfarande att bli acceptabel. Det kommer att sticka ut från resten av texten på sidan och det kommer inte att degenerera till något helt värdelöst och löjligt.
 
Börja med den följande sidan i din textredigerare:
 
        
CSS-kod:
 
#selector color: # 000000;  .andraväljaren font-size: 20px; gränsen: 1px solid # 000000; padding: 20px;  tagnam bredd: 100%; 
    
 
Spara sidan som code-snippet.html i en katalog som redan har den nuvarande versionen av jQuery som ligger inom den. Med ingen styling och inget manusintervall ska sidan se ut så här:
  
 
Som standard återgång är det acceptabelt; om sidan hade annan kroppstext på den, 
 elementet skulle sticka ut som ett separat textblock och skulle fortfarande vara lite kodliknande.
 
 
Börjar skriptet
 
Låt oss börja med att lägga till den randande effekten som gör att varje rad skiljer sig från de ovan och under den och linjenummeringen som kommer att visas när en trasig linje (som övergår till två eller flera rader) är en del av en rad exempelkod.
 
I den tomma > element längst ner på  lägg till följande kod:
 
$ (funktion () // bearbeta innehållet i snippets $ ("pre.snippet"). varje (funktion () // hämta innehåll av 
 och skapa lista och behållare var currentItem = $ (detta), currentContents = currentItem.text (), innehåll = (currentItem.text () .indexOf ("\ n")! = -1)? currentItem.text () split ("\ n"): currentItem.text (). split ("\ r"), list = $ ("
"), behållare = $ ("
") .addClass (" snippet-container "). insertBefore (currentItem.prev ()); // ta bort originalinnehållet och linda i behållaren currentItem.text (" "). prev (). andSelf () .appendTo ; // normalisera höjd (currentItem.height ()> 0)? list.css ("marginTop", -16): null; // skapa listobjekt $ .each (innehåll, funktion (jag, val) // skapa listobjekt och inre p var li = $ ("
") .appendTo (list), p = $ ("
") .text (val) .appendTo (li); // lägg till randklass (i% 2 === 0)? li.addClass (" stripe "): li.addClass (" unstripe "); .appendTo (currentItem);););
 
Låt oss gå igenom varje del av koden för att se vad den gör, först väljer vi var och en 
 element som har rubrikens klassnamn och för varje som hittats utför vi en anonym funktion. Inom denna funktion ställer vi först fem variabler; Den första variabeln är väljaren för strömmen 
 element som vi cachar av prestationsskäl. Vi ska använda $ (Detta) referens upprepade gånger i vår kod så det är vettigt att lagra det i en variabel för snabb åtkomst.
 
Nästa variabel lagrar hela textinnehållet i strömmen 
 och nästa kommer att lagra en matris där varje objekt i matrisen innehåller en enda textrad från 
 element. Längden på matrisen kommer att matcha antalet rader med text i 
 element. Eftersom linjen bryter in 
 element är bevarade, vi kan enkelt detektera dessa och utföra en delning baserat på dem.
 
De flesta webbläsare upptäcker radbrytningar i JavaScript med hjälp av \ n newline karaktär så vi först ser om den inre texten av 
 Elementet innehåller något av dessa och använder dem om det gör det. IE upptäcker radbrytningar annorlunda än andra webbläsare, så om nej \ n tecken finns att vi utför delningen med hjälp av \ r vagnens returkaraktär istället.
 
Nästa variabel innehåller ett nytt beställt element; använder en 
 elementet är perfekt eftersom det kommer att hantera linjanummeringen av kodavsnittet automatiskt för oss. Den slutliga variabeln pekar på en ny behållare 
 som vi ger ett klassnamn till och lägger till sidan direkt före 
 element som föregår kodrutan.
 
Skapa arrayen av 
 elementets innehåll är inte en destruktiv operation, så vi måste ta bort det ursprungliga innehållet för att undvika att duplicera det, vilket vi kan göra genom att använda en tom sträng med jQuery s text() metod. Vi flyttar också 
 och den 
 inslag i vårt nyligen skapade behållarelement.
 
Firefox verkar lägga in en radbrytning i 
 element, vilket ger elementet höjd när det inte borde ha någon höjd alls (som vi har tagit bort innehållet). För att motverka detta upptäcker vi om det är tomt 
 elementet har höjd större än 0, och om så sätter vi på margin-top av vårt nya 
 element för att dra upp det till elementets topp. Det är bara Firefox som gör det här, men det är bättre att kolla på höjd istället för att leta efter Firefox. Funktionsdetektering över sniffing av webbläsare vinner varje gång.
 
 
striping
 
Nästa avsnitt av koden handlar om att lägga till de klasser vi kan använda för randningseffekten; som vi har lagt in innehållet i 
 element i en array och inte ett jQuery-objekt kan vi inte använda standarden varje metod som vi gjorde med 
 element på sidan.
 
I stället kan vi använda jQuery varje verktygsmetod som heter direkt på jQuery $ objekt. Metoden accepterar 2 argument, den första är föremålet att iterera över, i det här fallet vårt innehåll array och den andra är en anonym funktion som ska utföras för varje objekt i arrayen. Vår funktion ges automatiskt två argument; jag är indexet för föremålet för närvarande iterated och val är innehållet i array-objektet.
 
Inom vår funktion skapar vi först en ny lista för våra 
 och sätt in ett nytt styckeelement som innehåller innehållet i det aktuella array-objektet. Det nya objektet lägger till i 
 element som vi skapade tidigare. Vi lägger sedan till stripning klasserna; för att göra detta använder vi JavaScript-moduloperatören för att bestämma om det aktuella arrayindexet är udda eller jämnt; för varje jämnt index lägger vi till klassen rand och för varje udda index lägger vi till klassen unstripe. Att använda 2 klasser för stripning innebär att vi enkelt kan ställa in båda randiga färger istället för att insistera på att en av dem är vit.
 
På detta stadium ska vår exempelsida nu visas så här:
  
 
 
Utdragsformulär
 
Nu kan vi lägga till styling för kod-kodning widgeten och striping; i en ny fil i din textredigerare lägg till följande kod:
 
.snippet-container width: 630px; vaddering: 10px 10px 30px; gräns: 1px fast # 999999; background-color: # e1e1e1; margin-bottom: 10px; positioner: relativ;  .bit-container h2 margin: 0 0 10px; padding-vänster: 10px; font-family: Georgia; font-weight: normal; font-style: italic;  .snippet border: 1px solid # 999999; marginal: 0;  .snippet ol margin: 0; padding-vänster: 34px; background-color: # 8dd397; färg: #ffffff; font-weight: bold; font-style: italic;  .snippet ol li padding-left: 10px;  .uttag ol p marginal: 0; color: # 000000; font-weight: normal; font-style: normal; white-space: pre-wrap; vaddering: 3px 0;  .snippet .stripe bakgrundsfärg: # f5f5f5;  .snippet .unstripe bakgrundsfärg: #ffffff; 
 
Spara detta som code-snippet.css i samma katalog som exempelsidan. Det mesta av denna CSS är rent för dekoration och har väljats ​​vederbörligen enligt mina egna preferenser. Du kan ändra alla teckensnitt, färger, bredden eller något alls. Den viktigaste funktionella CSS vi ställer in är den relativa positioneringen på varje kodboks och white-space regera på det inre 
 element i varje listobjekt om vi inte ställer in det här pre-wrap Texten för varje rad kommer att överfalla siktbehållaren när den är för lång i stället för att bryta till nästa rad.
 
Med tillägget av vårt stilark visas rutan för utdrag nu så här:
  
 
 
Andra typer av kod
 
I det här exemplet hittills har vi använt en mycket enkel CSS som exemplet kod som visas i rutan. Kan vi lägga till någon annan typ av kod som vi vill ha? Låt oss ta en titt. Direkt efter det första 
 element på sidan lägg till följande kod: [/ sourcecode]
 
[sourcecode language = "snippet" originalClass = "snippet"]       
Detta är en grundläggande webbsida
  
 
Allt är ganska mycket vad vi hade tidigare med en stor skillnad; vi kan inte använda < tecken när du visar HTML-taggar i vår exempelkod. Om vi ​​skulle sätta  i vår 
 tagg skulle det tolkas som en  element och orsaka en HTML-varning. För att övervinna detta kan vi ange HTML-enheten 
<
 
som kommer att ändras till a  karaktär av webbläsaren utan att webbläsaren tänker att det är ett faktiskt element. Det är nog bäst att visa vilken kod som använder  tecken på detta sätt för att förhindra oavsiktlig tolkning av webbläsaren. Så här visas den andra kodrutan:
  
 
Jag har fastnat vid den indragningskonvention som jag brukar använda, vilket är 2 standardutrymmen för kapslade element; Det här är en vana jag har fått till följd av att jag behöver visa massor av potentiellt breda kodkod i dokument med fast bredd. Det är inte standardkonventionen, som är fyra enkla mellanslag eller ett flikutrymme. Du kan använda vilken konvention du föredrar när du använder snippet-rutan på din egen webbplats, eftersom både enskilda mellanslag och flikytor bevaras av pre märka.
 
 
Utdragsverktyg
 
En annan funktion i kodrutan som vi enkelt kan lägga till är en serie verktyg som hjälper besökaren att använda koden. Om du försöker kopiera och klistra in koden från ett av utdragslådorna till en textredigerare ser du att radnummer från den beställda listan också kopieras till den nya sidan. Detta är olyckligt, eftersom det går att stoppa exemplet koden från att arbeta. En sak vi kan göra är att tillhandahålla en mekanism där koden kan visas utan radnummer.
 
Direkt efter koden som läser list.appendTo (currentItem); lägg till följande kod:
 
// skapa verktyg var toolContainer = $ ("
") .addClass (" verktygsbehållare "), verktygslista = $ ("
") .addClass (" verktygslista "). appendTo (toolContainer), listItem1 = $ ("
") .addClass (" verktygsobjekt ") .text (" | "). appendTo (verktygslista), listItem2 = $ ("
") .addClass (" verktygsobjekt "). appendTo (toolList), plain = $ ("") .addClass (" verktyg "). attr (id:" plain ", href:" # ", titel:" Visa kod som vanlig text ") .text (" Visa vanligt ") .prependTo (listItem1). klicka (funktion (e) // stop event e.preventDefault (); // skapa behållare för vanlig kod om ($ (detta). närmaste (". snippet-container"). hitta ("snippet"). ("display-box"). längd === 0) var displayBox = $ ("
") .AddClass (" display-box "). Höjd ($ (this) .closest (". Utdrag-container "). Hitta (". Utdrag "). Höjd ()). Text (currentContents) .appendTo (currentItem ); // Visa eller dölj den släta koden $ (den här) .closest (". snippet-container"). hitta (". snippet"). barn ("displaybox"). slideToggle (); // ändra text på länken ($ (this) .text () == "Show Plain")? $ (detta) .text ("Show Pretty"): $ (this) .text ("Show Plain");) , printBox = $ ("") .addClass (" verktyg "). attr (id:" print ", href:" # ", titel:" Skriv ut kod ") .text (" Skriv ut ") .prependTo (listItem2) .click e) // stoppa händelse e.preventDefault (); // öppna ny sida att skriva ut från var title = currentItem.prev () .text (), currentSnippet = $ (detta) .closest (". snippet-container") .find (". snippet"), printWindow = window.open ("", "printWindow", "width =" + (currentSnippet.width () + 25) + ",
"+ titel +"<\/h2>
<\/pre>"); $ (" # code ", printWindow.document) .text (currentContents); printWindow.print ();); toolContainer.appendTo (container);
 
Allt vi gör är att skapa en hel massa variabler, ungefär som vad vi gjorde i början av den första biten av kod tidigare; kom ihåg att vi fortfarande är i kontexten av varje() Metoden kallas på alla 
 element på sidan. Vi skapar först en behållare för de nya verktygen och ger det ett klassnamn för styling ändamål, men vi lägger inte till det direkt i satsen.
 
Vi skapar sedan ett nytt oorderat lista-element och två listobjekt, vilka är klassnamn och bifogas respektive behållare. Det första listobjektet ges en innerText av rörkaraktären för att fungera som en separator.
 
 
Skapa verktygen
 
Vi skapar sedan det första verktyget, som kommer att användas för att visa en enkel textversion av koden; Vi lägger till ett klassnamn för styling och de nödvändiga attributen. Länkelementet vi skapar har också en händelsehanterare bifogad i form av en anonym återuppringningsfunktion för när den klickas.
 
Inom denna funktion skapar vi först en ny behållare för ren text, men först efter att ha kontrollerat att behållaren inte existerar; Detta kommer att fungera som en grundläggande latisk last typ mekanism som inte kommer att skapa de enkla kodelementen tills ankaren klickas för första gången. Återkallningen utförs varje gång ankaren klickas så vi måste kontrollera om behållaren redan finns för att förhindra uppbyggnad av flera behållare.
 
Vi använder sedan jQuery s slideToggle () effekt för att visa eller gömma vanlig kod beroende på om den redan är synlig. Vi ändrar också texten på länken varje gång den klickas vilket ger besökaren ett enkelt sätt att byta mellan de vanliga och vackra kodvyerna.
 
Nästa och sista variabel vi skapar är ett annat ankareelement som kommer att användas vid skrivverktyget. det här elementet har också en händelsehanterare bifogad som kommer att utföras varje gång den klickas. Inom händelsehanteraren börjar vi genom att skapa några variabler igen, cachning av textinnehållet i kodrubrikens rubrik och det aktuella kodavsnittet 
 element.
 
Vi skapar också ett nytt fönster med traditionella JavaScript öppna() metod; Det första argumentet som denna metod tar är att webbadressen för sidan ska öppnas. Vi har inte en existerande sida, vi kommer att konstruera den från början, så vi ställer detta argument till en tom sträng. Det andra argumentet är namnet på det nya fönstret, vilket är mycket viktigt när vi refererar till det flera gånger på ett ögonblick. Slutligen ställer vi in ​​det nya fönsterets dimensioner så att det är lite större än den ursprungliga kodrutan.
 
När fönstret är skapat använder vi oss document.write på fönstret adressera namnet vi gav till det och skriv en rubrik innehållande innehållet i rubrikelementet vi cachade och ett tomt preelement som vi ger en id till. Använder sig av document.write känns så fel efter att ha använt jQuery, men det är tyvärr det enda sättet som fungerar.
 
När det nya fönstret har 
 element vi kan sedan använda jQuery för att välja den med den id genom att tillhandahålla en hänvisning till det nya fönstret som väljarens sammanhang. Vi lägger sedan till textinnehållet i originalet 
 element som vi cachade vägen tillbaka i början av manuset och slutligen ringa skriva ut() JavaScript-metod för att skriva ut det nya fönstret.
 
JavaScript skriva ut() Metoden är väldigt grundläggande, det skriver ut hela sidan. Vi kan inte berätta att du bara skriver ut valda objekt, varför vi skapar den nya sidan som innehåller bara relevant rubrik och vanlig kod och skriv ut det istället. Det finns sätt att göra det på utan att skapa den nya sidan. vi kunde lägga till ett namn på utskrifts klass till varje element på sidan och använda det för att dölja dem med CSS. På stora sidor med många element men det skulle vara massivt ineffektivt. Också, vi kan inte bestämma när utskriften är klar så att elementen återges efter att den har skrivits ut skulle också vara besvärlig.
 
Nu har alla verktyg skapats, vi kan till sist lägga till dem på sidan genom att bifoga dem till var och en av snippet behållarna.
 
 
Verktygsstilering
 
De nya verktygen kommer också att behöva vissa CSS så städa upp sitt utseende och placera dem. på botten av code-snippet.css lägg till följande nya kod:
 
.verktygsbehållare position: absolut; höger: 10px;  .tool-list margin: 6px 0 0;  .tool-list li list-style-type: none; flyta till vänster; font-weight: bold; font-size: 13px;  .tool-list li a text-decoration: none; font-family: Georgia; font-weight: normal; font-style: italic; font-size: 11px; color: # 000000; vaddering: 0 5px; skiss: 1px prickad # e1e1e1;  .tool-lista li a: svävar text-decoration: underline;  .snippet. display-box position: absolute; top: 0; vänster: 0; bredd: 100%; bakgrundsfärg: #FFFFFF; display: none; white-space: pre-wrap; 
 
Återigen är det mest godtyckliga stilar som jag tycker är bra. Känn dig fritt att ändra dem, även om jag tycker att koden i koden är en bra plats för dem och är någonstans där vi avsiktligt har lämnat plats för, så om du vill flytta dem kanske du vill justera bottenplattan av fragmentet behållaren. De nya verktygen ska visas så här:
  
 
När den vanliga länken klickas, ska den enkla kodbehållaren glida in i sikte och länkens etikett ändras:
  
 
När utskriftsverktyget är valt ska det nya fönstret som innehåller koden och dialogrutan för utskrift båda visas:
  
 
Observera att det här är relativt långsamt i IE8 och lite temperamentsfullt, ibland kommer utskriftslådan att öppnas och ibland blir det inte. Dessutom visas inte utskrivningsrutan i Opera.
 
 
Sammanfattning
 
Med bara en liten bit av semantisk HTML, en del presentations CSS och jQuery, kan vi enkelt presentera kodexemplar attraktivt och tydligt på våra webbsidor. Vi tittade på den initiala semantiska HTML som förblir distinkt och läsbar, och hur man visar kod som använder < karaktär.
 
Vi tittade på hur lätt det är att lägga till effektiv linje nummerering och stripning för att göra kodexemplen mer läsbara. Vi såg också hur vi enkelt kan lägga till ett par verktyg till kodrutorna som gör det möjligt att kopiera koden exakt eller skriva ut koden lättare för våra besökare.



		
			
	   
	




Koda