【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. Shell脚本编程学习入门 01

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  2. 《实战Nginx》读书笔记--Nginx配置文件

    先看下一份的Nginx 的配置 #user nobody nobody;#使用的用户和组 worker_processes 4;#工作进程的个数,一般等于CPU核数或者总核数的两倍 #error_lo ...

  3. LINUX下printf输出字体的特效

    在学习LINUX网络编程的时候我们做了一个聊天系统,当时为了界面更漂亮点,于是在百度上搜索了下关于printf()函数的用法,和大家分享下:                           给pr ...

  4. The currently displayed page contains invalid values.

    1 错误描述 2 错误原因 3 解决办法

  5. freemarker定义一个连续的序列

    freemarker定义一个连续的序列 1.简易说明 定义一个连续的序列,并打印出序列中的元素 2.实现源码 <#--freemarker定义了一个连续的序列--> <#assign ...

  6. 如何高效的使用PowerShell备份数据库

    初始脚本 Get-SqlDatabase -ServerInstance localhost | Where { $_.Name -ne 'tempdb' } | Backup-SqlDatabase ...

  7. CF367 E - Working routine

    十字链表模拟 #include<bits/stdc++.h> using namespace std; int n,m,q; struct Node{ int v; int d,r; }m ...

  8. 更改Qt Application为 Qt Console Application

    工程属性 -> 链接器 -> 系统 -> 子系统 : 更改为 控制台 (/SUBSYSTEM:CONSOLE)

  9. Keras官方中文文档：Keras安装和配置指南(Windows)

    这里需要说明一下,笔者不建议在Windows环境下进行深度学习的研究,一方面是因为Windows所对应的框架搭建的依赖过多,社区设定不完全:另一方面,Linux系统下对显卡支持.内存释放以及存储空间调 ...

  10. SPOJ1825：Free tour II

    题意 luogu的翻译 给定一棵n个点的树,树上有m个黑点,求出一条路径,使得这条路径经过的黑点数小于等于k,且路径长度最大 Sol 点分治辣 如果是等于\(k\)的话,开个桶取\(max\)就好了 ...