给Z-Blog加上代码高亮显示

最新推荐文章于 2021-03-11 11:39:30 发布
最新推荐文章于 2021-03-11 11:39:30 发布 · 436 阅读 · 0
文章标签：

#Blog #CSS #Web #HTML

本文介绍如何使用dp.SyntaxHighlighter 1.4.1版本实现Z-Blog语法高亮功能，包括安装配置步骤及如何将所需JS文件上传至WEB空间的方法。

用的是dp.SyntaxHighlighter ，JS+CSS实现的，很不错的东东

版本信息
dp.SyntaxHighlighter 1.4.1
Z-Blog 1.7 Laputa Build 70216

  1. 下载dp.SyntaxHighlighter.rar，解压到Z-Blog根目录，每种语言都有单独JS文件，把需要用到的传到WEB空间即可
  2. 打开z-Blog模板文件\TEMPLATE\single.html，在<head>标签里加

    <link type="text/css" rel="stylesheet" href="<#ZC_BLOG_HOST#>css/SyntaxHighlighter.css"></link>
    如果首页等其它页面也要实现语法高亮显示，在相应模板重复2、3步骤
  3. 在</body>前面加下面代码，根据自己需要选择性的加
  4. ......
......
在博客园平台为代码添加高亮
Dechin的博客
03-01 419
效果预览 让我们先来看一下实现代码高亮之后的效果图： 该片段摘取自这篇博客文章，纯黑色的背景，sublime text风格的高亮。 添加CSS代码 在设置-页面定制CSS代码中，粘贴如下代码即可： /* Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ */ ....
博客网页代码块渲染-显示行号，一键复制，全屏显示，mac风格（基于mavon-editor或wangEditor）
醉瑾_的博客
04-29 2961
效果预览 亮点：mac风格代码块，一键复制，全屏浏览，点击按住文字空白区域可左右滑动（感觉有待优化），双击关闭全屏浏览。。。。。。 样式可自行优化 前提条件（待渲染的代码块格式） <pre> <code > print("hello world") print("我是醉瑾”) </code> </pre> code为pre的直接子元素，code除了代码文本无直接子元素。pre元素不需要任何类名，实际上wangEditor的编辑器输出中代码块格
csdn博客代码高亮显示源码
09-07
类似与csdn博客里面的代码高亮显示支持 它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML等
Z-Blog源代码
03-18
查看安装过程Z-blog1.9beta1安装演示和安全设置 系统核心 [功能新增] [主要更新] WAP插件独立,新增PAD(Android\iOs)模式 [功能新增] 主题检查依赖插件 [功能新增] 侧栏评论字数限制 [功能新增] Tags Intro作为伪静态URL [修改优化] 修改Statistic,加快速度 [
ZBlog 1.7 代码高亮显示插件
baihongwei1010的博客
06-18 212
ZBlog 1.7 代码高亮显示插件 显示效果： 1.dp-highlighter2{3font-family:"Consolas","CourierNew",Courier,mono,serif;4font-size:12px;5background-color:#E7E5DC;6width:...
博客园代码高亮
baiyaoliang7445的博客
05-07 156
细节 需要设置默认编辑器为markdown 对于其他的编辑器编辑的文本并不work 步骤 查看demo https://highlightjs.org/static/demo/ 下载 https://highlightjs.org/ 解压 highlight.zip后，打开style文件夹，复制随便一份.css内的内容 在https://i.cnblogs.com/Configur...
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
11-22
用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题，这个问题在网上也找不到什么解决办法，一直困扰了我很久，今天算是把它解决了，办法其实简单，下面说下… 解决方法： 打开shCoreDefault....
Z-Blog 2.1 Phoenix Build 130128.rar
07-05
代码高亮 嗯，是的，程序员们的最爱代码高亮也将集成到Z-Blog来了。在编辑器里轻点一个按钮，即可使用syntaxhighlighter这一强大的代码高亮组件。文件管理里也可使用CodeMirror在编辑时实现代码高亮。（由于代码...
Z-Blog v2.0 Beta1 Build121001.rar
07-05
支持批量上传图片、附件，支持涂鸦，支持插入视频和在线搜索视频，支持代码高亮哦亲~  模板功能增强  全新制作CustomMeta插件，可以在发表文章时插入字段。合并部分模板文件，不需要再单独添加。支持不同文章、...
LaTeX 使用 minted宏包--代码高亮
热门推荐
lxy孙悟空的专栏
01-29 1万+
之前一直用 listings 宏包来设置代码高亮，需要手动设置一下参数，比如我的如下：\usepackage{listings} \newfontfamily\courier{Courier New} \lstset{linewidth=1.1\textwidth, numbers=left, %设置行号位置 basicstyle=\small\courier,
c# 仿博客园编辑器的插入代码 代码高亮功能
07-10
c# 仿博客园编辑器的插入代码 代码高亮功能 CodeHighlighter ActiproSoftware.CodeHighlighter.Net20
博客实现代码高亮
weixin_33868027的博客
12-13 232
2019独角兽企业重金招聘Python工程师标准>>> ...
php 导航高亮,zblogphp导航高亮代码分享教程
weixin_35924353的博客
03-11 315
导航高亮如本站演示，首页、列表页、文章页均可高亮。因为本站的主题是一个免费的zblogphp主题，所以一些好的东西可能没有，所以只好自己研究，本身自带导航高亮的功能，但是只有首页和列表页才有高亮显示，于是在zblog论坛寻找教程，找到一个教程是涂涂研版写的，但是自己研究一天，没有实现。比较沮丧，本想放弃这个功能，但是不甘心，所有又尝试了一下，导航高亮终于成功了，要感谢一下天兴工作室的指导。具体教程...
笔记-配置博客园客户端代码高亮（2016.08.20）
weixin_33753003的博客
01-08 450
参考博客文章：http://www.cnblogs.com/rollenholt/archive/2012/03/08/2384594.html   下载Window Live Writer 2012 最新版 后面没有更新了版本了。但是Open Live Writer好多插件不支持。所以只能使用最后一次版本的WLW,下载地址： Windows Live Writer 2012官方下载 ，按照步...
修改cnblogs博客园代码高亮着色
weixin_33896069的博客
03-23 497
1.下载SyntaxHighlighter，将shCoreDefault.css和shThemeDefault.css上传到你的博客 下载地址：http://alexgorbatchev.com/SyntaxHighlighter/download/   2.在设置中的页首Html代码中添加如下代码： &lt;!-- 代码高亮 start--&gt; &lt;link type=...
博客园中实现代码高亮
weixin_33676492的博客
06-23 298
本文目的：在博客园中引入sublime样式的代码高亮效果。 话不多说，先上效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>helloWorld</title> <style> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值