bootstrap中使用google prettify让代码高亮的方法

下面是关于「bootstrap中使用google prettify让代码高亮的方法」的详细攻略：

一、前置条件

已创建好基于bootstrap的网站；
已引入google prettify的js和css文件。

二、使用步骤

1. 在<head>中引入google prettify的样式文件

<head>
  ...
  <link rel="stylesheet" href="//cdn.jsdelivr.net/prettify/r298/prettify.min.css" />
  ...
</head>

2. 在<body>中引入google prettify的js文件

<body>
  ...
  <script src="//cdn.jsdelivr.net/prettify/r298/prettify.min.js"></script>
  ...
</body>

3. 给<pre>和<code>添加相应的class

要高亮代码块，需要保证<pre>和<code>都有相应的class。其中，<pre>标签的class必须为"prettyprint"，<code>标签的class必须为对应的语言代码，如"lang-html"、"lang-javascript"等。

例如，下面的代码块使用了语言为JavaScript的<code>标签：

<pre class="prettyprint">
  <code class="lang-javascript">
    // JavaScript代码
  </code>
</pre>

4. 高亮代码

在<pre>标签中添加相应的class后，需要在javascript中调用google prettify的prettyPrint函数，对这些代码进行高亮处理。

$(document).ready(function() {
  prettyPrint();
});

上面的代码需要放在</body>标签之前，确保在DOM加载完后再执行。

三、示例说明

下面，我们假设一个需求：在网站中加入一段HTML代码和一段CSS代码，并用google prettify进行高亮处理。

1. HTML代码高亮

可以按照上面的步骤进行操作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML代码高亮示例</title>
  <!-- 引入google prettify的样式文件 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/prettify/r298/prettify.min.css" />
</head>
<body>
  <!-- HTML代码 -->
  <pre class="prettyprint">
    <code class="lang-html">
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;My Web Page&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;p&gt;Welcome to my web page!&lt;/p&gt;
      &lt;/body&gt;
      &lt;/html&gt;
    </code>
  </pre>
  <!-- 引入google prettify的js文件 -->
  <script src="//cdn.jsdelivr.net/prettify/r298/prettify.min.js"></script>
  <script>
    $(document).ready(function() {
      prettyPrint();
    });
  </script>
</body>
</html>

2. CSS代码高亮

同样的，可以按照上面的步骤进行操作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS代码高亮示例</title>
  <!-- 引入google prettify的样式文件 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/prettify/r298/prettify.min.css" />
</head>
<body>
  <!-- CSS代码 -->
  <pre class="prettyprint">
    <code class="lang-css">
      body {
        background-color: #F0F0F0;
      }
      h1 {
        color: red;
        text-align: center;
      }
      p {
        font-family: "Times New Roman";
        font-size: 20px;
        text-align: justify;
      }
    </code>
  </pre>
  <!-- 引入google prettify的js文件 -->
  <script src="//cdn.jsdelivr.net/prettify/r298/prettify.min.js"></script>
  <script>
    $(document).ready(function() {
      prettyPrint();
    });
  </script>
</body>
</html>

以上就是关于「bootstrap中使用google prettify让代码高亮的方法」的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：bootstrap中使用google prettify让代码高亮的方法 - Python技术站