Il faut commencer par installer les deux fichiers highlight.min.js  (à renommer si vous le souhaitez après avoir téléchargé le package qui vous convient) et highlight.min.css (à choisir, renommer et minifier parmi tous les styles proposés, voir https ://highlightjs.org/static/demo/ pour choisir) là où vous mettez vos js et css habituellement dans votre thème. Vous les trouverez ici : https ://highlightjs.org/.

Ensuite, déclarez ces deux fichiers dans votre functions.php, avec un code du genre :

// Register custom style and script
add_action( 'wp_enqueue_scripts', 'djth_highlight_register_style_script' ) ;
function djth_highlight_register_style_script()
{
if( $GLOBALS['pagenow'] != 'wp-login.php' && !is_admin() ) 
{
// register style
wp_register_style( 'highlight', get_template_directory_uri() . '/css/highlight.min.css', array( 'your-theme-slug' ), '1.0', 'all' ) ;
wp_enqueue_style( 'highlight' ) ;
// register script
wp_register_script( 'highlight', get_template_directory_uri() . '/js/highlight.min.js', array( 'jquery' ), '9.12.0', true ) ;
wp_enqueue_script( 'highlight' ) ;
}
}

Enfin, activez highlight.js dans toutes vos pages en ajoutant ce code toujours dans votre functions.php :

// Activate highlight.js from wp_footer
add_action( 'wp_footer', 'djth_init_highlighting' ) ;
function djth_init_highlighting()
{
echo '
< !-- Highlight.js -->
<script type="text/javascript">
// Init highlighting
jQuery(document).ready(function() {
hljs.initHighlightingOnLoad() ;
}) ;
</script>
< !-- End Highlight.js -->
' ;
}

Et c’est tout.

Pour l’utiliser, il suffit d’encadrer le texte à rendre sous forme de code par les balises <code><pre> … </pre></code>. Bien sûr, pour cela il faut être en mode texte dans l’éditeur WordPress. C’est pour cela qu’il serait bien d’avoir un icône dédié dans TinyMCE. Ce sera l’objet d’un prochain article.

Tags :

Classés dans :