Jeśli chcesz kolorować składnię kodu w elementach <pre><code> w swoim WordPressie, wypróbuj wtyczkę “Ninja Maluje Kodzik”. Używa ona biblioteki highlight.js, aby automatycznie wykrywać języki programowania i stosować odpowiednie kolorowanie składni.
ninja-maluje-kodzik.php
<?php
/**
* Plugin Name: Ninja Maluje Kodzik
* Plugin URI: https://projektninja.com/devblog/wtyczki-ninja/ninja-smigacz-wtyczka/
* Description: Skrypt kolorujący składnie kodu w elementach <pre><code>
* Version: 1.0
* Author: Maciej Mateusz Sajan - Projekt Ninja
* Author URI: https://projektninja.com/
*/
function odpal_skrypty_ninja_maluje_kodzik(){
wp_enqueue_script('SkryptKolorowaniaKodu', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js');
wp_enqueue_script('ninja_maluje_kodzik_js', plugins_url( '/ninja-maluje-kodzik.js', __FILE__ ), array('jquery'), null, true);
wp_register_style('ninja_maluje_kodzik_style', plugins_url('/ninja-maluje-kodzik.css' ,__FILE__ ));
wp_register_style('stylHighlitera','//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css');
wp_enqueue_style('ninja_maluje_kodzik_style');
wp_enqueue_style('stylHighlitera');
}
add_action('wp_enqueue_scripts', 'odpal_skrypty_ninja_maluje_kodzik');
?>ninja-maluje-kodzik.css
pre code {
border-radius: 15px;
border-bottom: solid #ffffff29 1px;
}
@media (max-width:425px) {
pre code {
font-size: 12px;
}
}ninja-maluje-kodzik.js
hljs.highlightAll();Przydatne Linki
Biblioteka fajnie z automatu wykrywa języki i stosuje odpowiednie kolorowanie składni we wszystkich elementach <code>.
Można pobrać bibliotekę ze strony i załadować do swojej bądź użyć CDN jak w powyższym przykładzie.
To samo tyczy się motywu kolorowania składni ja używam i polecam atom-one-dark.min.css, który jest zastosowany na tym blogu.
