Display code syntax in WordPress post

Home » Blogs » Blog » Solutions » Display code syntax in WordPress post

WordPress staat niet toe dat er code geplaatst wordt in een post. Door gebruik te maken van de SyntaxHighlighter plugin is het eenvouding om code syntax op te nemen in posts.

#button {
    font-weight: bold;
    border: 2px solid #fff;
}

Bovenstaande krijg je door het volgende in je post op te nemen. Je hoeft je geen zorgen te maken over html entiteiten etc. De code wordt automatisch opgemaakt om te tonen.

code

 

 

 

De volgende talen worden ondersteund:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Zonder de “language” parameter wordt er geen syntax gehighlight en wordt het standaard als tekst getoond.

Configuratie Parameters

Er zijn ook nog optionele configuratie parameters mogelijk. De vetgedrukte opties zijn standaard waarden.

autolinks (true/false) — Maak URLs klikbaar
collapse (true/false) — Met true kan de code worden ingeklapt, de gebruiker kan deze openklappen door er op te klikken. Handig voor lange stukken code.
firstline (number) — Gebruik dit om aan te geven met welk nummer de regels moeten beginnen. Standaard is dit 1.
gutter (true/false) — Op false worden de regelnummers niet getoond.
highlight (komma-gescheiden lijst van nummers) — Een lijst met regelnummers  die gehighlight moeten worden. Bijvoorbeeld “4,7,19”.
htmlscript (true/false) — Werkt met sommige talen en wanneer op true dan wordt alle HTML/XML in de code gehighlight.
light (true/false) — Op true worden de regelnummers en de toolbar niet getoond.
padlinenumbers (true/false/integer) — Zet de padding voor regelnummers. True is automatisch, false is zonder padding en ook een getal is mogelijk om de padding te zetten.
title (string) — Samen met de collapse parameter handig om een label te zetten voor het code voorbeeld.

 

facebooktwittergoogle_pluspinterestlinkedinmail

Leave a Comment