【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. Bind、Apply、Call三者的区别

    1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...

  2. 【linux】安裝 PHP时出现error: Cannot find MySQL header files

    checking for specified location of the MySQL UNIX socket... no checking for MySQL UNIX socket locati ...

  3. EFI、UEFI、MBR、GPT的区别

    UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...

  4. Flex中TitleWindow传值

    Flex中TitleWindow传值 1.设计思路 (1)新建一个DataGrid,在其中最后一列加入三个按钮:新增.修改和删除: (2)点击新增按钮,可以将表格新增一行: (3)单击"修改 ...

  5. WebService之CXF注解报错（三）

    WebService之CXF注解 1.具体错误如下 五月 04, 2014 11:29:28 下午 org.apache.cxf.wsdl.service.factory.ReflectionServ ...

  6. Linux显示用户注册名

    Linux显示用户注册名 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ finger -s Login Name Tty Idle Login Time Of ...

  7. Django学习-15-Cookie

    Cookie             1.如果没有cookie,那么所有的网站都不能登录             2.客户端浏览器上的文件,keyvalues形式存储的,类似字典           ...

  8. luogu【P3387】【模板】缩点

    原题入口 PS:这个题数据是由Hany01大大出出来的 %%% 这个题显然是一道强联通+DAGdp的题 (题目背景有= =) 缩点的原因就是:不缩会一直在一个地方绕圈圈 而且不能进行后面的DAPdp ...

  9. luogu【P3377】 【模板】左偏树

    左偏树 顾名思义 向左偏的树 (原题入口) 它有啥子用呢??? 当然是进行堆的合并啦2333普通堆的合并其实是有点慢的(用优先队列的话 只能 一个pop 一个push 来操作 复杂度就是O(n log ...

  10. 第二章 js数据类型和变量

    一.驼峰命名法 第一个单词首字母大写,如果有多个单词的话其他的单词首字母大写. eg:nickName 二.prototype现象 新的命名规范. 常用的:以下划线为首字母(变量为对象的私有成员变量) ...