如何用 highlight.js 做一个简单的例子？答案

【问题标题】：How to make a simple example with highlight.js?如何用 highlight.js 做一个简单的例子？
【发布时间】：2016-07-11 07:10:40
【问题描述】：

我试图用 highlight.js 做一个简单的例子，但我无法让它工作。我不熟悉highlight.js。这是我的代码，我不知道其中有什么问题。任何想法！提前致谢。

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
$(document).ready(function() {
   $('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>
</head>
<body>
<div id="myBlock">
<pre><code class="php">
require_once 'Zend/Uri/Http.php';

abstract class URI extends BaseURI
{

  /**
   * Returns a URI
   *
   * @return  URI
   */
  static public function _factory($stats = array(), $uri = 'http')
  {
      $uri = explode(':', $uri, 2);
      $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
      $desc = 'Multi
line description';

      // Security check
      if (!ctype_alnum($scheme)) {
          throw new Zend_Uri_Exception('Illegal scheme');
      }

      return [
        'uri' => $uri,
        'value' => null,
      ];
  }
}
</code></pre>
</div>
</body>
</html>

【问题讨论】：

标签： syntax-highlighting highlight

【解决方案1】：

你需要稍微改变一下阅读 css 和 javascript 文件的方式：

css 文件：

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">

javascript 文件：

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>

是的，我知道，你使用的方式是on the original site，但他们在编写示例代码时似乎犯了一个错误。

【讨论】：

新版本：<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">