BootStrap2学习日记6---代码

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

&lt；表示“<”

&gt；表示“>”

在BootStrap中标记代码的标签使用<code>,标记代码块使用<pre>(里面的代码特殊标签必须转义)

下面我们看一个例子

代码：

<body>

<div class="container">

  <h1 class="page-header">代码</h1>

  <p>这是一个<code>&lt;h1&gt;</code>标签<code>int temp=0;</code></p>

  <pre ><code>&lt;dl class=&quot;dl-horizontal&quot;&gt;

  &lt;dt&gt;Mybatis&lt;/dt&gt;

  &lt;dd&gt;MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。&lt;/dd&gt;

  &lt;dt&gt;Spring&lt;/dt&gt;

  &lt;dd&gt;Spring是一个开源框架，Spring 是于2003 年兴起的一个轻量级的Java。&lt;/dd&gt;

  &lt;dt&gt;MVC&lt;/dt&gt;

  &lt;dd&gt;模型－视图－控制器一种软件设计模式。&lt;/dd&gt;

&lt;/dl&gt;</code></pre>

</div>

效果：

使用goole-prettify下载地址：https://code.google.com/p/google-code-prettify/downloads/detail?name=prettify-small-4-Mar-2013.tar.bz2&can=2&q=

使用：

1.下载后解压

2.在页面导入prettify.css，prettify.js

3.<pre class="prettyprint linenums"> 在pre中使用2个类第一个是渲染关键词颜色格式；第二个是给代码添加行号

4.最后在body标签中添加 onLoad="prettyPrint()"

代码：

<body onLoad="prettyPrint()">

<div class="container">

  <h1 class="page-header">代码</h1>

  <p>这是一个<code>&lt;h1&gt;</code>标签<code>int temp=0;</code></p>

  <pre class="prettyprint linenums"><code>&lt;dl class=&quot;dl-horizontal&quot;&gt;

  &lt;dt&gt;Mybatis&lt;/dt&gt;

  &lt;dd&gt;MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。&lt;/dd&gt;

  &lt;dt&gt;Spring&lt;/dt&gt;

  &lt;dd&gt;Spring是一个开源框架，Spring 是于2003 年兴起的一个轻量级的Java。&lt;/dd&gt;

  &lt;dt&gt;MVC&lt;/dt&gt;

  &lt;dd&gt;模型－视图－控制器一种软件设计模式。&lt;/dd&gt;

&lt;/dl&gt;</code></pre>

</div>

效果: