本文教你如何在chrome控制臺(tái)中,使用mark.js,隨意標(biāo)注任何網(wǎng)頁(yè)中的任何內(nèi)容。
首先,我們下載mark.js源碼:https://cdn.jsdelivr.net/mark.js/latest/mark.js.zip,并解壓:

打開(kāi)mark.min.js,看到一行壓縮后的源碼:

拷貝此行源碼,接下來(lái)我們打開(kāi)一張網(wǎng)頁(yè),這里以我的一篇簡(jiǎn)書文章頁(yè)為例子,在chrome中打開(kāi)http://www.itdecent.cn/p/283b46e660c2。
接下來(lái)我們打開(kāi)控制臺(tái):在Mac下,按下option + command + i;在Windows下,按下control + shift + i:

在控制臺(tái)中,輸入剛才拷貝的源碼,并按下enter鍵:

如此,一個(gè)Mark的全局構(gòu)造函數(shù)已初始化完畢。接下來(lái),我們選取我們想要的DOM元素,對(duì)它進(jìn)行標(biāo)注:


我們發(fā)現(xiàn)這塊區(qū)域就是class為show-content的div元素,于是使用如下方式把這個(gè)元素獲取,在控制臺(tái)中輸入:
var contentEl = document.querySelector('.show-content');
然后使用mark.js的API對(duì)這個(gè)元素進(jìn)行標(biāo)注,在控制臺(tái)中輸入:
var instance = new Mark(contentEl);
instance.mark('Nicolas1.1');

成功!我們發(fā)現(xiàn)帶有nicolas1.1的字樣都被標(biāo)注上了背景色。
更多mark.js的API文檔,請(qǐng)參考https://markjs.io/。