Hvordan WordPress Lar kodesnutter som skal settes inn

Hvis du kjører noen form for web-utvikling blogg, enten det handler om HTML, Javascript og CSS - Cascading Style Sheet -, du kommer til å trenge for å vise et eksempel på koden. WordPress har ikke en innfødt element for innebygging kode; i stedet kan du bruke enten HTML <code> tag eller en mer avansert plug-in. <Code> -taggen fungerer ikke alltid med web-basert kode, mens en WordPress plug-in er utviklet for å hjelpe deg å vise kode i en lett-å-lese formatet.

Koden Tag

<Code> tag i HTML er designet for at biter av kode skiller seg ut på siden din. All formatering er fjernet fra teksten, i stedet gjengi det i en uformatert Courier font. Det den mangler i stil, gjør den opp for i enkelhet: Du setter inn koden mellom åpning og lukking <code> tags. Dessverre er ikke dette fungere på kode som ellers ville vises riktig på siden. For eksempel ved å bruke <code> for å vise et eksempel på en CSS-element fungerer fordi CSS brukes innenfor et stilark, ikke i kroppen på en side som HTML; koden betyr ikke noe alene på siden. Hvis du prøver å bruke <code> for å vise HTML for et bilde, vil det ikke fungere fordi bildet koden er gyldig HTML; i stedet får du et bilde der du ønsket kode. Som sådan, <code> er egentlig best for ikke-Web-kode, for eksempel Unix kommandoer og lignende.

Google Syntax Highlighter for WordPress

Google Syntax Highlighter er et godt stylet måte å legge inn koden på din side: ikke bare gjør det farge hele syntaks annerledes, det veksler bakgrunnsfarge på hver linje, og gir hver linje et tall, noe som gjør koden lett å lese og forstå. For å vise koden highlighter på siden din, klikk på fanen HTML i øvre høyre hjørne av innlegget editor. Når du går inn HTML-modus, kan du ikke gå; kommer tilbake til "Skriv" vil strippe textarea. Sett kodebiten inne i en <textarea> slik:

<Textarea name = "code" class = "html">
<Img src = "bilde.jpg" width = "150" height = "150" alt = "Sample Image" />
</ Textarea>

Navnet attributtet forteller WordPress at dette er eksempelkode. Klassen angir hva slags kode det er, slik at boksen bruker riktig syntaks. For eksempel, hvis du var å vise kode fra noen Javascript, kan du bruke class = "js" eller class = "javascript".

Plum Kode Box

The Plum Kode Box plug-in for WordPress er litt mer nybegynner vennlig. Når programmet er installert, legger Plum Box en modul til Post side, rett under oppføring editor. Fra rullegardinmenyen velger du hva slags kode du bruker, og deretter taste inn koden i den medfølgende boksen. I høyre hjørne av boksen, vil du se "Kortnummer: [codebox 1]". Dette betyr at du setter "[codebox 1]" hvor du vil boksen skal vises på siden din. Hvis du trenger flere bokser, velg det aktuelle nummeret fra "Antall bokser." Som med Google Syntax Highlighter, forskjellige attributter og verdier innenfor boksen er forskjellige farger.

WP Kode Høydepunkt

Muligens den mest enkle kodebaserte plug-ins, krever WP Kode Uthev bare at du går inn i HTML-redigeringsmodus på blogginnlegget og flanke kodebiten med "<pre>" tag. Det krever ikke noe ekstra formatering og utmerkelser; det registrerer bare koden og farger det tilsvarende.