起源：

　　最近想做一个代码高亮的功能、发现开源社区已经有了这类的项目、比如说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 详解的更多相关文章

  1. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  3. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  4. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  5. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  6. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  7. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

随机推荐

  1. MapReduce任务参数调优(转)

    http://blog.javachen.com/2014/06/24/tuning-in-mapreduce/ 本文主要记录Hadoop 2.x版本中MapReduce参数调优,不涉及Yarn的调优 ...

  2. Eclipse远程连接Hadoop

    Windows下面调试程序比在Linux下面调试方便一些,于是用Windows下的Eclipse远程连接Hadoop. 1. 下载相应版本的hadoop-eclipse-plugin插件,复制到ecl ...

  3. 算法笔记_219:泊松分酒（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 泊松是法国数学家.物理学家和力学家.他一生致力科学事业,成果颇多.有许多著名的公式定理以他的名字命名,比如概率论中著名的泊松分布. 有一次闲暇时,他 ...

  4. Aerospike系列：3：aerospike特点分析

    1. 数据存放 数据可以放内存,也可以放SSD.   数据放内存时速度肯定会很快,但这和memcache一样,相比memcache性能并没有优势 数据放内存时可以进行持久化配置,但文档只有一个地方提了 ...

  5. golang之log rotate

    操作系统: CentOS 6.9_x64 go语言版本: 1.8.3 问题描述 golang的log模块提供的有写日志功能,示例代码如下: /* golang log example E-Mail : ...

  6. Linux文件压缩、打包、备份

    1:Linux常见的压缩文件 2:gzip压缩指令 3:bzip2压缩指令(比gzip更高压缩比) 同理,可以用bzcat\bzmore\bzless读取被压缩后文件内容. 4:xz压缩指令(比bzi ...

  7. Android学习笔记十：异步处理

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7520700.html 一:基础概念 UI线程:当Android程序第一次启动时,Android会同时启动一条主 ...

  8. 【Java多线程】线程同步方法概览

    一:使用syncrhoized内置锁实现同步 使用互斥来实现线程间的同步,保证共享数据在同一时刻只被一个线程使用.Java中最基本的互斥手段就是syncrhoized关键字. syncrhoized的 ...

  9. V-rep学习笔记：视觉传感器2

    视觉传感器的属性设置栏中还有如下几个选项: Ignore RGB info (faster): if selected, the RGB information of the sensor (i.e. ...

  10. ROS知识（15）----Actionlib的使用（一）

    Actionlib是ROS非常重要的库,像执行各种运动的动作,例如控制手臂去抓取一个杯子,这个过程可能复杂而漫长,执行过程中还可能强制中断或反馈信息,这时Actionlib就能大展伸手了. 1.原理 ...