SyntaxHighlighter是一个使用JavaScript编写的支持多种编程语言语法高亮的JS插件,很多大型网站或博客都在使用。

SyntaxHighlighter插件默认是每种编程语言加载对应JS语言库,那么如何实现SyntaxHighlighter自动加载不同语言的JS语言库

SyntaxHighlighter官方已经给出了解决方案 shAutoloader.js 自动加载库;

在HTML文件中引用SyntaxHighlighter核心运行库

Hello SyntaxHighlighter

shCore.js     SyntaxHighlighter插件的核心运行库

shAutoloader.js   自动加载运行库要实现自动加载必须引入此文件

shCore.css     核心CSS样式

shCoreDefault.css  主题CSS样式

以上四个文件必须引用到文档中

需要高亮显示的代码请入在

代码如下:

Hello SyntaxHighlighter

Hello SyntaxHighlighter

function helloSyntaxHighlighter()

{

return "hi!";

}

 中的 class="brush: js;"是根据显示代码语言而定

下面是实现SyntaxHighlighter自动加载的主要代码

function path(){

var args = arguments,

result = [];

for(var i = 0; i < args.length; i++)

result.push(args[i].replace('@', '/pub/sh/current/scripts/'));//请替换成自己项目中SyntaxHighlighter的具体路径

return result

};

SyntaxHighlighter.autoloader.apply(null, path(

'applescript@shBrushAppleScript.js',

'actionscript3 as3@shBrushAS3.js',

'bash shell@shBrushBash.js',

'coldfusion cf@shBrushColdFusion.js',

'cpp c@shBrushCpp.js',

'c# c-sharp csharp@shBrushCSharp.js',

'css@shBrushCss.js',

'delphi pascal@shBrushDelphi.js',

'diff patch pas@shBrushDiff.js',

'erl erlang@shBrushErlang.js',

'groovy@shBrushGroovy.js',

'java@shBrushJava.js',

'jfx javafx@shBrushJavaFX.js',

'js jscript javascript@shBrushJScript.js',

'perl pl@shBrushPerl.js',

'php@shBrushPhp.js',

'text plain@shBrushPlain.js',

'py python@shBrushPython.js',

'ruby rails ror rb@shBrushRuby.js',

'sass scss@shBrushSass.js',

'scala@shBrushScala.js',

'sql@shBrushSql.js',

'vb vbnet@shBrushVb.js',

'xml xhtml xslt html@shBrushXml.js'

));

SyntaxHighlighter.all();

以上就是实现SyntaxHighlighter自动识别语言并自动载语言库的代码,需要的同学可以测试下;

html自动识别语言,SyntaxHighlighter自动识别并加载脚本语言相关推荐

  1. go语言 不支持动态加载_动态语言支持

    go语言 不支持动态加载 本文是我们名为" 高级Java "的学院课程的一部分. 本课程旨在帮助您最有效地使用Java. 它讨论了高级主题,包括对象创建,并发,序列化,反射等. 它 ...

  2. tinymce加载自定义语言包

    对tinymce自带的语言包不满意,重新修改语言包后通过language_url来加载自定义语言包.但是不管怎么修改language_url都没有生效,最后发现自定义的语言代码不能和既有的语言代码重复 ...

  3. HuggingFace Datasets来写一个数据加载脚本

    HuggingFace Datasets上传本地文件作为训练数据 这两天用自己的数据来做训练,看到datasets库中的教程,进行翻译,记下如何使用本地/私有数据集. 文章目录 HuggingFace ...

  4. JS动态加载脚本及对动态脚本内方法的调用

    JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...

  5. javascript精要(3)-动态加载脚本

    1.除了<script>标签,还可通过DOM API加载脚本 2.例: let script=document.createElement('script'); script.src='e ...

  6. 十九、动态加载脚本和样式

    十九.动态加载脚本和样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   1.元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM的方法:getBo ...

  7. 无法从Windows上的资产index.android.bundle加载脚本

    本文翻译自:Unable to load script from assets index.android.bundle on windows I'm trying to run my first R ...

  8. Exception】Chrome浏览器提示:此网页正试图从未经验证的来源加载脚本

    [Exception]Chrome浏览器提示:此网页正试图从未经验证的来源加载脚本 一.问题描述 1.公司网站配置了https证书后,使用Chrome浏览器访问某个页面,出现JS没有执行情况,浏览器右 ...

  9. 【电商数仓】数仓搭建之明细数据(data warehouse detail -- DWD)层(用户行为数据之曝光、错误日志表、数据加载脚本,业务数据之评价、订单事实表)

    文章目录 一 曝光日志表 1 思路解析 2 建表语句 3 数据导入 4 查看数据 二 错误日志表 1 思路解析 2 建表语句 3 数据导入 4 查看数据 三 DWD层用户行为数据加载脚本 四 DWD层 ...

最新文章

  1. 【一周热门软件更新】我一口气发布六个版本更新,还有谁?
  2. bfs——练习demo2(20届周新杰提供)
  3. IDEA手动导入jar包
  4. js Math用法jquery是否为空对象判断
  5. .NET HttpClient的缺陷和文档错误让开发人员倍感沮丧
  6. TensorFlow4-常量和变量及TensorBoard使用
  7. 信息学奥赛一本通(1215:迷宫)
  8. 好轮子收藏:一个支持几乎所有流行格式的图像加载库stb_image.h
  9. 使用Anaconda进行环境和包的管理
  10. cocos2dx 圆盘抽奖_【cocos2dx 3.3 lua】06 抽奖转盘效果
  11. 二阶等差数列的性质及应用
  12. 如何在本机安装mysql_机器人之如何在本机安装MySQL,并配置电脑为数据库服务器...
  13. mysql常用监控脚本命令列表
  14. 如何设置二进制某一位的值_mysql参数设置--max_allowed_packet 值如何调整?
  15. 长尾关键词生成工具-长尾关键词生成软件免费-关键词组合工具
  16. 图像校色 白平衡调整
  17. GEE开发之Sentinel-2计算NDVI和数据分析
  18. mavlink协议从入门到放弃(二)
  19. 【七夕送好书】转微博获赠书!
  20. mysql 1067_mysql启动错误1067进程意外终止的解决方法

热门文章

  1. xp 系统安装 Microsoft .NET Framework v4.0 问题
  2. 20160301.CCPP体系详解(0040天)
  3. 怀孕女子缺钱拒绝进医院 在街头生下双胞胎女儿
  4. 前端基础知识体系之专业知识篇
  5. 中型企业VDI实现方案
  6. 【转】给在读研究生+未来要读研同学们的一封信
  7. 动态统计每个日期过去30天的数据
  8. mybatis choose用法
  9. 10. 100ASK_V853-PRO开发板支持录音和播放音频
  10. 【代码改错】关于你的欢迎语 蓝桥云课楼赛第31期(Web 前端挑战)