使用 highlight.js CDN

Question

我似乎无法让语法高亮显示与 highlight.js 一起使用。这是一个测试示例：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <title>Test Highlight</title>
  </head>
  
  <body>
    <pre>
        <code class="language-python">
          def f(x, y):
            return x + y
        </code>
    </pre>
  </body>
</html>

我包含了 CSS 和 JS CDN 并调用了 hljs.initHighlightingOnLoad()，但代码仍然完全以黑色文本显示：

我做错了什么？

Answer 1

您的 link 和脚本标记 URL 中有错字。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <title>Test Highlight</title>
  </head>
  
  <body>
    <pre>
        <code class="language-python">
          def f(x, y):
            return x + y
        </code>
    </pre>
  </body>
</html>

使用 highlight.js CDN

Using highlight.js CDN

html

syntax-highlighting

cdn

highlight.js