Plugin, beproefd en in gebruik (check feb 2019)

*Syntaxhighlighter-evolved

Paar nadelen, maar toch gehouden:
– het uitklapvenster venster is niet te sluiten als het eenmaal geopend is
– te vaak sluipen er toch pre codes in

Veel gebruikte code, overal op deze site: tussen vierkante haken:
code collapse=”false” gutter=”false”  (code is al uitgeklapt; gutter:false (geen nummering aan linkerkant)

Of gewoon

 .... 

Plugin: http://alexgorbatchev.com/SyntaxHighlighter/  of de evolved versie: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

Installeer ook eventueel wat extra plugins speciaal geschikt om bepaalde code te laten zien, zoals bijv. php5. (syntaxhighlighter-evolved-php5)
Overzicht andere brushes

 

Support
Kort configuratie-overzicht

Thema aangepast; gekozen voor shThemeEmacs.css; zit in /httpdocs/wordpress/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles

Kies bij instellingen voor: versie 2. Version 3 allows visitors to easily highlight portions of your code with their mouse (either by dragging or double-clicking) and copy it to their clipboard. No toolbar containing a Flash-based button is required. Version 2 allows for line wrapping, something that version 3 does not do at this time. Maar nadeel: versie 2 accepteert geen titels

Onderaan eigen wijzigingen aangebracht; vooral voor de code syntax.

  .syntaxhighlighter table caption  {background-color:#cecece!important; color:#000000!important}  .syntaxhighlighter td.code {}  .syntaxhighlighter .plain {  color: yellow!important;padding-left:5px!important;  }  


Opties
 en Issues
Er is geen voorzienining voor dat je de inhoud na openen weer kan sluiten. Wel een hack, maar heb die nog niet durven toepassen

  • collapse: true (maakt dat het blokje is ingeklapt; en pas opengaat bij klikken)
  • first-line:5 (toont nummer 5 in balk links)
  • gutter: false (laat geen nummers zien)
  • light (geen toolbar en geen gutter)
  • highlight:3  of highlight [3,5] (laat die regel oplichten) voorbeeld
  • html-script:true (laat html zien) voorbeeld
  • smart-tabs:true (tabs laten zien) voorbeeld
  • tab-size:4 (bepaalt afstand tussen tabs) voorbeeld
  • title: titel

NB: Gebruik geen visuele editor! Ook geen wp-editor en ook de HTML editor en tiny MCE editor van WP UI (voor accordions) heb ik uit moeten zetten; ook die plaatste er stiekem <pre codes tussen.

Bij de instellingen heb ik ingesteld dat alles standaard is ingeklapt. Hieronder aangegeven dat het stuk hieronder juist moet zijn uitgeklapt
tussen blokhaken: code lang=”js” title=”voorbeeld code javascript lang js, gutter false gutter =”false”: geen nummers

  function is_tree($pid) { // $pid = The ID of the page we're looking for pages underneath  global $post; // load details about this page  if(is_page()&amp;&amp;($post-&gt;post_parent==$pid||is_page($pid)))  return true; // we're at the page or at a sub page  else  return false; // we're elsewhere  };    add_filter('widget_text', 'do_shortcode');    
.post, div.page {  border: 0px;  background: white;  padding: 15px 15px 1em 15px;  clear: both;  overflow: hidden;  margin-bottom: 10px;  }  

Je kan ook pre of script gebruiken, maar je ziet dan niet die kleuren.  Voeg schuine haken toe en gebruik pre of script.

pre> …tekst </pre
script>tekst <script />

Nadeel:
bij gebruik pre: je moet zelf harde code zetten voor de haakjes; vervang < door < (and teken en dan lt)
bij gebruik script: veel browsers van RSS feeds sluiten de script voortijdig

Zie: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html