Slik formaterer Kildekode for blogginnlegg på Wordpress

May 30 by admin

Slik formaterer Kildekode for blogginnlegg på Wordpress


Rediger i HTML-modus når du ønsker å legge til kildekoden til et blogginnlegg i WordPress. Legge kilde kodeeksempler krever en endring av HTML-koder som holder nettlesere fra å gjengi dem som kode. For å gjøre dette, må du endre konsollene som omgir HTML-koder til spesielle tegnkoder - korte koder som lar deg legge til ekstra tegn og symboler til websider. Kode formatering koder som "<kode>" og "<pre>" kan også gjøre kildekoden vises i innleggene dine som forutsatt.

Bruksanvisning

1 Klikk på "HTML" fanen på toppen av redigeringsboksen på "Rediger Post" skjerm. Finn posisjon innenfor innholdet i posten hvor du vil plassere kildekode og starte en ny linje der.

2 Skriv ut koden som du vil det skal vises i innlegget:

<H1> Eksempelkode </ h1>

Bytt parentes rundt hver HTML-kode med tilhørende spesialtegnkoder:

<H1> Eksempelkode </ h1>

Merk at spesialtegnet kode for begynnelsen braketten er "<" som står for "mindre enn". Endelsen braketten er ">" eller "større enn".

3 Pakk kildekoden prøven i "<pre>" koder for å bevare koden hvite mellomrom, for eksempel innrykk og linjeskift:

<Pre> var x;

x = 5; </ pre>

Ikke start kodeeksempel på en ny linje rett etter "<pre>", fordi dette fører til en ekstra blank linje for å dukke opp i posten. Siden "<pre>" er ikke en del av kildekoden, ikke konvertere brakettene til "<pre>" koder til spesielle tegnkoder.

4 Pakk kildekoden og "<pre>" tagger med "<kode>" koder for å formatere koden din i en monospace font:

<Code> <pre> var x;

x = 5; </ pre> </ code>

Hint

  • Style din kilde kodeeksempler ved å skrive CSS-kode som er rettet mot den "<kode>" og "<pre>" tags: "pre {color: # 00FF00; background-color: #eeeeee;}".
  • Installer en syntax highlighting plugin og følge sine retninger for formatering kode. Du vil fortsatt trenger å redigere i HTML-modus i de fleste situasjoner, men syntaks highlighters komme med spesiell fargekoding og linjenummerering stiler.

Related Articles