【highlight.js】

　　很多博客都支持页面插入各种语言的代码，而这些代码肯定是有高亮设置的。那么在我们自己的页面上如何进行代码高亮设置？有现成的这个highlight.js插件我们可以使用。

　　highlight.js的官网是【https://highlightjs.org/】可以去上面下载插件。如果习惯用cdn可以百度一下怎么用cdn的方法来引用相关文件，我这里就把这个包下载到本地来了。

■　　简单用法

　　简单的用法我们主要用到了highlight/highligh.pack.js这个js文件和highlight/styles/default.css这个CSS文件。另外复习一下基本的HTML知识的话，我们可以知道在一个HTML界面上插入计算机代码可以用<code>这个标签。不过这个标签仅仅是做了一些front和background的颜色上的设置。如果想让代码看着像代码而不是文本的话那么可以在code外面再套上一层<pre>标签。

　　基于这样一种构想，我们构造出一个简单的java代码的高亮显示：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="highlight/highlight.pack.js"></script>

</head>

<body>

    <pre>

        <code class="java">

public class Test{

    public static void main(String args[]){

        System.out.println("Hello,World");

    }

}

        </code>

    </pre>

    <script>

        hljs.initHighlightingOnLoad();

    </script>

</body>

</html>

　　得到的效果是：

　　可以看到，在页面html中构建完相关的pre和code标签之后，还要在后面用js进行hljs.initHighlightOnLoad()这个操作才能使样式生效。另外别忘了pre的定义，pre里面的code一定要顶着行头写才能在显示的时候不会在前面空出一大截来。

　　具体代码块按照哪种语言的格式进行高亮在code的class中决定。这里用class="java"来提示这个代码块是java代码，另外还支持html,xml,python,c++等等一众常见的格式。更多格式也可以到官网上看文档。

　　●  动态生成的代码块怎么办

　　顾名思义，上面这个initHighlightOnLoad是在页面进行加载的时候运行才有效，如果是动态地在页面上加入一些新的代码块的话，那就很僵硬了，即便是在每次添加新内容之后马上执行一下这个函数也未必管用。（经试验，如果这个函数的作用有点像检测页面上所有需要highlight的code，记住他们的class，然后往页面的CSS中增加相应语言的高亮的CSS固化下来，所以如果页面之前有java为class的代码块然后再添加java代码块是可以做到仍然具有高亮，但是添加python为class的代码块就会不行了）。

　　解决的办法是用其他方法来使得高亮生效。一个常见的办法是把下面这段代码加在插入“新代码块”的代码后面：

$('pre code').each(function(i,block){

    hljs.highlightBlock(block);

});

　　each的参数函数中其实可以接受两个参数，第一个i是遍历的下标，第二个block则是遍历到的那个JQuery对象的html代码（也就是jQuery对象的[0]的值）。

　　●  其他CSS

　　默认的代码高亮CSS有点丑，本来想自己去修改CSS，但是进到styles里面一看发现里面全是CSS，随便选一个都比default.css要好看些。自由选择即可！

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

  1. highlight.js 页面 代码高亮

    官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...

  2. Ghost本地安装highlight.js使代码高亮

    对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...

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

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

  4. [转]7个高性能JavaScript代码高亮插件

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

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

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

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

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

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

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

  8. Word中使用代码高亮插件

    Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...

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

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

随机推荐

  1. ORACLE NLS_DATE_FORMAT设置

      最近在ORACLE里面设置NLS_DATE_FORMAT日期时间格式时遇到了一些问题,顺便整理一下.以防以后忘记时,能顺速翻阅. 1:在会话级别设置nls_date_format对应的日期格式. ...

  2. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  3. 【php】strtr与str_replace的区别

    strtr(string,from,to): 逐个字符开始替换,以from跟to中长度较较短的一个为准,例如: strtr("aidenliu","ai",&q ...

  4. 程序bug致损失400亿，判程序员坐牢？ 搞笑我们是认真的

    号外!号外!走过,路过,不要错过!日本 IT 业的狗血八卦继续独家放送啦!! 2015 年 9 月 3 日,随着东京最高法院驳回瑞穗证券的上诉,维持二审的原判结果,一个长达 10 年的诉讼终于画下了句 ...

  5. 基于stm32的can总线彻底研究

    1.CAN总线的初始化 void can_init(void){      CAN_InitTypeDef        CAN_InitStructure;      CAN_FilterInitT ...

  6. Windows7 64位安装最新版本MySQL服务器

    Windows7 64位安装最新版本MySQL服务器 近期,一直在研究MySQL数据库,经常修改配置文件,导致MySQL数据库无法使用,不得不反复重装MySQL数据库.以下是在Windows7 64位 ...

  7. 双硬盘RAID 0全攻略

    . RAID53 RAID7即高效数据传送磁盘结构,是RAID3和带区结构的统一,因此它速度比较快,也有容错功能.但价格十分高,不易于实现. 为什么需要磁盘阵列        如何增加磁盘的存取(ac ...

  8. Linux显示所有可更新的软件清单命令

    Linux显示所有可更新的软件清单命令 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ yum check-update 程序"yum"尚未 ...

  9. CF374 Maxim and Array

    贪心 如果有0先变成非0 如果负数的个数 应该变为偶数 之后就是每次将绝对值最小的值加K #include<bits/stdc++.h> using namespace std; cons ...

  10. Visio如何调整锁定图像大小

    在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况. ...