wordpress 文章中代码高亮显示（可视化插件）

最新推荐文章于 2024-08-10 07:33:53 发布
最新推荐文章于 2024-08-10 07:33:53 发布
阅读量1.3w 收藏 2
点赞数 3
分类专栏： 页面小知识 文章标签： wordpress 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014227785/article/details/80162509
版权

1、安装插件 Pure highlightjs 下载地址：链接: https://pan.baidu.com/s/1bpD0reB 密码: 9tau

2、进入 WordPress 后台管理页面，上传插件，上传刚才下载的 ZIP 文件，然后安装。或者解压安装包，上传到插件目录，/wp-content/plugins/。

3、启用插件 安装完毕后，在已经安装的插件里启用 “Pure Highlightjs”。

这里写图片描述

4、选用主题
这里写图片描述

5、在写文章时，将程序代码插入代码输入框 即可。
这里写图片描述
这里写图片描述

6、效果图如下：

这里写图片描述

小马哥Java
关注
专栏目录
在wordpress可视化编辑器中输入带缩进的代码
09-29
总的来说，要成功在WordPress可视化编辑器中输入带缩进的代码，你可以选择预格式化的文本块，或者借助于专门的代码插件。在日常工作中，根据个人习惯和需求，可以选择最方便的方法。记住，始终测试你的代码在发布后...
在WordPress网站上支持代码高亮（代码着色）
weixin_42077074的博客
10-26 4145
代码高亮（代码着色）就是指让代码中不同语句根据类别显示不同的颜色，从而增强可读性，而不是干巴巴一片黑色。我们可以通过Hightlight或Prism使网页支持代码高亮，在这里笔者使用了Prism Prism，即prism.js，是一个轻量级，可扩展的语法着色工具，可以让你的代码块中的代码颜色更丰富更好看（也就是“代码高亮”）。 原代码和经Prism代码高亮的对比图如下 Prism官网 https://prismjs.com/download.html 在Prism官网上自定义你的代码着色样式：着色主题
WordPress免插件实现代码高亮
夜澜静的博客
02-23 558
WordPress免插件实现代码高亮
Prism.js 教程：语法高亮工具入门及实践
最新发布
gitblog_00729的博客
08-10 343
Prism.js 教程：语法高亮工具入门及实践 PrismCreates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.项目地址:https://gitcode.com/gh_mirrors/pr...
Prism为WordPress添加代码高亮功能
xcrap的博客
05-28 712
前言 Prism有着轻便小巧、可自定义、支持市面上大多数语言、多种高亮色彩主题、HTML5 标准语法等优点。 只需要在网页头部引入它的 prism.js 和 prism.css 文件，就能美化网页中用 包裹起来的代码块。 下面我们来看看如何把 Prism 集成到 WordPress 主题中吧。 下载 prism 的 JS 文件和样式表 打开Prism 项目官网（https://prismjs.com/），点击 Download 按钮。在打开页面中进行简单配置，如下： 如果希望进行二次开发或自定义，就下载
不用插件实现WordPress代码高亮显示
ibey0nd的专栏
12-13 2122
偶尔在日志中加入一些代码，感觉完全没必要安装代码高亮插件，万一某天不用插件了，页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签，然后用CSS定义样式，通过查看页面源文件可以清楚地看到。 今天推荐的是一款本地转换代码高亮显示的小工具：CodeRenderUnmi 操作很容易，Source Code 中贴上你要着色的代码，然后选择语种，点击 Render 按钮就会在 HTML C
让代码更清晰：如何为WordPress文章添加CodeColorer代码高亮功能
winkexin的博客
07-19 577
一直想找一款能在 WordPress 中实现代码高亮的插件，在昨天经过测试，发现 CodeColorer 可以满足我的日常需要。CodeColorer 是一个开源免费的 WordPress 代码高亮插件，它允许您将代码段插入到具有良好语法高亮显示的帖子中。CodeColorer 基于 GeSHi 库的插件，支持大多数语言。
WordPress代码高亮插件CodeColorer汉化升级版
05-11
用WordPress以来，本站一直是用CodeColorer来实现代码高亮，但原版的汉化不够完全，且与不少主题都冲突，因此本人将原版修改过后使用，并加入了可视化代码插入功能，之前也想发布出来，但因为懒，一直推迟到现在，...
[WordPress插件]代码高亮插件CodeColorer汉化升级版2012.5.27
05-27
用WordPress以来，本站一直是用CodeColorer来实现代码高亮，但原版的汉化不够完全，且与不少主题都冲突，因此本人将原版修改过后使用，并加入了可视化代码插入功能，之前也想发布出来，但因为懒，一直推迟到现在才把...
Pure-Highlightjs 代码高亮插件
12-05
Pure-Highlightjs 一个基于 Highlight js 实现的 代码高亮 WordPress插件，...支持在 WordPress 可视化编辑模式下插入代码。 目前，虚幻私塾采用的代码高亮WordPress插件就是这款，简单，干净，使用方便。推荐给大家。
Crayon Syntax Highlighter 强大的WP代码高亮插件安装方法
09-28
2. **可视化模式**：在可视化编辑模式下，插件提供了一个工具栏按钮，可以直接插入代码并自动高亮。只需将代码复制到插件提供的输入框中，插件会自动处理高亮。 需要注意的是，当代码中嵌套相同类型的标签时，如 `...
wp-Syntax wordpress高亮插件使用方法
09-29
前些天在博客上安装了这款 wp-Syntax 插件，在使用的过程中遇到了不少问题，经过不断的尝试都一一解决。今天把自己的学习过程给大家做下汇总，希望可以帮到遇到问题的朋友
wp-googlecodeprettify：一个基于Google Code Prettify实现的WordPress代码高亮插件，在TinyMCE编辑器中提供了一个插入代码的按钮。在文本编辑器中，加入了pre-js，pre-css，pre-html 3一个快捷按钮;
02-05
WordPress代码高亮插件WP-googlecodeprettify 一个基于Google Code Prettify实现的WordPress代码高亮插件，在TinyMCE编辑器中提供了一个插入代码的按钮。在文本编辑器中，加入了pre-js，pre-css，pre-html 3个快捷按钮； 更新信息 2017年08月24日v3.0更新： 新增显示文件名，显示文件名时，不显示语言类型；文本编辑器中可以直接通过添加filename-加文件名的方式添加，例如： filename-index.html 。 新增显示重点代码行，可以在prettify.css文件的.important中自定义设置重点
语法highlighter：WordPress插件，可轻松发布语法高亮的代码片段
02-05
语法突出显示的演变 轻松将语法突出显示的代码发布到您的WordPress网站，而无需进行任何修改。 如在WordPress.com上看到的。 支持新的古腾堡编辑器！ 区块开发工作流程 源代码位于src文件夹中。 运行npm install以安装所有必需的模块。 更改块时： 运行npm start以构建具有文件监视功能的开发版本。 运行npm run build来生成缩小的生产文件。 有关更多详细信息，请参阅 （该插件用于管理块构建的项目）。
WordPress代码高亮插件(CodeColorer) v0.9.9中文修改版.rar
07-10
WordPress代码高亮插件(CodeColorer)使用方法 1、下载安装，并激活CodeColorer 2、写文章时，要插入代码的话，先切换到HTML模式，然后在合适位置插入代码： 3、选中代码，并点击上图红框所示的 cc 按钮，你的代码就会被以下短代码包裹： [cc lang="php"]这里是你的代码[/cc] 当然你也可以直接手动添加上面的短代码包裹你的代码，而无需点击cc按钮;最后将php改成你的代码语言即可，如html、css、javascript、c、cpp、java、ruby、python、sql等;另外，因为我经常使用php，所以这里的短代码默认是lang="php"，如果你想更改其他默认语言，可以用文本编辑器打开插件codecolorer目录下的my-custom-quicktags.js，将php改成你的默认语言。
wordpress相关文章实现代码
03-09
WordPress很多插件可以实现相关文章的功能，插件的优点是配置简单，但是可能会对网站的速度造成一些小的影响，所以很多人还是比较喜欢用代码实现需要的功能，但是话又说回来了，代码实现也有缺点，就是配置复杂，不懂代码的人完全摸不着头脑或者只能照搬别人的代码，还不如用插件。
WordPress自定义pre样式DIY代码高亮
511遇见
08-26 2359
对于pre的显示样式，我们完全可以自定义，免除插件的烦恼，下面给出一个参考，当然你想实现更强大的功能，建议你阅读: 1、强烈推荐手动安装谷歌代码高亮 google-code-prettify到wordpress 2、把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器 3、WordPress代码高亮插件 WP-GeSHi-Highlight 将以下css样式添加到你主题的 style.css中，你完全根据你的爱好，调整css样式， /**pre**/ pre {
【建站笔记】：在wordpress博客文章中插入代码段并高亮显示
热门推荐
halftion
07-14 1万+
一直以来在wordpress发布文章的时候不管代码的显示格式，都是按普通的文章本格式来发布的，但是这样很不美观而且影响阅读,最近找到了一个CodeColorer插件，用起来不错，还可以调整配色风格，下面简单记录一下CodeColorer的安装及使用方法 1、安装 进入 wordpress后，选择左侧：插件–>添加插件 进入安装插件页面。关键词输入CodeColorer，然后点搜索。在搜索...
5款WordPress代码高亮插件
wanguan2000的博客
11-05 980
5款WordPress代码高亮插件 本文为你介绍5款WordPress代码高亮插件。这些插件对于开发者很有用，他们经常会在博文中包含CSS、JS或其他语言的代码。通过使用以下插件，可以帮助更好地突出显示代码块。 1. CodeColorer 它有几种不同的主题可供选择。该插件的应用范围很广，适用于多种不同的语言。这篇博客 用这款插件来高亮代码块。 示例： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值