typescript语法高亮插件_使用prismjs为文章添加代码高亮功能

prismjs 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建，使用 Prismjs 可以快速为网站添加代码高亮功能，支持超过113中编程语言，还支持多种插件，是简洁、高效的代码高亮解决方案。科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能，本文教你如何在wordpress上快速使用Prismjs实现代码高亮。

一、下载JS和CSS文件并上传到网站根目录。

在Prismjs网站下载页面下载需要的JS和CSS文件，下载页面：

在下载页面，需要选择高亮模板、支持的编程语言、插件，选择完毕后下载生成的JS和CSS文件。

二、上传JS和CSS文件到wordpress网站

我把文件上传到了网站的wp-content目录，然后在页面中引用。

三、修改header.php和footer.php文件

找到wordpress 使用的主题目录，分别修改header.php和footer.php文件

打开header.php文件，在标签前添加CSS引用。修改后就是这样

...

打开footer.php文件，在标签前添加JS引用，修改后如下：

...

三、在文章中引用

完成上述步骤后，就可以在wordpress文章中引用了。

在发表文章时将代码块用

标签包围起来，就可以实现代码高亮功能了！

如下：

四、代码块添加行号

在

里添加 line-numbers 类就可以开启代码快的行号，当然前提是你必须下载Line Numbers插件。添加方式如下：

五、prismjs支持的语言Markup - markup

CSS - css

C-like - clike

JavaScript - javascript