Kolorowanie składni kodu na stronie/ blogu w Worpressie

https://highlightjs.org/

  • W functions.php podczepiamy bibliotekę highlight.js oraz styl do niej z powyższego linku (template stylu w naswie css’a):
/* biblioteka js */
add_action( 'wp_enqueue_scripts', 'odpalSkryptKolorowaniaKodu' );
function odpalSkryptKolorowaniaKodu(){
    wp_enqueue_script('odpalSkryptKolorowaniaKodu',  '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js?'.rand(0,999999999999999999), array('jquery'), null, true);
}

/* styl css*/
add_action( 'wp_enqueue_scripts', 'odpalStylHighlitera' );
function odpalStylHighlitera(){
    wp_enqueue_style('odpalStylHighlitera','//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css');
}
  • Poczym podczepiamy lokalny js
add_action( 'wp_enqueue_scripts', 'odpalSkryptKolorowaniaKodu2' );
function odpalSkryptKolorowaniaKodu2(){
    wp_enqueue_script('odpalSkrypty',  get_stylesheet_directory_uri().'/themejs/sajan-script.js?'.rand(0,999999999999999999), array('jquery'), null, true);
}
  • A w nim egzekwujemy kolorowanko
hljs.highlightAll();

Biblioteka fajnie z automatu wykrywa jezyki i stosuje odpowiednie kolorowanie składni we wszystkich elementach <code>

Dodaj komentarz