原本 Prism 的样子
为 Prism 加入 Mac 窗口三个点
我们使用
JavaScript 在 pre 前面加入一个 class 为 ‘pre-mac’ 的 div const container = document?.getElementById('container')
const codeBlocks = container?.getElementsByTagName('pre')
Array.from(codeBlocks).forEach(item => {
item.style.whiteSpace = 'pre-wrap'
// Add pre-mac element for Mac Style UI
const preMac = document.createElement('div')
preMac.classList.add('pre-mac')
preMac.innerHTML = '<span></span><span></span><span></span>'
item.parentElement.insertBefore(preMac, item)
})接着，我们为这些 <span> 使用 css 画成圆圈并填入对应色彩，程序如下
.pre-mac {
position: relative;
margin-top: -7px;
top: 21px;
left: 10px;
width: 100px;
z-index: 99;
}
.pre-mac > span {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.pre-mac > span:nth-child(1) {
background: red;
}
.pre-mac > span:nth-child(2) {
background: sandybrown;
}
.pre-mac > span:nth-child(3) {
background: limegreen;
}这样就会帮我们画出如同 Mac 窗口的红绿灯窗口三键
Code 加入了 Mac 窗口三键
为 Prism 加入 行数
为每个
pre 加入新的 class ”line-numbers”item.classList.add('line-numbers')让 Prism 重新跑起来！
Prism.highlightAll()
Code 多了行数显示
为 Prism 加入 Toolbar
因为要加入
Copy 按钮 与 编程语言显示 ，这两个功能都会在工具列上使用到！在博客详细页面，我们引入
toolbar 这个 plugin!// @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/toolbar/prism-toolbar'
为 Prism 加入 Copy 按钮
让拷贝代码变得很轻松，一键拷贝！
在博客详细页面，我们引入
copy-to-clipboard 这个 plugin!// @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
为 Prism 加入编程语言显示
// @/themes/[your_theme]/components/ArticleDetail.js import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
使用漂亮的代码主题： One Dark
首先，我们要先装
prism-themes 来装额外的主题！我选择 one-dark 这个很多人用的主题！yarn add prism-themes
再来，我们要在 app 底层加载这个 css
// @/pages/_app.js import 'prism-themes/themes/prism-one-dark.css'
最后，我对于 css 与底色做一些调整，并加入圆角，漂亮的 Mac 风格代码萤光器就做好啦！