JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

本文实例讲述了JavaScript语法高亮库highlight.js用法。分享给大家供大家参考，具体如下：

highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，可以混合使用。

这款高亮库可以用在博客系统中，其使用方法及其简单，几乎不需要任何学习成本，下面介绍highlight.js的使用。

1.获取highlight.js库，用户可以从官网获取：

地址：https://highlightjs.org/download/

highlight.js库支持在线定制，按照默认的选择点击Download即可：

或者点击此处本站下载。

2.下载后解压，文件结构如下：

styles目录下为所有css样式，highlight.pack.js为库文件。

3.在html页面中引入default.css和highlight.pack.js，代码如下：

<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>

4.加载highlight.js库，代码如下：

<script>
 hljs.initHighlightingOnLoad();
</script>

5.在<pre>和<code>标签中添加要高亮显示的代码：

<pre>
<code class="php">
<?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到我们";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出：欢迎"PHP大神"来到我们
?>
</code>
</pre>

class属性指定语言类别，上面代码中指定为php语言。

完整代码如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>HighLightjs</title>
 <link rel="stylesheet" href="highlight/styles/default.css">
 <script src="highlight/highlight.pack.js"></script>
<body>
<script>
 hljs.initHighlightingOnLoad();
</script>
<pre>
<code class="php">
<?php
//使用substr_replace函数进行字符串插入操作demo
$str="欢迎来到我们";
echo substr_replace($str,"\"PHP大神\"",4,0);
//输出：欢迎"PHP大神"来到我们
?>
</code>
</pre>
</body>
</html>

预览效果如下图：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js使用highlight.js高亮你的代码

    js使用highlight.js高亮你的代码

    在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉. 开始了正式的捣鼓. 在捣鼓之前去别的网站看了看.这里贴上简书的效果: 其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去.于是去看了看document,发现是这样的: <pre class="hljs javascript">

  • JS库之Highlight.js的用法详解

    JS库之Highlight.js的用法详解

    官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

  • JS库 Highlightjs 添加代码行号的实现代码

    Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式. 然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能. 参考博文链接: syntax-highlighting-with-highlightjs Javascript代码: //numbering for pre>code blocks $(function(){ $('pr

  • 9个javascript语法高亮插件 推荐

    9个javascript语法高亮插件 推荐

    下面介绍的是一些纯javascript实现的语法高亮插件. 英文原文:http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ 1. SyntaxHighlighter我相信这个插件是我们使用多的,它支持超多的语言,如果遇到不支持的语法还支持自定义. 2. SHJSSHJS 是js语法高亮插件的代表,它支持很多编程语言,兼容Firefox 2 &3, IE 6 & 7, Opera 9.6,

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • Vue.js用法详解

    Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

  • JavaScript封装的常用工具类库bee.js用法详解【经典类库】

    本文实例讲述了JavaScript封装的常用工具类库bee.js.分享给大家供大家参考,具体如下: bee.js下载地址: github下载地址:https://github.com/shadowOfCode/bee.js 或点击此处本站下载. 使用: <!--area.js存放区域编码的一个常量.由于bee.js里面的getPersonInfo18()方法需要调用这个常量,所以在bee.js之前引入.如果不需要用到这个方法也可以不引入area.js--> <script type=&q

  • jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <lin

  • JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】

    本文实例讲述了JS图片延迟加载插件LazyImgv1.0用法.分享给大家供大家参考,具体如下: 注:LazyImg 必须定义lazy-data属性,属性值是src的图片路径 引入JS文件: <script type="text/javascript" src="js/lazyImg.v1.0.js"></script> 默认情况下: 在IMG中满足以任何一个条件,都会加载图片: 1.没有class属性 2.如果有class属性并且属性中不包含

  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

  • vscode不支持nvue语法高亮的解决办法(图文详解)

    目录 项目场景: 问题描述 原因分析: 解决方案: 配置如图 解决效果 项目场景: 项目场景:用vscode开发uniapp会遇到用.nvue开发的时候.但是vscode并没有提供.nvue的语法高亮,这篇文章给刚用vscode写.nvue的读者 问题描述 例如:vscode中使用*.nvue识别不出文件类型,没有语法高亮如图: 原因分析: 我这里用的插件是vue3语法支持的Volar,网上铺天盖地的vetur解决方案,其实只要vscode配置一下就行 解决方案: 配置如图 解决效果 到此这篇关

  • Python基本语法之运算符功能与用法详解

    本文实例讲述了Python基本语法之运算符功能与用法.分享给大家供大家参考,具体如下: 前言 在前面的博文介绍了Python的数据结构之后,接下来结合Python操作符来对Python程序中的数据进行处理.操作符/运算符的使用,可简洁地表示内建类型的对象处理.主要是对程序中的数据进行逻辑操作.算术操作.比较操作等动作行为,本质是将在程序中会非常常用的程序操作封装成成类或函数后,再以字符的形式调用,使执行程序语言更加简洁和符合国际化. 软件环境 操作系统 UbuntuKylin 14.04 软件

随机推荐