【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. Android 热补丁实践之路

    最新github上开源了很多热补丁动态修复框架,主要的大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa h ...

  2. freemarker报错之十二

    1.错误描述 六月 04, 2014 10:31:47 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  3. Error Code: 1630. FUNCTION rand.string does not exist

    1.错误描述 13:50:13 call new_procedure Error Code: 1630. FUNCTION rand.string does not exist. Check the ...

  4. unix时间戳转换成标准时间(c#)

    //---unix时间戳转换成标准时间(c#)---//     /*     string timeStamp = "1144821796";     DateTime dtSt ...

  5. asp.net mvc razor布局页中a标签的href的跳转问题

    笔者做了一个文件上传系统,文件上传后,保存在wwwroot目录的file文件夹中,并把该文件的路径保存到数据库中, 如这样的一个路径保存在数据库: file/b775f487-0127-41e0-9d ...

  6. java创建自定义类的数组

    今天在学图论的最小生成树,开始一直在想是用邻接矩阵还是关联矩阵来表示图,但是发现这样都会有好多空间浪费.于是我就自定义一个边的类,里面包含了权值,关联的端点1,端点2,和图的表示字母.发现我想创建11 ...

  7. AI CV 会议2018

    (1) NIPS,  Conference and Workshop on Neural Information Processing Systems, A类顶会 1987年由联结主义学派创建,每年一 ...

  8. P2500 - 【DP合集】背包 bound

    题面 Description N 种物品,第 i 种物品有 s i 个,单个重量为 w i ,单个价值为 v i .现有一个限重为 W 的背包,求能容 纳的物品的最大总价值. Input 输入第一行二 ...

  9. CTSC 选课

    题面(有删减) 题目描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修了这M门 ...

  10. （2）Deep Learning之线性单元和梯度下降

    往期回顾 在上一篇文章中,我们已经学会了编写一个简单的感知器,并用它来实现一个线性分类器.你应该还记得用来训练感知器的『感知器规则』.然而,我们并没有关心这个规则是怎么得到的.本文通过介绍另外一种『感 ...