vscode markdown预览点击显示与隐藏

由

背景

在VScode中编辑一篇英文文章，需要对不认识的单词做中文意思备注，实现点击的时候能弹出备注窗口，再点击的时候能隐藏窗口。

实现

准备css和js。
1. 在.md文件中对要注释的文字加上html标签,例如下面：
bun是要注释的文字

he thought he'd stretch his legs and walk across the road to buy himself a <span class="text">bun<label class="pop">n.小圆面包,(发型)圆发髻</label></span> from the bakery
  1. 写css，这里我已经写好了，可以在这里面进行修改
.text {
  position: relative;
  z-index: 1;
  cursor: pointer;
  text-decoration: underline;
  color: red;
}
.text .pop {
  position: absolute;
  z-index: 10;
  bottom: 25px;
  padding: 2px 10px;
  visibility: hidden;
  background: white;
  width: auto;
  min-width: 100px;
  left: 0px;
  color: #333;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
    0 9px 28px 8px #0000000d;
  font-size: 14px;
}
.text .pop::after {
  position: absolute;
  bottom: -18px;
  left: 10px;
  border-width: 10px;
  width: 0px;
  height: 0px;
  content: "";
  border-color: #fff transparent transparent;
  border-style: solid;
}
  1. 写js，在不改变class的时候，可以直接使用
window.onload = function () {
    document.body.addEventListener('click', (e) => {
        const element = e.target;
        if (element.className === 'text') {
            const popElement = element.children[0]
            if (popElement.style.visibility === 'visible') {
                popElement.style.visibility = 'hidden'
            } else {
                popElement.style.visibility = 'visible'
            }
        }
    })
}
  1. 将准备好的css和js复制到vscode的安装目录...Microsoft VS Code\resources\app\extensions\markdown-language-features\media中的markdown.css文件和index.js文件中

成果