highlightjs 详解
起源：
最近想做一个代码高亮的功能、发现开源社区已经有了这类的项目、比如说highlightjs。
第一步：下载highlightjs
官网：https://highlightjs.org
可以看到它包涵了这么一些文件：
JianglexingdeMacBook-Pro:highlight jianglexing$ ll
total
-rw-rw-rw-@ jianglexing staff CHANGES.md
-rw-rw-r--@ jianglexing staff LICENSE
-rw-r--r--@ jianglexing staff README.md
-rw-r--r--@ jianglexing staff README.ru.md
-rw-------@ jianglexing staff : highlight.pack.js
drwxr-xr-x@ jianglexing staff : styles
styles 包含了大量的css定义、highlight.pack.js 文件应该是highlight中唯一一个js了吧；css中定义了格式化的风格、js中定义了格式
化函数。
所以要做代码的格式化只要引入这两个就完成了一半、另一半就是调用一个方法。
第二步：引入highlight中的css、js
<html>
<head>
<title>highlight实现代码高亮</title>
<!-- 我在这里引入仿vs2015黑色主题的样式 -->
<link rel="stylesheet" href="./styles/vs2015.css">
<!-- 引入hightlight 的js库 -->
<script src="./highlight.pack.js"></script>
</head> <body>
<p><strong>下面是一段简单的python代码</strong></p> <!--highlightjs会自动格式化 pre code中的代码 -->
<pre>
<!-- 通过class属性说明代码中所用的语言 -->
<code class="python">
#!/usr/bin/env python3 if __name__=="__main__":
print("hello hightlightjs ...") </code>
</pre>
</body> <!-- 在这里调用hightlightjs中的格式化代码的方法 -->
<script>
hljs.initHighlightingOnLoad();
</script>
</html>
第三步：在浏览器中查看效果：
学习交流/打赏：
---
highlightjs 详解的更多相关文章
- Linq之旅：Linq入门详解（Linq to Objects）
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）
一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...
- EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...
- Java 字符串格式化详解
Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...
- Android Notification 详解（一）——基本操作
Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...
- Android Notification 详解——基本操作
Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...
- Git初探--笔记整理和Git命令详解
几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...
- Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
随机推荐
- MySQL 主从错误
1: Got fatal error 1236 from master when reading data from binary log: 'Could not find first log fil ...
- [nQSError: 37001]Could not connect to the Oracle BI Server Instance
[nQSError: 37001]Could not connect to the Oracle BI Server Instance 使用本机的OBIEE Client 的Oracle BI管理工具 ...
- MyBatis Spring MapperScannerConfigurer 配置
没有必要在 Spring 的 XML 配置文件中注册所有的映射器.相反,你可以使用一个 MapperScannerConfigurer , 它 将 会 查 找 类 路 径 下 的 映 射 器 并 自 ...
- ysql怎么处理百分数？ “%”
)将百分数转化为小数,再以浮点数数据类型float输入 )设置字段类型为varchar数据类型,将百分数输入为文本数据,需要计算或提取出来的时候,再转化为数值类型 //转换数据类型
- 用html.parser抓网页中的超链接,返回list
#python3 from html.parser import HTMLParser class MyHTMLParser(HTMLParser): """ 1.tag ...
- XML制作RSS源
什么是RSS源?看到这片文章的人相信都知道.自己博客首页不就是一个吗? 好吧,先来一个简单点的.直接就是死代码:详细如何使用就看RSS使用标准吧! <?xml version = "1 ...
- Map遍历的几种方法
查看Map自带API map遍历方法: public static void main(String[] args) { Map<Integer,String> map = new Has ...
- sqlserver几个好用的表值函数和标量函数
获取逗号风格的字符串中的某一个 比如'1,2,4,5,6' 第三个就是4 CREATE function [dbo].[Get_StrArrayStrOfIndex] ( @str nvarchar( ...
- ios 中sqlite的用法
#import <sqlite3.h> @interface ViewController () { sqlite3 *_sqldb; } @end @implementation Vie ...
- Web-URL编码流程图(详细了解乱码原因)
URL编码流程图 原URL---->GET时浏览器根据HTTP头的Content-Type的charset,POST根据(<meta http-equiv="Content-Ty ...