JavaScript全局修改代码修饰器CSS 网站添加prettify代码高亮教程

😂 这篇文章最后更新于909天前,您需要注意相关的内容是否还可用。

 不同主题高亮不统一问题

本站由于之前曾用不同编辑器插件编辑文章,因此代码高亮区域的CSS都点不同,不同主题之间对<pre>标签的处理也都不一样,造成每个主题都有不同的代码高亮形式。之前我的解决方法是改插件的CSS实现CSS内容统一,但这样面临两个问题:

  1. 操作麻烦 需要手动修改CSS源文件

  2. 破坏插件CSS 当插件更新时会修改可能会被覆盖恢复

    感叹之前想得太麻烦,其实很简单解决这个问题,首先引入相关js、css代码(没有可在商店下载):

<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     
<script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>

然后通过js遍历标签节点强制更改pre标签为指定样式:

    <script type="application/javascript">
		var tags= document.getElementsByTagName("pre");
		for (let s of tags) {
			s.setAttribute("class","fy-prettyprint linenums");
		}
	</script>

最后将这段代码放在主题设置的统计代码中即可,即以下:

代码高亮代码

<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     
<script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>
<script type="application/JavaScript">
	var tags= document.getElementsByTagName("pre");
	for (let s of tags) {
		s.setAttribute("class","fy-prettyprint linenums");
	}
	prettyPrint();
</script>

其中本站已在prettify.js中调用了prettyPrint()方法,因此可以删除prettyPrint()避免重复调用。但是鄙人发现调用后还是没效果,发现可能是jq版本造成的错误,原错误代码:

/*初始化prettyPrint*/
jQuery(window).load(function(){
    jQuery("pre").addClass("prettyprint");
     prettyPrint();
})

改成下列即可

/*初始化prettyPrint*/
$(window).on('load',function(){
    jQuery("pre").addClass("prettyprint");
     prettyPrint();
})

代码复制功能

代码复制引用相关js即可。Z-Blog用户可在应用商店搜索“复制代码”

<script src="/zb_users/plugin/copycode/clipboard.min.js"></script>
<script src="/zb_users/plugin/copycode/copycode.js" type="text/javascript" /></script>

将如下代码放在网站任意共通页面中即可。

文章页面编辑功能

给每篇文章页面添加编辑功能,很简单,在文章显示页的PHP主题模板文件中添加:

<span>{if $user.ID>0}<i class="fi fi-edit"></i><a href="{$host}zb_system/cmd.php?act=ArticleEdt&id={$article.ID}" rel="nofollow">Edit &nbsp;</a>{/if}</span>

当然最简单是将上述封装成js文件直接引用就行,可以省去修改PHP模板的困扰,也减少代码侵入:

var tags = document.getElementsByTagName("pre");
for (let s of tags) {
	s.setAttribute("class", "fy-prettyprint linenums");
}
function getCookie(cookieName) {
	var cookieValue = "";
	if (document.cookie && document.cookie != '') {
		var cookies = document.cookie.split(';');
		for (var i = 0; i < cookies.length; i++) {
			var cookie = cookies[i];
			if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {
				cookieValue = cookie.substring(cookieName.length + 2, cookie.length);
				break;
			}
		}
	}
	return cookieValue;
}
if (getCookie('username')) {
	var pathName = window.location.pathname;
	if (pathName.indexOf('post/') > -1) {
		var endNum = pathName.length - 5;
		var articleNo = pathName.substring(6, endNum);
		if (!$('.article-info .fr .edits').html()) {
			var editStr =
				'<span><i class="fi fi-edit"></i> <a href="/zb_system/cmd.php?act=ArticleEdt&id='+articleNo+'"rel="nofollow">Edit &nbsp;</a></span> ';
			$('.article-info .fr').prepend(editStr);
		}
	}
}

以上代码思路也很简单,判断当前cookie中是否有用户名字段,有就在页面指定位置添加编辑按钮,这里编辑按钮的articleNo是根据当前页面Url来的,你的页面伪静态策略可能不一样,因此根据实际需求修改吧,关于编辑框插入位置的css选择器也根据实际情况进行修改即可。

目录导航
  • 不同主题高亮不统一问题
    • 代码高亮代码
  • 代码复制功能
  • 文章页面编辑功能