highlight.js 代码高亮插件

时间:2022-05-15 23:46:30

官网:https://highlightjs.org/

API:http://highlightjs.readthedocs.org/en/latest/api.html

1. 简单使用:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

默认高亮<pre><code></code></pre>块包裹的代码,initHighlightingOnLoad是在页面加载时执行。

2. 定制

$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});

自定义高亮<pre><code></code></pre>块包裹的代码。

3. 自动高亮代码

hljs.highlightAuto(code).value;

code为代码字符串,不能包含 html 代码,执行返回值为高亮 html 代码。

4. 手动高亮

hljs.initHighlighting.called = false;
hljs.initHighlighting();

如果我们不想页面加载后代码高亮,而是 ajax 读取 html 代码后,对此进行高亮,需要执行上面的代码。

参考资料:http://www.mojidong.com/html/css/js/2013/04/03/code-highlight/

highlight.js 代码高亮插件的更多相关文章

  1. highlight&period;js 代码高亮插件的使用

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...

  2. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  3. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  4. &lbrack;转&rsqb;7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  5. 九款常用的JS代码高亮工具

    代码高亮很重要,特别是当我们想要在网站或博客中展示我们的代码的时候.通过在网站或博客中启用代码高亮,读者更方便的读取代码块. 有很多免费而且有用的代码高亮脚本.这些脚本大部分由Javascripts编 ...

  6. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  7. 代码高亮插件Codemirror使用方法及下载

    代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载   2013-10-31 16:51:29|  分类: 默认分类 |   ...

  8. MarkdownPad2代码高亮插件兼容移动端样式

    如果不知道MarkdownPad2使用代码高亮插件可以查看前一篇文章<MarkdownPad2使用代码高亮插件> 先看移动端效果图: 移动端点击查看效果 或者手机扫如下二维码: 我们经常阅 ...

  9. google code-prettify 代码高亮插件使用方法

    找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置 ...

随机推荐

  1. Jena Fuseki 101

    前言 正如其承诺的那样 Expose your triples as a SPARQL end-point accessible over HTTP. Fuseki provides REST-sty ...

  2. oracle12 pl&sol;sql

    pl/sql块介绍 介绍   块(block)是pl/sql的基本程序单元,编写pl/sql程序实际上就是编写pl/sql块,要完成相对简单的应用功能,可能只需要编写一个pl/sql块,但是如果想要实 ...

  3. Javascript 中的非空判断 undefined&comma;null&comma; NaN的区别

    JS 数据类型 在介绍这三个之间的差别之前, 先来看一下JS  的数据类型. 在 Java ,C这样的语言中, 使用一个变量之前,需要先定义这个变量并指定它的数据类型,是整型,字符串型,.... 但是 ...

  4. Android之Http沟通——4&period;Android HTTP索取信息&colon;HttpClient

    本节介绍: 他谈到了部分HttpURLConnection.本节HttpClient该,Apache为我们提供HttpClient(简单的Http客户端),只是毕竟不是亲儿子.HttpClient在A ...

  5. JAVA 命令行参数解析,org&period;apache&period;commons&period;cli的使用

    maven依赖引入 <dependency> <groupId>commons-cli</groupId> <artifactId>commons-cl ...

  6. 关于DCL的使用

    DCL1 创建用户语法:CREATE USER 用户名@地址 IDENTIFIED BY '密码';CREATE USER user1@localhost IDENTIFIED BY '123'; C ...

  7. Linux网络协议栈&lpar;一&rpar;——Socket入门&lpar;2&rpar;

    转自: http://www.cnblogs.com/hustcat/archive/2009/09/17/1568765.html 3.套接字的实现套接字最先是在UNIX的BSD版本实现的,所以也叫 ...

  8. 如何将Spring Boot项目打包部署到外部Tomcat

    1.项目打包     项目开发结束后,需要打包部署到外部服务器的Tomcat上,主要有几种方式. (1)生成jar包 cd 项目跟目录(和pom.xml同级)mvn clean package## 或 ...

  9. js-数组中查找特定元素并返回所有该元素的索引

    //在数组中查找所有出现的x,并返回一个包含匹配索引的数组 function findall(a,x){ var results=[], len=a.length, pos=0; while(pos& ...

  10. Extjs6&period;2&period;0搭建项目框架

    1.安装 首先你总要去官网下载ext-6.2.0-gpl.zip和安装Sencha CMD工具来管理ExtJs项目,ext-6.2.0-gpl.zip下载完成解压先放在一边,一会用到. Sencha ...