用prism为WordPress页面实现代码高亮

0x01 下载prism的css与js文件

• 在prism官网下载prism的css与js文件

0x02 ssh方式登陆服务器

• 在路径/wordpress/htdocs/wp-content/themes/你的主题名称/路径下创建prism文件夹
• 将prism.css与prism.js两个文件上传到prism文件夹中

0x03 修改functions.php

• 在/wordpress/htdocs/wp-content/themes/你的主题名称/下找到functions.php
• vi修改文件，添加以下语句：

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径          
        );
        wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism/prism.js'   //自定义路径          
        );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

0x04注意

• get_stylesheet_directory_uri()与get_parent_theme_file_path( '/inc/color-patterns.php' )的区别
• 使用get_parent_theme_file_path( '/prism/prism.css' )语句之后发现页面代码高亮没生效
• 通过chrome F12调试 发现prism.css与prism.js没加载成功
• 细看发现请求路径不对劲
• 修改成get_stylesheet_directory_uri().'/prism/prism.js'之后代码高亮生效