头部引入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页面黑色高亮代码相关推荐

  1. 小兔鲜注册页面验证、阶段案例(登录、首页页面)(重点)、小兔鲜放大镜效果——DOM

    目录 1. 小兔鲜注册页面验证 2. 阶段案例(登录.首页页面)(重点) 3. 小兔鲜放大镜效果 1. 小兔鲜注册页面验证 验证码模块有个小问题: 连续点击获取验证码会导致触发多次计时器,会导致计时出 ...

  2. android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...

    介绍 开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也 不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...

  3. 计算机页面的滚动栏怎么拉长,长滚动网页页面设计技巧

    长滚动网页页面设计技巧 长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,下面是小编分享的长滚动网页页面设计技巧,一起来看一下吧. 长滚动式的页面有着如下 ...

  4. aspx跳转页面的符号_解决SpringBoot+MyBatis框架下页面跳转问题与代码优化处理。...

    一.关于页面跳转的疑问 后台「return "/pool/index"」返回的是字符串,会自动寻找名为"index"的页面模板文件是怎样实现的? 答:这是Spr ...

  5. vue 父页面中的方法 调用_解决Vue中页面成功渲染数据undefined的问题

    前言 这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233​zhuanlan.zhihu.com 问题描述 我最近的一个功能需求是通过 ...

  6. 【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题

    [问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 参考文章: (1)[问题解决]移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题 (2) ...

  7. Java登陆页面经常出现的问题,问一下关于登陆页面的有关问题

    问一下关于登陆页面的问题 今天照着参考书做一个jsp登陆页面的练习,页面成功显示,但是我点击按钮不会登陆 代码我是照着书打上去的  大家帮我看一下吧 login.jsp 登陆 登陆名: alt=会员名 ...

  8. 如何获取html页面上的按钮列表,如何从一个html页面获取单选按钮的值到另一个?...

    我尝试获取位于第一个html页面上的底部粘贴html代码的值.我有另一个html页面,应该用"onclick"按钮生成.更准确地说,代码应该在下一页中创建按钮.如何从一个html页 ...

  9. OAF在打开的新页面中添加按钮,功能是关闭当前页面

    OAF在打开的新页面中添加按钮,功能是关闭当前页面 javascript:close()

最新文章

  1. 1043 Is It a Binary Search Tree
  2. VMware 克隆虚拟机后网卡无法启动
  3. NYOJ 663 弟弟的作业
  4. 使用nio多线程下载网络文件实例
  5. Elasticsearch-搜索并获取数据
  6. Exchange2010 SP1部署边缘服务器
  7. submit+php语法报错,PHP语法基础部分
  8. Python脚本控制的WebDriver 常用操作 十八 获取测试对象的css属性
  9. LLVM每日谈之二十一 一些关于编译器和LLVM/Clang的代码
  10. [spoj694spoj705]New Distinct Substrings(后缀数组)
  11. 基于SSM的在线商城系统(最新)
  12. python支持向量机库_为支持向量机库LIBSVM使用python绑定的示例
  13. IGBT简介、结构及原理
  14. 小米路由器3g改无线打印机服务器,小米路由器3G怎么设置?
  15. 地理坐标系转换工具,支持WGS84/GCJ02/BD09等常用坐标系互转
  16. python PNG图片显示
  17. f分布表完整图a=0.01_c++多态和虚函数表实现原理 - 一字千金
  18. 你同学都身价上亿了,你还在纠结早晨几点能起床
  19. 机器学习笔记——神经网络与深度学习
  20. 苹果公布Apple Watch手表新专利,可穿戴设备少不了Find My技术

热门文章

  1. 什么是计算机图形学?(转自中国科学技术大学-刘利刚)
  2. eclipse安装angularjs
  3. 人工智障也刷题!Kaggle 入门之实战泰坦尼克号
  4. 苹果系统代码汉字转拼音
  5. 【分享】“飞书第三方“在集简云平台集成应用的常见问题与解决方案
  6. hadoop3.X 和 Hadoop 2.X的web端口号访问
  7. EXCEL设置自动隔行填充颜色
  8. 端口号占用,查看端口号
  9. Kubernetes1.4新特性前瞻:设置JOB执行计划
  10. linux下双网卡绑定,Linux下双网卡绑定bond0