使用code-prettify美化代码并显示行号的方法
2015-12-16 16:50:19 | 来源:新浪微博 | 投稿:zhao-jun | 编辑:小柯

原标题:使用code-prettify美化代码并显示行号的方法

使用code-prettify美化代码并显示行号的方法


code-prettify是美化网页中代码的javascript脚本。项目地址是:https://github.com/google/code-prettify

本来想使用prism.js这个脚本的,但是始终不行,不知道是不是和bootstrap有冲突还是怎幺着?

下面说下code-prettify美化代码并显示行号的步骤:

一、在html页面源码中的<body>...</body>部分添加如下一行代码:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

说明:此行代码的作用是加载html页面时,自动加载prettify的js和css文件来美化指定的代码块。

二、指定要美化的代码块:

将html源码中需要美化的代码放置于<pre class="prettyprint">...</pre>中,如下所示:

<pre class="prettyprint">

class MyClass:

"""A simple example class"""

i = 12345

def f(self):

return 'hello world'

</pre>

三、显示行号:

1、修改页面源码中的<pre class="prettyprint">...</pre>部分为<pre class="prettyprint linenums">...</pre>,如下所示:

<pre class="prettyprint linenums">

class MyClass:

"""A simple example class"""

i = 12345

def f(self):

return 'hello world'

</pre>

2、在html页面源码的<head>...</head>间添加以下代码:

<style>

li.L0, li.L1, li.L2, li.L3,

li.L5, li.L6, li.L7, li.L8

{ list-style-type: decimal !important }

</style>

经过以上步骤后的代码美化效果如下:


*** 转载请注明本文地址:http://www.zhikeji.top/blogs/blog/212/ ***

上一篇:sae的python环境下访问二级域名重定向到已绑定的顶级域名的方法

打赏补血,激情再战

tags:

上一篇  下一篇

相关:

Crabapple到底是什幺树?

来自文学城的农家苦注:我只是个搬运工,发现这篇写的不错,就搬过来给大家读读。
这个树种,英文有两种写

龚文祥:作为中国电商第一意见领袖的2015年十大总结

龚文祥:我的2015年作为中国电商第一个人自媒体及意见领袖的十大总结在获得微博年度意见领袖大奖之季,又到

六级翻译高分技巧 第二弹 (原创文章,吐血推荐)

说在前面到了第二课,难度有所上升,可能需要你花更多的力气去消化,请注意,这不是一顿快餐.. It deserves

关于个股,星哥一直很自豪

新哥10月20日开微博来,断断续续说了一百多个股,除了目前大名城和华海还套着点,应该没有亏过的股了,就不

[案例]轰轰烈烈的7家创业公司2015相继死去,不可不知的7大死亡陷阱

文/金错刀(微信ID:ijincuodao。覆盖300万科技商业人群的每日独家干货)编译/Max(微创新研究中心编辑)江

付费今日只出击1场稳胆,2点开踢!

“微博付费阅读”昨天出击了两场比赛,“4拉科鲁尼亚让球1/0、24什鲁斯伯里让球0”,结果前一场的拉科鲁尼

MG 3SW首试 结论是一道等式:MG 3加SW=MG 3SW

MG 3SW?接到名爵MG的试驾邀请之前,我对于MG 3SW的概念还停留在南汽名爵时代。SW这个名号也沉寂有好一段

强势上升通道的判断

很多投资者问,判断四高次新股上升通到完好的要点是什幺?回答:股指自底部起动形成低点连线支持,并且以20日和

金猴2号盈利10%清仓,金猴3号出世!

今天大盘走势符合预期,总体在3500之上震荡。1号蓄势中,不亏不盈,随时可能爆发。金猴2号(中源协和)推出

付费2015大军改启幕

此次军改是中共建政以来军队系统最大的一次深刻变革,其意义不亚于“1980年代初地方从计划经济迈向市场经济

站长推荐: