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 ...
随机推荐
- 关于gitblit成功启动，但在阿里云外网地址无法访问的问题
1.配置/data/defaults.properties server.httpBindInterface= 此处什么都不要填空着就好. # Specify the interface for Je ...
- Cocos2d-x-Lua演示样例项目HelloLua
Cocos2d-x-Lua演示样例项目HelloLua 本篇博客介绍Cocos2d-x中Lua的实例项目,就是使用Cocos2d-x创建的初始项目执行所呈现的农场,这里笔者取名为HelloLua.本篇 ...
- 分享自己针对Automation做的两个成熟的框架（QTP 和Selenium)
自己在google code中开源了自己一直以来做的两个自动化的框架,一个是针对QTP的一个是针对Selenium的,显而易见,一个是商业的UI automation工具,一个是开源的自动化工具. 只 ...
- Ubuntu 16.04 编译安装 ss
在网上没有找到合适的适合ubuntu的ss客户端, 考虑到ss的编译安装其实就带了ss-local这样的客户端, 于是在Ubuntu下编译安装了ss. 首先去github上下载最新的安装包 https ...
- 移动端强大的富文本编辑器richeditor-android
代码地址如下:http://www.demodashi.com/demo/14883.html 一.运行效果图 二.代码具体实现 1.引入richeditor-android richeditor-a ...
- 【TP5.0】tp5.0实现连接多个数据库，实现类似3.2M（‘table’,'prefix_','db_config2'）的CURD操作
1.db_connect的name链式操作,类似于3.2的M('table','prefix_','db_config2') /** * db_connect的name链式操作,类似于3.2的M('t ...
- Android 代码画角标 offcutView
效果如下: 代码: <com.andye.OffcutView android:layout_width="30dp" android:layout_h ...
- Scribes:小型文本编辑器，支持远程编辑
Scribes是一款简洁的文本编辑器.现在给大家介绍下. 功能列表, Python插件扩展 支持远程编辑(如ftp, sftp, ssh, samba, webdav, webdavs) ...
- JavaScript Boolean Object 逻辑
Create a Boolean Object The Boolean object represents two values: "true" or "false&qu ...
- iOS 中的静态库与动态库，区别、制作和使用
如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...