通过vue组件实现跟：相似的效果。需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中。

至于如何将组件在VuePress网站中展示请参考：

当项目中的Vue组件的运行结果可以在页面展示以后，接下来就是要将自己的代码展示在Vuepress网站中。

在VuePress网站中展示自己的代码

因为可以在markdown中使用Vue组件，所以可以自己专门写一个Vue组件来写一个效果跟：相似的页面。

在进行下一步之前先运行两名两个命令：

yarn add vue-highlight.jsyarn add highlight.js

想要在组件中使用这两个包，所以需要做一些配置，在docs\.vuepress下添加enhanceApp.js文件，将下面代码加进去

import  VueHighlightJS  from  'vue-highlight.js';import  'highlight.js/styles/dark.css';export  default ({    Vue, }) => {    Vue.use(VueHighlightJS)}

接下来就是写Vue组件，用来实现自己项目组件和代码的展示效果，也就是项目文档的布局和样式。

由于代码比较多，这里就不放代码了，可以从这里下载这次案例的所有代码

效果图

到了这一步，大部分功能基本上都实现了。

自定义样式

在docs\.vuepress下添加override.styl,通过编辑override.styl文件可以更改VuePress默认样式。

如果需要对页面的样式进行修改，只需要在override.styl在这个.theme-container.custom-page-class{}里面对页面中对应的类进行修改就可以修改页面默认样式。例子如下:

.theme-container.custom-page-class {    /* 特定页面的 CSS */    /*.sidebar在页面中是侧边栏的类名，通过这个可以修改侧边栏的样式和布局*/    .sidebar{        width: 16rem;    }    @media(max-width:  959px){        .sidebar{            width: 15rem;        }    }}

写好这个以后，在需要修改默认样式的页面中将这个文件引入使用，使用方法如下：

在对应的页面的markdown文件中添加pageClass: custom-page-class，custom-page-class这个得跟override.styl文件中.theme-container.custom-page-class的一样。在icon.md文件的开头添加：

---pageClass: custom-page-class---

这样就可以修改icon这个页面的默认样式

需要注意的是在markdown使用组件，需要用<ClientOnly></ClientOnly>将组件包裹起来，否则会报错。如：

本次案例代码: