首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

这个就是为了测试微信公众号付费功能特意写的插件,非常有诚意, 哈哈,今天更加诚意一点,特意写一篇详细的 WPJAM「代码高亮」插件使用教程。...WPJAM「代码高亮」插件特别之处 现在大部分代码高亮的插件都是使用 prism 这个代码高亮 JS 库来实现的,WPJAM「代码高亮」插件也是,只是之前是纯代码方式写到主题里面,今天就把它整理了一下,...整个插件自己写的代码只有不到 30 行,就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。...使用 WPJAM「代码高亮」插件 怎么使用 WPJAM「代码高亮」插件呢?非常简单,首先根据你使用不同编辑器略用不同。...如果你使用古腾堡编辑器的话,先点击选择创建一个代码块: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外的CSS类中输入:language-php,如果你的代码是 JS 则,输入 language-javascript

1.7K30

github pages代码高亮highlighter

github pages 一直想添加代码高亮 highlighter ,基于 jekyll 3.0 的 rouge 终于搞定了: ?...下载代码高亮库 在 cmd 中输入: rougify style monokai.sublime > rouge.css 可以下载 rouge.css 出来,将这个 css 文件放到 github pages...调试代码高亮 在 cmd 中安装 rouge 方便本地调试: gem install rouge 为了防止 ` 被转义,在 html 中添加如下 js : <script type="text/x-mathjax-config...SourceElement().parentNode.className+=' has-jax';}}); 在 cmd 中输入 jekyll server,本地打开 127.0.0.1:4000 查看<em>代码</em>是否<em>高亮</em>了...背景色为白色,字段显示不出来,所以我把 rouge.css 的背景色改成了黑色,在 rouge.css 最后面添加如下<em>代码</em>: div[class="highlight"] > pre > code[class

1.2K10

代码高亮分词对比

在做独立博客的时候,特别是对于程序员来说,代码高亮是很重要的一个组件。我也接触过几款不同的代码高亮引擎。衡量一个高亮引擎的好坏有很多不同的方面:分词、性能、稳定性、主题丰富性。...本文将专注分词的表现,对几款流行的高亮引擎以及 IDE 做一个横向对比。...什么是分词 要把一段代码高亮输出,主要工作流程大概如下: 分词的过程就类似于画画的线稿,线稿越精细,上色的自由度就越高,最终得到的输出就有可能越丰富好看。...考虑到 Prism.js 已经能有比较好的表现了,我首推 Prism.js 做博客的代码高亮。 而三个产品距离专业的代码编辑器都还有很大的距离。...所以 shiki 可以支持和 VSCode 几乎一样的的语法高亮。我的博客也最近切换到了 shiki,它是我现在最推荐的高亮引擎。

19940

Typecho文章代码高亮功能

一种不使用插件来实现几乎所有语言的语法高亮的方法 前言 Typecho是一款由国人开发的博客程序,它的特点是简洁小巧,扩展性强,并且内置支持Markdown语法写作,因而很受技术博客作者的欢迎。...但是默认的Typecho没有自带语法高亮,要实现语法高亮就要使用Typecho相应的插件,而Typecho的插件安装和调试都比较难,这里就将介绍一种不使用插件来实现几乎所有语言的语法高亮的方法。...PrismJs是一款轻量、可扩展的代码语法高亮库,使用现代化的Web标准构建,使用PrismJs可以快速为网站添加代码高亮功能,支持超过上百种编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案...↓点击“编辑当前外观” -> “header.php”,在左边的代码框中找到 /head ↓ ↓在它之前输入如图中的代码↓ ? ↓代码↓ <link rel="stylesheet" href="<?...使用 ↓在使用Markdown写文章时,只要在<em>代码</em>块标记```↓ ↓标记后面添加你的<em>代码</em>的语言名,如php, javascript等,就可以实现<em>代码</em><em>高亮</em>展示↓ ?

3.4K41

HTML highlight 代码前端高亮代码美化

参考资料: 1. highlightjs 官方使用文档 2. highlightjs 代码各种风格 3. ckeditor 代码高亮插件 Code Snippet 官方使用文档 4. ...config.uiColor = '#AADC6E'; //添加插件,多个插件用逗号隔开 config.extraPlugins = 'codesnippet'; //设置高亮风格..., 如果不设置着默认风格为default config.codeSnippet_theme = 'monokai_sublime'; }; # 富文本编辑器中显示出来的输入的代码按钮 ckeditor...Django collectstatic 后的 static_root 路径:joyoo\static_root\ckeditor\ckeditor\config.js,如果想在 debug 模式下显示 代码按钮...可以修改成自己喜欢的样式,css 文件路径:joyoo\static_root\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles,前端代码高亮还可以使用

2.7K20

WordPress 高亮代码实现过程

Typecho,WordPress 等程序高亮代码实现过程,首先引入高亮代码 js 提取代码中得关键词,标记标签;然后,利用高亮 css 更换这些标签得颜色;最重要得自然是,pre 标签重写,这样是为了告诉浏览器哪段代码要执行高亮...以后输入高亮代码,就像输入正常代码那么简单,因为这里给您自动修改了 pre 标签。当然,本教程不仅仅支持 Typecho,wordrpess等程序也可以用本教程实现代码高亮。...pre 修改 footer.php 插入如下代码,对文章内得 pre 标签修改。...JS 引入 footer.php 插入如下代码,引用 js 文件。...cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.min.js"> CSS引入 这里是主要得了,上述 pre 跟 js 让你得主题有了代码高亮得功能

80730

dotnet 使用 ClearScript 执行 VBScript 和 JS 代码 无需浏览器

有没有什么方法可以让 dotnet 作为容器,执行 JScript 代码而不需要浏览器?...其实有的,因为 VBScript 和 JS 代码都很好解析,所以有 ClearScript 支持使用 dotnet 解析代码执行 如何将 VBScript 和 JS 代码编译为 IL 或如何在 C# 和...dotnet 中嵌入 js 代码是不靠谱的,因为 js 语言设计如此,是用来在 基组模块 层运行的语言,也就是这是一个解析型的脚本,更好地做法是给他实现一个解析库。...通过解析库将代码解析为数据,在根据数据调用已经写好的代码,这样就能实现在 dotnet 中运行 js 代码了。...VBScript 代码或 js 代码了 // expose a host type engine.AddHostType("Console

1.6K20

Word中使用代码高亮插件

一年前我写了一个word2010的代码高亮插件,但当时那个版本有一个问题:在用word发布博客的时候,高亮代码在博客中的格式乱了。...我在word中生成的代码大概是这个样子: <ol class="codeBlock" ... 但是word把这段代码发布到博客后,会去除掉这个class,无语。。。...如何实现代码高亮?我用的是Wilco.SyntaxHighlighting,有兴趣的同学可以google一下,我提供的下载包里也有它的源码。 代码高亮后,如何粘帖到word里?...原理就是把代码高亮后的文本以html格式复制到剪贴板里,然后调用word的方法去粘帖: private void InsertButton_Click(object sender, RibbonControlEventArgs...另外,我这个插件在生成高亮代码时,可以清除掉代码段首尾的空行,也可以清除掉每一行的公共空格,比如下面的代码: ?

1.4K20
领券