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>

 

效果:

BootStrap2学习日记6---代码_第1张图片

使用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>

 

 

效果:

BootStrap2学习日记6---代码_第2张图片

 

你可能感兴趣的:(bootstrap)