使用mark.js标注网页内容

本文教你如何在chrome控制台中，使用mark.js，随意标注任何网页中的任何内容。

首先，我们下载mark.js源码：https://cdn.jsdelivr.net/mark.js/latest/mark.js.zip，并解压：

打开mark.min.js，看到一行压缩后的源码：

拷贝此行源码，接下来我们打开一张网页，这里以我的一篇文章页为例子，在chrome中打开http://www.jianshu.com/p/283b46e660c2。

接下来我们打开控制台：在Mac下，按下option + command + i；在Windows下，按下control + shift + i：

在控制台中，输入刚才拷贝的源码，并按下enter键：

如此，一个Mark的全局构造函数已初始化完毕。接下来，我们选取我们想要的DOM元素，对它进行标注：

我们发现这块区域就是class为show-content的div元素，于是使用如下方式把这个元素获取，在控制台中输入：

var contentEl = document.querySelector('.show-content');

然后使用mark.js的API对这个元素进行标注，在控制台中输入：

var instance = new Mark(contentEl);

instance.mark('Nicolas1.1');

成功！我们发现带有nicolas1.1的字样都被标注上了背景色。

更多mark.js的API文档，请参考https://markjs.io/。