UEditor功能虽然强大，能够去上传图片并且能够排版，可以选择代码语言等强大功能，但是代码高亮需要借助外力。在尝试前端代码高亮的过程中，首先用了syntaxhighlighter这个工具，感觉国内很多人都用这个东西。但是出现了两个问题，在引入的js和css文件加载的过长的原因，前端等了许久都没有效果出现，而且不支持HTML语法，会总是弹出alert。为了避免踩更多的坑，直接使用了Google提供的工具。比syntaxhighlighter简单易用。首先下载工具。然后解压到项目中，在前台显示代码的页面引入。&script type=&text/javascript& src=&plugins/prettify/prettify.js&&&/script&
并且引入css文件。
&link rel=&stylesheet& href=&plugins/prettify/style/desert.css&&
当然它提供了很多种theme，可以引入不同的css文件。效果如下：最后需要加入一段脚本：&script&
$(&pre&).addClass(&prettyprint&);
prettyPrint();&/script&代码必须包含在&pre&&/pre&标签中使用。而UEditor选择的代码编辑正好会在前台或者数据库中保存你的代码内容是在&pre&&/pre&中。因此，不用担心这个问题。而且更重要的是，不需要你在代码上做很多区分。效果如下：这样的话都不会显示行号。解决办法为：
在脚本中增加class： linenums。
如下代码。
$(&pre&).addClass(&prettyprint linenums&);这样的话会显示第五行倍数的代码的行号，再将desert.css中这样一段代码注释：/* li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } */则得到如下效果：这样，代码就完美了。备注：
这个工具需要jquery支持，引用时需要将其javascript文件放在jquery之下。希望微信能够有这样的功能，这样在一些程序员的公众号上就可以完美展示自己的代码了。BeAce(beace0729)　
　文章为作者独立观点，不代表微头条立场
的最新文章
虽然我接触前端已经有将近两年半的时间，但是我还是不敢自诩为一名合格的前端开发工程师。于是我找了一个名词来形容我自己的状态--初级前端开发者。之所以写这篇文章，是想抒发一下对如日中天的微信的感慨。虽然我接触前端已经有将近两年半的时间，但是我还是不敢自诩为一名合格的前端开发工程师。于是我找了一个名词来形容我自己的状态--初级前端开发者。之所以写这篇文章，是想抒发一下对如日中天的微信的感慨。当我习惯了letsencrypt一个命令无需配置就可以实现一切的时候，终于需求满足不了我了。由于博客的改版，服务由Apache切换到了Nginx，再次安装letsencrypt的时候总是提示已经安装过，没有办法去区分服务器类型。在npm init 执行命令：npm i express --savenpm i express-sessiBuild a Cross-Platform App with Ionic.自从今天想起来网站证书过期，我就不敢相信Jerry Qu写的鬼了。我在折腾了各种方式证书也没有更新，最终...1、点击头像下拉三角形按钮，进入settings2、点击左侧列表按钮中的oAuth applications此文为记录在wordpress的backwpup自动备份插件的使用。boss说要用最方便的备份插件来备份所有是时候去学系TypeScript了。当下互联网的分享精神，让程序员的代码不仅仅在本地展示。通过简单地部署，直接在企业的平台上运行。省心，放心。UEditor功能虽然强大，能够去上传图片并且能够排版，可以选择代码语言等强大功能，但是代码高亮需要借助外力。博客后台的内容编辑区域用富文本编辑器去更简洁的排版，尤其是代码的排版，高亮。beace0729Font-End Web（前端开发）有关认识，个人Coding展示与分享，生活随笔。热门文章最新文章beace0729Font-End Web（前端开发）有关认识，个人Coding展示与分享，生活随笔。1585人阅读
Bootstrap（1）
在网上查了一下，有一个不太完美的解决办法，就是加入如下代码：
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
&list-style-type: decimal !important
然后再将你需要显示的代码里面的&br/&换成回车即可，这样就可以显示出来行号了。
&&pre class=&prettyprint pre-scrollable linenums&&
& &&div class=&span4&&
& & & & &h2 class=&page-header&&区块1&/h2&
& & & & & & &/div&
& & & & &&div class=&span4&&
& & &&h2 class=&page-header&&区块2&/h2&
&&/div&&/pre&
效果如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：513371次
积分：6896
积分：6896
排名：第2333名
原创：200篇
转载：21篇
译文：10篇
评论：137条
文章：11篇
阅读：36051
(1)(35)(3)(13)(15)(12)(13)(13)(15)(1)(2)(9)(6)(2)(4)(8)(4)(8)(2)(13)(11)(4)(2)(5)(6)(1)(4)(1)(1)(2)(5)(7)(1)(2)(1)
若涉侵权等事宜及博客内容错误，均发送信息到：bootstrap（5）
利用google prettify 让代码高亮，好看。
下载地址：&/p/google-code-prettify/
/prettify/
网络引入地址： ///prettify/r298/prettify.min.js
效果图如下
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
String path = request.getContextPath();
String basePath = request.getScheme()+&://&+request.getServerName()+&:&+request.getServerPort()+path+&/&;
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link rel=&stylesheet& href=&///bootstrap/3.3.5/css/bootstrap.min.css&&
&!-- 可选的Bootstrap主题文件（一般不用引入） --&
&link rel=&stylesheet& href=&///bootstrap/3.3.5/css/bootstrap-theme.min.css&&
&link href=&///prettify/r298/prettify.min.css& rel=&stylesheet&&
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src=&///jquery/1.11.3/jquery.min.js&&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src=&///bootstrap/3.3.5/js/bootstrap.min.js&&&/script&
&script src=&///prettify/r298/prettify.min.js&&&/script&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&质量录入&/title&
&body onload=&prettyPrint()&&
&form action=&&%=basePath %&rest/wx& method=&post&&
&div class=&container&&
&h1 class=&page-header&&代码&small&google prettify代码高亮&/small&&/h1&
&p&Bootstrap是基于&code&HTML5&/code&和&code&CSS3&/code&开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。&/p&
&pre class=&prettyprint linenums&&
&div class=&container&&
&h1 class=&page-header&&列表&small&无序列表、有序列表、描述列表&/small&&/h1&
&h2&有序列表&/h2&
&li&开发&/li&
&li&运维&/li&
&li&需求&/li&
&h2&无序列表&/h2&
&li&JAVA&/li&
&li&PHP&/li&
&li&C#&/li&
&h2&描述列表&/h2&
&dl class=&dl-horizontal&&
&dt&JAVA&/dt&&dd&SUN公司的开发语言&/dd&
&dt&C#&/dt&&dd&Microsoft公司的语言&/dd&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：10301次
排名：千里之外
原创：76篇
(1)(1)(3)(26)(16)(22)(3)(1)(2)(2)你的位置： >
> 基于Google Code Prettify wordpress插件WP-code-button
做自己写了一个代码插件WP-code-button，一个基于 Google Code Prettify 实现的WordPress代码高亮插件,后台带代码插入功能，无须设置安装就可以使用
Google Code Prettify 是居于jquery的代码高亮插件,所以你的博客必须安装加载jquery,插件中不包含jquery
主要是之前一直用Google Code Prettify来实现代码高亮，但是有问题就是wordpress默认tinymce编辑器后台代码插入的时候会把代码的缩减都去除，如果代码有多行那样看起来就不是很直观，现在开发WP-code-button wordpress插件来解决这个问题
目前版本0.1
或者在wordpress 后台插件处搜索“WP-code-button”
github链接: /QiuCarson/wp-code-button
添加代码换行样式，如果没有jquery就添加jqeruy
1、修改样式
1、修改js底部加载
1、解决基于 Google Code Prettify 实现的WordPress代码高亮插件,后台带代码插入功能
插件安装好之后后台wordpress默认tinymce编辑器会出现代码插入按钮
单击之后弹出WP-code-button代码插入界面
插件中Google Code Prettify的css插入到wp_head里，js插入到wp_footer，以我的小松博客为例，代码截图如下
QQ交流群：如无特别说明，本站文章皆为原创，若要转载，务必请注明以下原文信息:转载保留版权：&
本文链接地址：赏
与本文相关的文章
木有头像就木有JJ！按步骤申请Gravatar头像吧！Google Code Prettify 代码高亮显示行号 - 推酷
Google Code Prettify 代码高亮显示行号
以前我使用 highlight.js,
kindeditor编辑器。为了更好的兼容性，代码高亮插件改为了
，出现无法显示行号问题，记录解决方法。
1.修改code.js文件49行为
html = '&pre class=&prettyprint linenums' + cls + '&&\n' + K.escape(code) + '&/pre& ';
2.修改主题文件github.css，添加
/* IE indents via margin-left */
list-style-type: decimal !important
pre.prettyprint ol li {
margin-left: 10
padding-left: 10
border-left: 2px solid #BBE9BB;
3.自用hemisu.css主题样式
/* Hemisu Light */
/* Original theme - /vim-color-scheme-hemisu/ */
.prettyprint {
background:
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas,
font-size: 12
line-height: 1.5;
border: 1px solid #
padding: 10
color: #111111;
@media screen {
color: #739200;
color: #739200;
color: #999999;
color: #ff0055;
color: #538192;
color: #111111;
color: #111111;
color: #111111;
color: #111111;
color: #739200;
color: #ff0055;
color: #111111;
color: #111111;
color: #538192;
@media print, projection {
color: #006600;
color: #006;
font-weight:
color: #600;
font-style:
color: #404;
font-weight:
color: #004444;
.pun, .opn, .clo {
color: #444400;
color: #006;
font-weight:
color: #440044;
color: #006600;
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
/* IE indents via margin-left */
list-style-type: decimal !important
/* Alternate shading for lines */
pre.prettyprint ol li {
margin-left: 10
padding-left: 10
border-left: 2px solid #BBE9BB;
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}