本文教你如何在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/。