代码高亮插件google-code-prettify使用教程

页面中往往需要插入代码,默认颜色阅读性不好,本文介绍一款代码高亮插件 google-code-prettify 的使用。

文章目录(展开/隐藏→)

展开
3.5
(4)

本文介绍Google-Code-Prettify高亮代码插件的使用,主要包括一些CSS文件的引入、JS文件的引入以及通过JS实现自动匹配代码样式。

代码高亮插件google-code-prettify使用教程

代码高亮插件google-code-prettify

google-code-prettify时Goolgle的js代码高亮插件

使用后的效果:

代码高亮插件google-code-prettify使用教程

基本使用方法:

2.1下载插件

下载链接:google-code-prettifygithub

2.2 页面引入2个文件

Include prettify.js & prettify.css in your template.

在页面中引入链接填写你自己地址

<link href="~/js/google-code-prettify/prettify.css" rel="stylesheet" />
<script src="~/js/google-code-prettify/prettify.js"></script>

2.3 Enable Prettify Using jQuery

调用prettyPrint方法启动google-code-prettify的高亮

<script type="text/javascript">
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>

//可以直接调用 prettyPrint方法
<script type="text/javascript">
    prettyPrint();
</script>

//也可以在body中加入onload="prettyPrint()"
//onload 事件在页面载入完成后立即触发。
<body onload="prettyPrint()">...</body>

2.4 Display

给pre标签或者Code标签的Class添加,prettyprint 如果需要行号则Class添加linenums

<!-- 只高亮不显示行号 -->
<pre class="prettyprint">
<!-- Your code here -->
</pre>
<!-- 显示行号 需要添加linenums -->
<pre class="prettyprint linenums">
<!-- Your code here -->
</pre>

异步加载代码如何使用google-code-prettify高亮

在使用js加载完code标签中的数据之后再调用一次prettyPrint方法就可以实现代码块高亮。

如果pre或code标签的Class中没有prettyprint类则可以用Jquery代码添加上.

//ajax请求要显示的代码数据
//...
//给所有code 标签添加 属性 
$("code").addClass("prettyprint");
//启动高亮
prettyPrint();

更换其他样式

访问 google-code-prettify的github点击Skin链接

代码高亮插件google-code-prettify使用教程

然后下载选择你喜欢的样式,把相应的代码放入css文件中引入,不要忘记删除默认样式的prettify.css链接,不然会照成冲突。这样就可以更换其他代码高亮样式。

代码高亮插件google-code-prettify使用教程
<link href="~/js/google-code-prettify/sons-of-obsidian.css" rel="stylesheet" />

设置半透明背景

pre {
    /*背景颜色*/
    background-color: rgba(0,0,0,0.7);
}

code {
    /* background: transparent;*/
    /*背景透明*/
    background-color: transparent !important;
    /*字体大小*/
    font-size: 115% !important;
}

总结

google-code-prettify会把带有Class = ‘prettyprint’的code或pre标签中的代码,格式化为大量带自定义Class类样式的span标签,来实现代码高亮的。

代码高亮插件google-code-prettify使用教程

共计4人评分,平均3.5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

本文投稿作者:飒飒,如若转载,请注明出处:https://iymark.com/program/js/google-code-prettify.html

(0)
上一篇 2022年09月20日 21:59
下一篇 2022年09月21日 20:58

相关推荐

发表回复

登录后才能评论
本站APP