首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
V2EX  ›  问与答

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

  •  
  •   alay9999 · 2015-04-27 22:58:27 +08:00 · 6128 次点击
    这是一个创建于 1635 天前的主题,其中的信息可能已经有所发展或是发生改变。

    测试浏览器

    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 下来的代码用作生产环境未必靠谱,最好去相应的官方主页下载稳定版本。因为作者很可能和我一样,随手提交……

    觉得自己笨死了……
    10 回复  |  直到 2016-11-18 12:06:41 +08:00
        1
    alay9999   2015-04-27 23:23:22 +08:00
    真的很费解,还望各位大神不吝赐教了……其实我真怕是错了个标点之类的小问题,那就糗大发了
        2
    lincanbin   2015-04-27 23:49:11 +08:00   ♥ 1
    <!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>


    实测能亮啊……
        3
    caomu   2015-04-27 23:50:33 +08:00   ♥ 1
    唔。。。我还是觉得你可以先直接在 https://highlightjs.org/download/ 用cdn的或者从下载zip,然后再按 https://highlightjs.org/usage/ 的再来一遍。。。
        4
    alay9999   2015-04-27 23:58:38 +08:00
    @lincanbin 我就把那两个文件改到本地地址就不亮了,看来我应该换换文件,喵的,坑了我几乎一天
        5
    alay9999   2015-04-27 23:59:12 +08:00
    @caomu 感觉被 Github 上的代码坑了
        6
    alay9999   2015-04-28 00:06:14 +08:00
    @lincanbin
    @caomu
    真心气哭了,就是在 Github 下载的代码的问题……谢谢二位~~~
        7
    xiaoz   2016-11-17 15:00:10 +08:00
    我最近从官网下载的 9.8.0 版本和你同样的问题,请问您最后怎样解决的呢?
        8
    alay9999   2016-11-17 16:50:32 +08:00
    @xiaoz 我当时官网下载就解决了,因为开始的时候是在 Github 下载的……
        9
    xiaoz   2016-11-18 12:02:47 +08:00
    @alay9999 我也是官网下载的 zip 压缩包依然有这个问题,原因就是 Highlight.js 无法处理尖括号,因此插入 HTML 的时候就有问题,能把你的 Highlight.js 文件分享一下吗?
        10
    alay9999   2016-11-18 12:06:41 +08:00
    @xiaoz 我都记不清我用在哪个项目中了[笑哭]
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2162 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 12:10 · PVG 20:10 · LAX 05:10 · JFK 08:10
    ♥ Do have faith in what you're doing.