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
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
不用插件实现WordPress代码高亮显示
ibey0nd的专栏
12-13 2119
偶尔在日志中加入一些代码，感觉完全没必要安装代码高亮插件，万一某天不用插件了，页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签，然后用CSS定义样式，通过查看页面源文件可以清楚地看到。 今天推荐的是一款本地转换代码高亮显示的小工具：CodeRenderUnmi 操作很容易，Source Code 中贴上你要着色的代码，然后选择语种，点击 Render 按钮就会在 HTML C
在wordpress可视化编辑器中输入带缩进的代码
09-29
总的来说，要成功在WordPress可视化编辑器中输入带缩进的代码，你可以选择预格式化的文本块，或者借助于专门的代码插件。在日常工作中，根据个人习惯和需求，可以选择最方便的方法。记住，始终测试你的代码在发布后...
页面展示html代码组件,Blazor 页面组件(2)(示例代码)
weixin_42415059的博客
06-04 845
Balzor应用中, 是使用组件来构建用户界面, 例如页面、窗口、对话框等。组件使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件。1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件。注意:所有的Blazor组件, 都必须大写字符开头, 否则无效。如上图所示 ↑2.关于....
代码添加组件
weixin_34090643的博客
02-21 211
2019独角兽企业重金招聘Python工程师标准>>> ...
Prism.js 教程：语法高亮工具入门及实践
最新发布
gitblog_00729的博客
08-10 307
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...
VUE组件通信及其代码显示
许魁的博客
01-03 467
顾名思义，父子组件即组件包含组件，包含为父，被包含为子，而那些互不包含的组件即为兄弟。好了，现在就让我们来一窥父子兄弟之间是怎样的情深意切吧！ 一，父>子组件通信——老父亲对儿子的关爱； 1，打开子组件，在js中给其一个props：[ ’ msg ’ ]； 子组件内容如图： 2，打开父组件，在子组件标签里中添加信息； 父组件内容如图： 3，打开浏览器，页面显示如图： 二，子>父组件...
WordPress在博客文章中添加代码片段
Laic Zhang的博客
06-19 5574
我是通过WordPress插件CodeColorer来达到目的的， 安装好CodeColorer后，可以在设置->codecolorer中看到 使用方法: [cc lang=“编程语言”] 代码 [/cc] 例如： [cc  lang=“python”] n = eval(input()) if n == 0: print(“Hello World”) elif n >...
WordPress代码高亮插件CodeColorer汉化升级版
05-11
用WordPress以来，本站一直是用CodeColorer来实现代码高亮，但原版的汉化不够完全，且与不少主题都冲突，因此本人将原版修改过后使用，并加入了可视化代码插入功能，之前也想发布出来，但因为懒，一直推迟到现在，...
[WordPress插件]代码高亮插件CodeColorer汉化升级版2012.5.27
05-27
用WordPress以来，本站一直是用CodeColorer来实现代码高亮，但原版的汉化不够完全，且与不少主题都冲突，因此本人将原版修改过后使用，并加入了可视化代码插入功能，之前也想发布出来，但因为懒，一直推迟到现在才把...
Crayon Syntax Highlighter 强大的WP代码高亮插件安装方法
09-28
2. **可视化模式**：在可视化编辑模式下，插件提供了一个工具栏按钮，可以直接插入代码并自动高亮。只需将代码复制到插件提供的输入框中，插件会自动处理高亮。 需要注意的是，当代码中嵌套相同类型的标签时，如 `...
Pure-Highlightjs 代码高亮插件
12-05
Pure-Highlightjs 一个基于 Highlight js 实现的 代码高亮 WordPress插件，...支持在 WordPress 可视化编辑模式下插入代码。 目前，虚幻私塾采用的代码高亮WordPress插件就是这款，简单，干净，使用方便。推荐给大家。
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来生成缩小的生产文件。 有关更多详细信息，请参阅 （该插件用于管理块构建的项目）。
【Vue 开发实战】实战篇 # 45：如何构建可交互的组件文档让代码高亮的显示在页面
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-30 897
我们不走 webpack 的配置，使用下面一种方式。我们可以看到效果已经出来了，不过没有样式。【Vue 开发实战】学习笔记。'ECharts 入门示例'分析页添加这个高亮的显示。要实现这个代码的显示。
wordpress代码显示问题
m0_62550134的博客
01-24 257
wordpress代码块关键词高亮，部分字符被转义字符代替的问题。
在线编辑java代码插件,WordPress Code Editor 插件让你在线编辑主题/插件即时语法高亮...
weixin_34221599的博客
03-10 392
晚上找了一些时候在线的即时语加亮组件，很多的，在线的代码编辑器就语法即时高亮上都可与客户端的编辑器相媲美了。有商业的，功能很丰富的，也有开源的，像CodePress, 就很简单它支持PHP, JavaScript, Java, Perl, SQL, HTML和 CSS代码的即时着色，完全由 JavaScript来进行渲染。顺着CodePress来搜索，恰好还找到一个能让我们在W...
如何在WordPress网站上轻松显示代码
WP站长
04-19 6649
您想在WordPress博客文章中显示代码吗？如果您尝试添加常规文本代码，则WordPress将无法正确显示。 每次保存文章时，WordPress都会通过几个清理过滤器运行您的内容。这些过滤器用于确保有人不通过文章编辑器注入代码来破解您的网站。 在本文中，我们将向您展示在WordPress网站上轻松显示代码的正确方法。我们将向您展示不同的方法，您可以选择最适合您需求的方法。 方法1...
WordPress免插件实现代码高亮
夜澜静的博客
02-23 550
WordPress免插件实现代码高亮
让代码更清晰：如何为WordPress文章添加CodeColorer代码高亮功能
winkexin的博客
07-19 556
一直想找一款能在 WordPress 中实现代码高亮的插件，在昨天经过测试，发现 CodeColorer 可以满足我的日常需要。CodeColorer 是一个开源免费的 WordPress 代码高亮插件，它允许您将代码段插入到具有良好语法高亮显示的帖子中。CodeColorer 基于 GeSHi 库的插件，支持大多数语言。
WordPress CoolCode插件：代码高亮与下载
CoolCode是一款专为WordPress博客设计的代码高亮插件，它的主要功能是增强代码的可读性和美观性，特别适合程序员或技术博主在文章中展示源代码。此插件在原有的WordPress Code Highlight基础上进行了多项改进，提高...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值