學用系列｜一頁一記，小而美的網頁標記工具

頁閱讀希望有邊讀邊記，可是一邊瀏覽器，一邊wps的操作不僅不便，而且有些時候網頁標記也容易找不到。

如果你正在為這個頭痛，不妨體驗一下PAGENOTE，一個讓任意網頁成為筆記本，高亮關鍵字、添加筆記、網頁快照，支持導入導出，還也可以生成分享鏈接，讓好友看到你的筆記的網頁標記工具。

重要提示：PAGENOTE不需要登錄，不需要聯網，0門檻使用。數據存儲在用戶本地，百分百的數據安全。

網頁上的標記工具

PAGENOTE，中文名是一頁一記，支持firefox、chrome、360等主流瀏覽器，安裝插件之后就可以使用了。

這個工具的特點是你可以在網頁上任意標注（最大支持50個批注），而且還能對標記內容用不同色彩加以區分，更厲害的是選中之后還可以網頁快照、復制和檢索資料，一張動圖就能說明一切。

同時，標記之后還可以在網頁上進行標記的編輯和瀏覽。

不僅如此，你還可以對網頁進行截圖瀏覽。

完成之后，還可以對網頁進行標簽操作。

點擊manage in pagenoter之后，就能進入編輯器。

編輯器效果很簡單，采用本地存儲的方案，理論上可以提供無限記錄空間。

非常方便您去查找之前標記過的內容?？梢酝ㄟ^高亮的文本、或者你自己的留言筆記去關鍵字搜索。點擊瀏覽器右上角 pagenote 的圖標，在彈出頁中可以查看你所有標記過的內容。

這款國人開發的小工具雖然簡單，卻十分適合網頁閱讀的小伙伴進行資料收集整理，而且本地存儲數據，安全可控。唯一需要注意的是目前導出的格式為md（markdown語法格式），期待下一版能夠導出html或者word格式。

VSCode中，有許多與HTML相關的插件可以大大提高開發效率和便利性。以下是一些值得推薦的插件，它們各自具有獨特的功能和優點，可以幫助您更好地編寫、調試和預覽HTML代碼。

1. HTML Snippets: 這個插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結構和元素。只需輸入簡短的縮寫，即可自動生成相應的HTML代碼，大大提高了編寫速度。

2. Emmet: Emmet是一個強大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復雜的HTML結構和嵌套元素。Emmet還提供了許多自定義選項，可以根據您的需求進行靈活配置。

3. HTML Boilerplate: 這個插件提供了一個HTML模板，包含了常見的HTML結構和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個插件，您可以快速創建一個基本的HTML框架，然后在此基礎上進行進一步的開發。

4. HTML Preview: HTML Preview插件可以在VSCode中實時預覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點擊預覽按鈕，即可在側邊欄中查看HTML頁面的渲染效果。這對于調試和預覽HTML代碼非常方便。

5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發現和修改顏色值，提高了代碼的可讀性和可維護性。

6. HTML Boilerplate Generator: 這個插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標簽、字符編碼、視口設置等。它還提供了一些自定義選項，可以根據您的需求生成符合規范的HTML代碼。

7. HTML CSS Support: 這個插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。

8. HTML/CSS/JS Prettify: 這個插件可以對HTML、CSS和JavaScript代碼進行格式化，使其更加整潔和易讀。您可以自定義格式化規則，也可以使用默認的規則進行快速格式化。這對于保持代碼風格一致和提高代碼可讀性非常有幫助。

9. HTML Validator: HTML Validator插件可以對HTML代碼進行驗證，檢查其是否符合W3C規范。它可以檢測出潛在的錯誤和不符合規范的地方，并給出相應的提示和建議。這對于編寫符合標準的HTML代碼非常有幫助。

10. Live Server: Live Server插件可以在本地啟動一個實時服務器，讓您在瀏覽器中實時預覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實時反映代碼的變化。這對于前端開發和調試非常方便。

以上是一些值得推薦的VSCode中與HTML相關的插件。它們各自具有獨特的功能和優點，可以幫助您提高開發效率和便利性。當然，具體選擇哪些插件還需要根據您的實際需求和喜好來決定。希望這些推薦能對您有所幫助！

亮插件主要可以讓<pre></pre>標簽里面的代碼高亮，就跟編輯器里顯示的一樣，有利于閱讀，有利于用戶體驗，常用的highlight.js ，這里要說的是更加輕量的選擇——Prism.js

為什么選擇 Prism.js ？

有誰在使用？

許多網站都在使用 Prism，如果你是前端開發者，那你一定十分熟悉這些網站：

這些網站在使用 Prism.js

連 JavaScript 之父 Brendan Eich 也在個人博客上使用！

如何使用：

你只需要在頁面上引入prism.css和prism.js文件：

遵循 HTML5 標準，Prism 使用語義化的 <pre> 元素和 <code> 元素來標記代碼區塊：

演示：http://prismjs.com/test.html

下載 http://prismjs.com/download.html

來源：切圖網（qietu.com），前端學習加微信 dingxiangming82

*請認真填寫需求信息，我們會在24小時內與您取得聯系。