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 ...
随机推荐
- mysqld.exe
mysqld.exe是mysql的服务端程序,开启之后才能使用mysql.exe 将mysql安装成服务很简单: mysqld.exe install mysql 删除服务也很简单: sc delet ...
- 安装MySQL-python报错：_mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory或者 build\lib.win-amd64-2.7\_mysql.pyd : fatal error LNK1120: 56 unresolved externa
解决办法1: 直接下载MySQL-python-1.2.5.win-amd64/32-py2.7.exe,点击安装 此处要注意自己安装的Python和MySQL版本是64位还是32位,否则在进行安装M ...
- MySQL中 PK NN UQ BIN UN ZF AI 的意思
PK Belongs to primary key作为主键 NN Not Null非空 UQ Unique index不能重复 BIN Is binary column存放二进制数据的列 ...
- java 16进制与字符串直接相互转换
java 16进制与字符串直接相互转换 CreationTime--2018年7月12日09点39分 Author:Marydon 1.16进制转换成字符串 /** * 16进制直接转换成为字符串 ...
- log4j2的xml的配置样例
log4j2.xml <?xml version="1.0" encoding="UTF-8"?> <Configuration status ...
- 利用JQuery 来操作 ListBox和ListBox内移动
[导读]利用jquery 来操作 listbox和listbox内移动function listbox_move(listfrom,listto) { var size = $(" &quo ...
- RHEL7 配置临时IP 测试
RHEL7 配置或添加临时IP地址测试: [root@rhel7 Desktop]# ip a s enp0s3 ---查看原网卡IP 为192.168.1.7 : enp0s3: <BROAD ...
- Java对象池技术的原理及其实现
看到一片有关于java 对象基础知识,故转载一下,同时学习一下. 摘 要 本文在分析对象池技术基本原理的基础上,给出了对象池技术的两种实现方式.还指出了使用对象池技术时所应注意的问题. 关键词 对象池 ...
- 百度云盘下载插进-油猴Tampermonkey
Tampermonkey是一款免费的浏览器扩展程序,有百度云网盘的下载嗅探脚本,一键获取下载地址! 01.搭梯子 访问gchrome的商店,搜索Tampermonkey,添加Tampermonkey ...
- ios中tableview网封装（viewcontroller封装)常用的
下载地址 http://pan.baidu.com/share/link?shareid=3657500168&uk=923776187 使用框架 1:asIHttpRequest库 2;SB ...