html页面有个黑色的点,prettify实现html页面黑色高亮代码
头部引入prettify样式和js:
给body加οnlοad="prettyPrint()"方法
底部script代码:
window.onload = function ()
{
prettyPrint();
}
$(function() {
prettyPrint();
$('pre').addClass("prettyprint linenums");
})
效果:
var currentTime = Math.floor(parseInt(audio.currentTime)/60)+":"+(parseInt(audio.currentTime)%60/100).toFixed(2).slice(-2);
console.log(Math.floor(parseInt(currentTime)/60)+":"+(parseInt(currentTime)%60/100).toFixed(2).slice(-2));
$("#current").html(currentTime);
}
pre标签代码换行样式:/*新版*/
pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;margin-bottom:1.5rem}
pre.prettyprint {display:block;background-color:#333;padding:10px 10px;font-weight:normal;font-size:14px}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
pre ol.linenums { margin-top: 5px; margin-bottom: 5px; padding-left:20px;color: #AEAEAE } /* IE indents via margin-left */
pre li.L0, pre li.L1, pre li.L2, pre li.L3, pre li.L4, pre li.L5, pre li.L6, pre li.L7, pre li.L8, pre li.L9 { list-style-type: decimal;}
/* Alternate shading for lines */
pre li.L1,pre li.L3,pre li.L5,pre li.L7,pre li.L9 { }
@media print {
pre.prettyprint { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; font-style: italic }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {
padding-left: 20px;
color: #bebec5;
font-size:14px;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
line-height: 1.6rem;
margin-left: 0;
}
.prettyprint.linenums, pre.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;
-moz-box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;
box-shadow: inset 40px 0 0 #3D4C53,inset 41px 0 0 #464741;
}
pre p > code{
margin: 0 3px;
background: #ddd;
border: 1px solid #ccc;
border-radius: 2px;
color: rgba(0,0,0,0.6);
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
}
pre a > code{
margin: 0 3px;
background: #ddd;
border: 1px solid #ccc;
border-radius: 2px;
color: #2a7ae2;
}
pre li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 { list-style-type: decimal;}
/*新版*/
注:样式可以根据自己需要调整边距,字体等。
html页面有个黑色的点,prettify实现html页面黑色高亮代码相关推荐
- 小兔鲜注册页面验证、阶段案例(登录、首页页面)(重点)、小兔鲜放大镜效果——DOM
目录 1. 小兔鲜注册页面验证 2. 阶段案例(登录.首页页面)(重点) 3. 小兔鲜放大镜效果 1. 小兔鲜注册页面验证 验证码模块有个小问题: 连续点击获取验证码会导致触发多次计时器,会导致计时出 ...
- android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...
介绍 开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也 不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...
- 计算机页面的滚动栏怎么拉长,长滚动网页页面设计技巧
长滚动网页页面设计技巧 长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,下面是小编分享的长滚动网页页面设计技巧,一起来看一下吧. 长滚动式的页面有着如下 ...
- aspx跳转页面的符号_解决SpringBoot+MyBatis框架下页面跳转问题与代码优化处理。...
一.关于页面跳转的疑问 后台「return "/pool/index"」返回的是字符串,会自动寻找名为"index"的页面模板文件是怎样实现的? 答:这是Spr ...
- vue 父页面中的方法 调用_解决Vue中页面成功渲染数据undefined的问题
前言 这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述 我最近的一个功能需求是通过 ...
- 【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题
[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...
- Java登陆页面经常出现的问题,问一下关于登陆页面的有关问题
问一下关于登陆页面的问题 今天照着参考书做一个jsp登陆页面的练习,页面成功显示,但是我点击按钮不会登陆 代码我是照着书打上去的 大家帮我看一下吧 login.jsp 登陆 登陆名: alt=会员名 ...
- 如何获取html页面上的按钮列表,如何从一个html页面获取单选按钮的值到另一个?...
我尝试获取位于第一个html页面上的底部粘贴html代码的值.我有另一个html页面,应该用"onclick"按钮生成.更准确地说,代码应该在下一页中创建按钮.如何从一个html页 ...
- OAF在打开的新页面中添加按钮,功能是关闭当前页面
OAF在打开的新页面中添加按钮,功能是关闭当前页面 javascript:close()
最新文章
- 1043 Is It a Binary Search Tree
- VMware 克隆虚拟机后网卡无法启动
- NYOJ 663 弟弟的作业
- 使用nio多线程下载网络文件实例
- Elasticsearch-搜索并获取数据
- Exchange2010 SP1部署边缘服务器
- submit+php语法报错,PHP语法基础部分
- Python脚本控制的WebDriver 常用操作 十八 获取测试对象的css属性
- LLVM每日谈之二十一 一些关于编译器和LLVM/Clang的代码
- [spoj694spoj705]New Distinct Substrings(后缀数组)
- 基于SSM的在线商城系统(最新)
- python支持向量机库_为支持向量机库LIBSVM使用python绑定的示例
- IGBT简介、结构及原理
- 小米路由器3g改无线打印机服务器,小米路由器3G怎么设置?
- 地理坐标系转换工具,支持WGS84/GCJ02/BD09等常用坐标系互转
- python PNG图片显示
- f分布表完整图a=0.01_c++多态和虚函数表实现原理 - 一字千金
- 你同学都身价上亿了,你还在纠结早晨几点能起床
- 机器学习笔记——神经网络与深度学习
- 苹果公布Apple Watch手表新专利,可穿戴设备少不了Find My技术
热门文章
- 什么是计算机图形学?(转自中国科学技术大学-刘利刚)
- eclipse安装angularjs
- 人工智障也刷题!Kaggle 入门之实战泰坦尼克号
- 苹果系统代码汉字转拼音
- 【分享】“飞书第三方“在集简云平台集成应用的常见问题与解决方案
- hadoop3.X 和 Hadoop 2.X的web端口号访问
- EXCEL设置自动隔行填充颜色
- 端口号占用,查看端口号
- Kubernetes1.4新特性前瞻:设置JOB执行计划
- linux下双网卡绑定,Linux下双网卡绑定bond0