展开菜单
首页 精品内容 本月促销 装机必备 Windows PDF教程 macOS软件 IOS软件 Android AI 专题
全部分类

当前位置:

首页 > 编程开发 > SyntaxHighlighter Autoloader(自动加载)最优方式

SyntaxHighlighter Autoloader(自动加载)最优方式

SyntaxHighlighter是代码高亮工具,支持多种语言。一次性加载全部语言配置文件影响效率,官方提供shAutoloader.js实现按需加载。通过path函数和autoloader配置,可灵活使用pre或textarea标签展示代码。进一步优化:后端或前端判断页面是否存在代码块,再决定是否加载脚本,实现按需加载。

本文目录

    一、SyntaxHighlighter介绍

    代码高亮这事儿,说大不大,说小不小。SyntaxHighlighter 算是一代经典了,专门用来在网页上给代码上色,支持的语言范围相当广——HTML、CSS、Ja vaScript 这些前端基础语种自不必说,C、Ja va 这些后端编程语言也在射程之内。你随便翻翻现在网上很多技术文章里那些带颜色的代码块,背后可能跑的就是它。具体来说,它能加亮的语言包括:C#、CSS、C++、Delphi、Ja va、Ja vaScript、PHP、Python、Ruby、SQL、Visual Basic、XML/HTML……基本上主流语言都覆盖了。

    不过话说回来,这工具好用是好用,但有个实际的问题:不同文章里出现的代码语言往往各不相同。如果为了兼容所有情况,一次把全部语言的配置文件都加载进来,页面加载的东西可就太多了。所以,SyntaxHighlighter 官方提供了一个 shAutoloader.js 脚本,专门用来按需加载——这才是真正的高效之道。

    二、使用教程

    先说第一步,把下载下来的 SyntaxHighlighter 文件解压,然后只保留 Scripts 和 styles 这两个文件夹,其他杂七杂八的可以扔掉。

    SyntaxHighlighter Autoloader(自动加载)最优方式

    接着是引入样式文件和脚本。在页面的 之间,把 CSS 放进来:

    然后在 结束标签的前面,引入 Ja vaScript 文件——这里就有讲究了,既要 shCore.js,也要 shAutoloader.js:

    
    
    

    这段脚本里,核心是那个 path() 函数和后面的 autoloader 调用。path 函数的作用说白了就是个路径拼接器——把你传入的语言别名替换成真实脚本地址。autoloader 则负责按需加载,什么语言出现在页面上,就加载对应的 Brush 文件。下面那一堆 defaults 配置项也很关键:gutter 控制是否显示行号,toolbar 决定是否显示工具栏,auto-links 和 quick-code 则分别控制自动链接和代码快速复制功能,根据需求开关就行。

    三、使用方法

    配置好了,怎么用?有两种主流方式。

    方式一:用 pre 标签

    //这里是你需要高亮的代码
    
    //python代码
    

    前者是经典写法,直接通过 class 指定语言;后者则是套了一个容器 div,方便统一控制样式。

    方式二:用 textarea 标签

    textarea 的好处是不会额外处理里面的特殊字符,对于包含大量<、>、&等符号的代码片段来说,更不容易出问题。

    四、高级技巧:按需加载

    但现实情况是,文章详情页并不总是有代码块。很多页面可能就是纯文字,如果关了 JS 还去加载一堆高亮脚本,那就是浪费带宽了。所以更好的做法是加一个判断:只有当页面上确实存在代码块时,才去加载这些 JS 文件和执行初始化。

    如果你用的是类似 ASP.NET MVC 的 Model 框架,可以在视图里这样写:

    var isCode = Model.Html.ToString().Contains("

    没有框架的话,用 jQuery 判断也完全可以:

    if($('div.jb51code').length > 0){
        // 这里放置上面的js文件链接以及js代码。
    }

    第一种方法是后端判断,在生成页面 HTML 的时候就决定要不要引脚本;第二种是前端判断,页面加载完去检查 DOM 里有没有代码块元素。两种各有适用场景,看你的项目结构选就行。这才是真正做到了“按需加载”,不浪费一丝一毫的资源。

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    编程开发
    相关文章 更多
    精品专题 更多
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    PDF教程

    正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

    macOS软件

    正软商城macOS软件专区,精选适用于Mac电脑的办公、设计、影音、效率、开发和系统工具,提供软件功能介绍、macOS兼容版本、正版授权及购买下载服务。

    IOS软件

    正软商城iOS软件专区,精选适用于iPhone和iPad的办公、学习、影音、设计、效率及AI应用,提供功能介绍、适用设备、系统要求和正版获取方式等信息。

    AI

    正软商城AI软件专区,汇集AI写作、AI绘画、AI视频、AI办公、AI编程、AI翻译、智能客服和数据分析等人工智能工具,提供功能介绍、适用平台、收费方式及正版购买信息。

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    立刻MV 网页版
    立刻MV 网页版

    立刻MV 面向音乐人、内容创作者和品牌团队,帮助用户低成本完成歌曲 MV、歌词视频、AI 分镜、图生视频与最终合成。

    蛙蛙写作 网页版
    蛙蛙写作 网页版

    蛙蛙写作 AI 创作工具,覆盖小说、剧本、文案,一键生成文稿,打通文字转视频全流程,高效解决创作难题。

    超级简历WonderCV 网页版
    超级简历WonderCV 网页版

    超级简历WonderCV是面向应届生和AI小白的智能求职平台,覆盖简历、面试与职业规划。

    音述AI 网页版
    音述AI 网页版

    音述AI,是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区。

    AionClaw macOS版
    AionClaw macOS版

    AionClaw 是可在桌面端运行的任务型 AI 助手,通过数字专家与技能市场组合办公、创作、数据和开发能力。

    Loomy macOS版
    Loomy macOS版

    Loomy 是科大讯飞推出的桌面 AI 助手,可通过对话、任务与工作目录协助处理办公、内容创作和资料整理。

    AirBuddy 3 macOS版
    AirBuddy 3 macOS版

    AirBuddy 3 是面向 macOS 的蓝牙外设增强工具,可集中查看 AirPods、Beats 与苹果设备电量,提供快速连接、播放控制、电量提醒、桌面小组件和多台 Mac 外设接力等功能。

    AirServer macOS版
    AirServer macOS版

    AirServer macOS版可把 Mac 转换为无线投屏接收端,通过 AirPlay 或 Google Cast 接收手机、平板和电脑画面,并支持多设备同时连接、高清镜像及会话录制,适合家庭娱乐、课堂教学、会议演示和应用展示。

    AnyDesk macOS版
    AnyDesk macOS版

    AnyDesk macOS版是一款适用于远程办公、设备维护和客户支持的远程桌面工具,可连接并操作异地计算机,支持文件传输、无人值守访问、会话权限控制及跨平台协作。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。

    讯飞绘文 网页版
    讯飞绘文 网页版

    讯飞绘文网页版是科大讯飞推出的AI图文创作与内容运营工具,覆盖热点选题、文章生成、稿件校对、智能配图、排版发布和数据复盘等环节,适合自媒体创作者及内容团队在线使用。

    Maya(Autodesk Maya) Windows版
    Maya(Autodesk Maya) Windows版

    Autodesk Maya 是面向影视、电视、动画和游戏行业的专业三维制作软件,集多边形与 NURBS 建模、角色绑定、关键帧和动作捕捉动画、Bifrost 特效模拟、材质开发及 Arnold 渲染于一体,

    Aperty Windows版
    Aperty Windows版

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    立刻MV 网页版
    立刻MV 网页版

    立刻MV 面向音乐人、内容创作者和品牌团队,帮助用户低成本完成歌曲 MV、歌词视频、AI 分镜、图生视频与最终合成。

    蛙蛙写作 网页版
    蛙蛙写作 网页版

    蛙蛙写作 AI 创作工具,覆盖小说、剧本、文案,一键生成文稿,打通文字转视频全流程,高效解决创作难题。

    超级简历WonderCV 网页版
    超级简历WonderCV 网页版

    超级简历WonderCV是面向应届生和AI小白的智能求职平台,覆盖简历、面试与职业规划。

    音述AI 网页版
    音述AI 网页版

    音述AI,是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区。

    AionClaw Windows版
    AionClaw Windows版

    AionClaw 是可在桌面端运行的任务型 AI 助手,通过数字专家与技能市场组合办公、创作、数据和开发能力。

    Loomy Windows版
    Loomy Windows版

    Loomy 是科大讯飞推出的桌面 AI 助手,可通过对话、任务与工作目录协助处理办公、内容创作和资料整理。