Codestyling mit Prism ohne Plugin umsetzen

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

Anmerkung oder Frage schreiben

Jeder Beitrag wird von Hand freigeschaltet. Mit dem Absenden Ihres Kommentars willigen Sie ein, dass der angegebene Name im Zusammenhang mit Ihrem Kommentar und ggf. Ihrer Website gespeichert wird.