WordPress Doc

Das Plugin SyntaxHighlighter Evolved ist eine der Standardlösungen, wenn es um das Formatieren von Quellcode geht. Dieser Weg kann allerdings gehörig auf die Performance drücken. Eine Alternative ist das Codestyling mit dem jeweiligen Theme zu verknüpfen und eine kleinere JavaScript-Bibliothek wie Prism oder highlight.js zu nutzen.

Das Beispiel geht unter Verwendung der Bibliothek Prism davon aus, dass die Dateien prism.js und prism.css im Themeordner abgelegt werden. Außerdem soll der visuelle Editor zum komfortablen Formatieren angepasst werden.

functions.php

// Prism JS und CSS einbinden
function codestyling_scripts_styles() {
 wp_register_script( 'prism', get_template_directory_uri() . '/prism.js', '', '0.1', true );
 wp_enqueue_script( 'prism' );
 wp_register_style( 'prism', get_template_directory_uri() . '/prism.css', false, '0.1', 'screen' );
 wp_enqueue_style( 'prism' );
 }
add_action( 'wp_enqueue_scripts', 'codestyling_scripts_styles' );

// TinyMCE-Editor anpassen
function mce_mod( $init ) {
$init['block_formats'] = 'Paragraph=p;Pre=pre;Code=code;Heading 2=h2;Heading 3=h3;Heading 4=h4;Blockquote=blockquote';
$style_formats = array(
array( 'title' => 'CSS', 'block' => 'code', 'classes' => 'language-css'),
array( 'title' => 'HTML/XHTML', 'block' => 'code', 'classes' => 'language-markup' ),
array( 'title' => 'PHP', 'block' => 'code', 'classes' => 'language-php' ),
array( 'title' => 'JavaScript', 'block' => 'code', 'classes' => 'language-javascript' ),
array( 'title' => 'HTTP', 'block' => 'code', 'classes' => 'language-http' ));
$init['style_formats'] = json_encode( $style_formats );
return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
function mce_add_buttons( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Referenz

• wp_register_script
• wp_register_style