Vuepress markdown 文件中代码段展开与隐藏

代码

Markdown

使用 html 标签 details

<details>

<summary>展开查看</summary>

```vue
<template>
  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: true
      };
    }
  };
</script>
```

</details>

css 

// 缩放展开样式
details > summary:first-of-type {
    font-size: 10px;
    padding: 8px 0;
    cursor: pointer;
    color: #1989fa;
}

效果