- Select the language in https://prismjs.com/download.html and download the prism.css & prism.js
- I’m using GeneratePress Child Theme, and i had manually create css & js directory in generatepress_child
/var/www/html/wordpress/wp-content/themes# ls generatepress*
generatepress:
404.php content-link.php content-single.php footer.php inc no-results.php rtl.css search.php single.php
archive.php content-page.php css functions.php index.php page.php screenshot.png sidebar-left.php style.css
comments.php content.php fonts header.php js readme.txt searchform.php sidebar.php style.min.css
generatepress_child:
css functions.php js screenshot.png style.css
- Upload the prism.css & prism.js to wordpress server with SCP
#Copy the uploaded prism.js & prism.css
cp prism.js /var/www/html/wordpress/wp-content/themes/generatepress_child/js
cp prism.css /var/www/html/wordpress/wp-content/themes/generatepress_child/css
#Grant ownership to www-data
sudo chown -R www-data:www-data /var/www/html/wordpress/wp-content/themes/generatepress_child/js/prism.js
sudo chown -R www-data:www-data /var/www/html/wordpress/wp-content/themes/generatepress_child/css/prism.css
#Assign full permission to owner (www-data), and remove write permission for other users
chmod -R 755 /var/www/html/wordpress/wp-content/themes/generatepress_child/js/prism.js
chmod -R 755 /var/www/html/wordpress/wp-content/themes/generatepress_child/css/prism.css
- Add the following PHP Codes to /var/www/html/wordpress/wp-content/themes/generatepress_child/functions.php
function add_prism() {
wp_register_style('prismCSS', get_stylesheet_directory_uri() . '/css/prism.css');
wp_register_script('prismJS', get_stylesheet_directory_uri() . '/js/prism.js');
global $post, $wp_query;
$post_contents = '';
if ( is_singular() ) {
$post_contents = $post->post_content;
} elseif ( is_archive() || (is_front_page() && is_home())) {
$post_ids = wp_list_pluck( $wp_query->posts, 'ID' );
foreach ( $post_ids as $post_id ) {
$post_contents .= get_post_field( 'post_content', $post_id );
}
}
if ( strpos( $post_contents, '<code class="language-' ) !== false ) {
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
}
add_action('wp_enqueue_scripts', 'add_prism');
Related