将博客文章编辑器切换为markdown后,如何实现代码高亮?

面对博客代码高亮的问题该怎么办?可以试着阅读这篇文章,里面会分享一些实用的方法,让你的博客代码轻松获得高亮显示的效果。

切换编辑器

之前,我在博客上遇到的麻烦是代码无法高亮显示,这让我挺烦恼的。不过,最近我决定要彻底解决这个问题。为此,我打算更换博客自带的编辑器,挑选一款能满足我需求的工具。经过仔细比较,我最终选择了WP .md插件。这个插件有一个不错的功能,就是支持实时预览,用起来真的很方便。该工具选用的代码高亮技术名为prism,在编辑代码时,prism语法会自动应用于代码,无需进行额外配置,这大大减轻了我们的负担。在插件配置里,您需寻找“语法高亮选项”,接着选择“启用Prism语法高亮”功能即可。

下载代码文件

若要进行代码的高亮展示,请前往prism官网下载相应的CSS和JS文件。官网上有下载链接,方便我们自行选择。挑选自己常用的编程语言和配置,确定后点击JS和CSS,就能下载到对应的prism.js和prism.css文件。这个过程就像为汽车添加合适的燃料,文件准备齐全后,系统才能顺利运行。

主题文件夹操作

  code_here 

文件下载完毕后,要进入相应的主题文件夹执行操作。在这个文件夹里,需要创建一个叫作prism的子文件夹,然后把下载的prism.js和prism.css文件放到这个子文件夹里。这整个过程可以比作是给两位刚认识的朋友挑选住处,以便将来能够轻松找到它们。接下来,我们要对.php文件进行修改,目的是保证文件内设定的路径与prism.js以及prism.css这两个文件的存放地点相吻合。只有路径设置准确无误,后续的引用过程才不会出现任何问题。

确认效果呈现

完成了前面的步骤,我们终于踏入了检验成果的关键阶段。在刷新文章页面的那一刻,内心不由得紧张起来,对之前的努力能否取得成效感到忐忑。但页面重新加载后,代码被醒目地凸显出来,那种心情真是无比舒畅,就像解开了长期困扰的谜团。经过一番尝试,我们惊喜地发现之前的步骤确实使得代码能够顺利高亮,这证明了我们的操作既准确又有效。

复盘实现思路

审视整个流程,每一步都显得极其关键。首先,选择一个恰当的编辑器是至关重要的,没有它,后续的高亮功能就无法启动;其次,从官方网站上下载相关文件,这是实现代码高亮的基础;最后,在主题文件夹内执行一系列操作,为文件发挥功能构建了必要的环境。这些步骤环环相扣,就像一台精密的机器,缺少任何一个部件都无法正常运行。

未来优化方向

尽管代码高亮功能已经顺利实施,但我们意识到还有提升的空间。将来,我们计划根据不同文章类型来调整高亮效果,以此来增强页面的视觉效果。此外,我们打算探索更高效的代码加载技术,以便提升页面的加载速度。我们应当坚持不懈,努力使博客中的代码呈现更加出色。

图片[1]-将博客文章编辑器切换为markdown后,如何实现代码高亮?-东山笔记

在努力为博客增设代码高亮这一功能的过程中,我遇到了诸多困难。此外,还请您对这篇文章给予点赞,并且帮忙转发一下。

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');

© 版权声明
THE END
喜欢就支持一下吧
分享