There's the default style.css and the one from prismjs.

Current scenario: Default CSS loads first, then the javascript for prism kicks in and the code tags are styles. The delay is a fraction of a second, but it's still noticeable.

What I'm trying to achieve: Highlighted code and pre tags upon the first load.

My enqueue code

function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

function add_prism() {

'prismCSS', get_stylesheet_directory_uri() . '/path-to/prism.css'  );
'prismJS', get_stylesheet_directory_uri() . '/path-to/prism.js'    );
add_action('wp_enqueue_scripts', 'add_prism');

I tried calling the default stylesheet after prismcss, but that doesn't seem to work:

add_action('wp_enqueue_scripts', 'add_prism');
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
  • i dont get it, is prismCSS or prismJS dependent of the default CSS? what do you mean by Highlighted code and pre tags upon the first load. if you are talking about files... – David Lee Sep 28 '17 at 16:41
  • I have defined default css properties for pre and code tags in my style.css. Highlighting the code is done by prism. Basically, first the style.css properties and loaded and then prism properties override the style.css ones. – Aashik Sep 28 '17 at 16:43
  • have you tried with loading the script async? – David Lee Sep 28 '17 at 16:58
  • I tried this method: Async with WordPress Enqueue This didn't have any effect though – Aashik Sep 28 '17 at 17:06
  • 1
    Have you tried adding a dependencies array like wp_register_style( 'prismCSS', get_stylesheet_directory_uri() . '/path-to/prism.css', array('theme-style') ); to load prism after theme-style? – czerspalace Sep 28 '17 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.