Highlight.js 引入正确， js 与 css 均已起作用，但是高亮不亮，求教～

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3533 天前的主题，其中的信息可能已经有所发展或是发生改变。

测试浏览器

Chrome ，反正官方案例和其他用此方案的网站均正常显示。

文件结构：

Github （Highlite.js）下载之后只保留 src
文件夹，目测是网页必须的文件。内有

languages 文件夹
styles 文件夹
highlight.js 文件

##代码：##

代码我已经精简到可以放在官方做案例了……因为就是照抄下来加上必要结构而已。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="src/styles/default.css" rel="stylesheet">
    <script src="src/highlight.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <pre><code class="javascript">alert ("123");</code></pre>
</body>
</html>

运行结果：

个人猜测：

引入的 js 已起作用，因为添加了 hljs 的类；

引入的 css 已起作用，因为 hljs 的类有了相应的样式；

那么是 languages 内的文件没有调用成功？

如上图：没有报错，就是无法高亮，我换了各种语言尝试，结果一样

虚心求教：

实在没看出来自己不小心掉进了哪个坑里，求解救，谢谢～

第 1 条附言 · 2015-04-28 00:12:20 +08:00

虽然自己也觉得这个错误出的挺糗的，但是还是总结一下，免得后来人重蹈覆辙：

Github 找各种项目确实很方便，但是直接 clone 下来的代码用作生产环境未必靠谱，最好去相应的官方主页下载稳定版本。因为作者很可能和我一样，随手提交……

觉得自己笨死了……

HTML

script

hljs

11 条回复 • 2019-10-22 15:37:01 +08:00

alay9999

2015-04-27 23:23:22 +08:00

真的很费解，还望各位大神不吝赐教了……其实我真怕是错了个标点之类的小问题，那就糗大发了

lincanbin

2015-04-27 23:49:11 +08:00

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.bootcss.com/highlight.js/8.5/styles/default.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code class="javascript">function resizeLists() {
var
categories = $('#categories'),
styles = $('#styles');
categories.css('max-height', $(window).height() / 4);
categories.perfectScrollbar('update');
styles.height($(window).height() - styles.position().top - 20);
styles.perfectScrollbar('update');
}

function selectCategory(category) {
$('#languages div').each(function(i, div) {
div = $(div);
if (div.hasClass(category)) {
var code = div.find('code');
if (!code.hasClass('hljs')) {
hljs.highlightBlock(code.get(0));
}
div.show();
} else {
div.hide();
}
});

$(document).scrollTop(0);
}

function categoryKey(c) {
return c === 'common' ? '' : c === 'misc' ? 'z' : c === 'all' ? 'zz' : c;
}

function initCategories() {
var categories = {};
$('#languages div').each(function(i, div) {
if (!div.className) {
div.className += 'misc';
}
div.className += ' all';
div.className.split(' ').forEach(function(c) {
categories[c] = (categories[c] || 0) + 1;
});
});
var ul = $('#categories');
var category_names = Object.keys(categories);
category_names.sort(function(a, b) {
a = categoryKey(a);
b = categoryKey(b);
return a < b ? -1 : a > b ? 1 : 0;
});
category_names.forEach(function(c) {
ul.append('<li data-category="' + c + '">' + c + ' (' + categories[c] +')</li>');
});
$('#categories li').click(function(e) {
$('#categories li').removeClass('current');
$(this).addClass('current');
selectCategory($(this).data('category'));
});
$('#categories li:first-child').click();
ul.perfectScrollbar();
}

function selectStyle(style) {
$('link[title]').each(function(i, link) {
link.disabled = (link.title != style);
});
}

function initStyles() {
var ul = $('#styles');
$('link[title]').each(function(i, link) {
ul.append('<li>' + link.title + '</li>');
});
$('#styles li').click(function(e) {
$('#styles li').removeClass('current');
$(this).addClass('current');
selectStyle($(this).text());
});
$('#styles li:first-child').click();
ul.perfectScrollbar();
}

$(document).ready(function() {
initCategories();
initStyles();
$(window).resize(resizeLists);
resizeLists();
});</code></pre>
</body>
</html>

实测能亮啊……

caomu

2015-04-27 23:50:33 +08:00

唔。。。我还是觉得你可以先直接在 https://highlightjs.org/download/ 用cdn的或者从下载zip，然后再按 https://highlightjs.org/usage/ 的再来一遍。。。

alay9999

2015-04-27 23:58:38 +08:00

@lincanbin 我就把那两个文件改到本地地址就不亮了，看来我应该换换文件，喵的，坑了我几乎一天

alay9999

2015-04-27 23:59:12 +08:00

@caomu 感觉被 Github 上的代码坑了

alay9999

2015-04-28 00:06:14 +08:00

@lincanbin
@caomu
真心气哭了，就是在 Github 下载的代码的问题……谢谢二位～～～

xiaoz

2016-11-17 15:00:10 +08:00

我最近从官网下载的 9.8.0 版本和你同样的问题，请问您最后怎样解决的呢？

alay9999

2016-11-17 16:50:32 +08:00

@xiaoz 我当时官网下载就解决了，因为开始的时候是在 Github 下载的……

xiaoz

2016-11-18 12:02:47 +08:00

@alay9999 我也是官网下载的 zip 压缩包依然有这个问题，原因就是 Highlight.js 无法处理尖括号，因此插入 HTML 的时候就有问题，能把你的 Highlight.js 文件分享一下吗？

alay9999

2016-11-18 12:06:41 +08:00

@xiaoz 我都记不清我用在哪个项目中了[笑哭]

leosin

2019-10-22 15:37:01 +08:00

特意注册账号回复你们，因为这个实在太坑了。。在高亮 html 代码的时候需要像下面这样写。亲测有效。
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
function $init() {return true;}
</script>

<body>
<p checked class="title" id='title'>Title</p>

</body>