最近在vuepress中撰寫UI框架文檔時發現在組件中插入演示代碼沒高亮，雖然在文檔markdown中寫代碼有高亮但就無法實現折疊了，而且vuepress沒有提供折疊代碼的配置，因此實現一個折疊組件外加代碼高亮的插件就十分有必要。
一、編寫代碼折疊mixin.js
在/docs/.vuepress下創建mixin.js文件，編寫代碼折疊邏輯。
export default {
data () {
return {
//每一個區域的高度
codeParent: [],
codeHeightArr: [],
//每個區域的顯示狀態
isShow: [],
}
},
methods: {
//根據子元素的高度 設置代碼區域父元素的高度
showCode (index) {
this.$set(this.isShow, index, !this.isShow[index])
this.$nextTick(() => {
if (this.isShow[index] === true) {
this.codeParent[index].style.height = +this.codeHeightArr[index] + 25 + 'px'
} else {
this.codeParent[index].style.height = 0
}
})
},
//得到所有代碼區域的高度
getCodesHeight () {
const arr = document.getElementsByClassName('code-content-height')
this.codeParent = document.getElementsByClassName('code-content')
const arrLength = arr.length
for (let i = 0; i < arrLength; i++) {
this.codeHeightArr.push(arr[i].getBoundingClientRect().height)
this.isShow.push(false)
}
},
},
mounted () {
//異步獲取當前組件內部 code區域的高度 以便于給點擊的時候使用
this.$nextTick(() => {
this.getCodesHeight()
})
},
}
同目錄下創建enhanceApp.js這里引入折疊代碼的相關css應用于全局
import './public/index.scss'
export default ({
Vue, // VuePress 正在使用的 Vue 構造函數
// options, // 附加到根實例的一些選項
// router, // 當前應用的路由實例
// siteData // 站點元數據
}) => {
// ...做一些其他的應用級別的優化
}
/doc/.vuepress/public創建index.scss
.theme-container.sidebar-open .sidebar {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 0;
}
.sidebar, .navbar {
z-index: 10000;
}
.component-wrapper {
border: 1px solid #ebebeb;
border-radius: 3px;
transition: .2s;
.component-wrapper-demo {
padding: 24px 24px 15px 24px;
}
h4 {
margin: 55px 0 20px;
}
&:hover {
.lock-code .lock-code-word {
font-size: 14px;
transform: translateX(-40px);
opacity: 1;
}
.lock-code .icon-down {
transform: translateX(-40px);
}
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
}
.code-content {
background-color: #fafafa;
border-top: 1px solid #eaeefb;
overflow: hidden;
transition: height .2s;
.code-content-height {
.code-user-desc {
background: #ffffff;
margin: 10px 10px 0 10px;
padding: 5px 10px;
font-size: 14px;
line-height: 26px;
border: 1px solid #ebebeb;
border-radius: 3px;
}
> pre {
background: none;
> code {
color: #3182bd;
}
}
}
}
.lock-code {
border-top: 1px solid #eaeefb;
height: 44px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
position: relative;
line-height: 44px;
color: #d3dce6;
&:hover {
background-color: #f9fafc;
.lock-code-word {
color: #409eff;
}
.icon-down {
fill: #409eff;
}
}
.icon-down {
transform: translateX(0px);
transition: all .1s;
}
text-align: center;
.lock-code-word {
font-size: 0px;
margin-left: 15px;
display: inline-block;
transition: all .1s;
opacity: 0;
}
}
}
::-webkit-scrollbar {
width: 8px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #ccc;
}
::-webkit-scrollbar-track {
border-radius: 6px;
background-color: #f5f5f5;
}
之后便可以在文件中使用啦，/docs/.vuepress/components下創建demo.vue
<template>
<div class="demo">
<h2>創建組件文檔模板</h2>
<p>組件描述</p>
<h3>組件功能名字</h3>
<p>組件功能描述</p>
<div class="component-wrapper">
<div class="component-wrapper-demo">
組件展示位置
</div>
<div class="code-content" style="height: 0;">
<div class="code-content-height">
<!-- <div class="code-user-desc">
組件描述說明
</div> -->
<pre><code class="vue">{{codeStr}}</code></pre>
</div>
</div>
<div class="lock-code" @click="showCode(0)" ref="xxx">
<w-icon class="icon-down" :name="isShow[0] === false ? 'down' : 'up'"></w-icon>
<span class="lock-code-word">{{isShow[0] === false ? '顯示代碼' : '隱藏代碼'}}</span>
</div>
</div>
<h3>attributes</h3>
<p>組件參數說明后期擴展</p>
</div>
</template>
<script>
import WIcon from '../../../src/icon/icon'
import mixin from '../mixin'
export default {
name: 'demo',
mixins: [mixin],
components: {
WIcon,
},
data() {
return {
codeStr: `
<g-button>默認按鈕</g-button>
`.replace(/^\s*/gm, '').trim(),
}
}
}
</script>
<style lang="scss" scoped>
</style>
文檔配置中引入此組件展示即可，效果如圖：
image
可點擊顯示隱藏代碼
二、高亮代碼
在組件中插入代碼想使得代碼語法高亮可以用highlight插件
1. 安裝
yarn add -D highlight.js
2. 全局引入
enhanceApp.js中 引入highlight插件,這里使用與element-ui一樣的color-brewer主題
import './public/index.scss'
//代碼高亮文件引入
import Vue from 'vue'
import hljs from 'highlight.js'
//樣式文件,這里我選的是sublime樣式，文件里面還有其他樣式可供選擇
import 'highlight.js/styles/color-brewer.css'
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
export default ({
Vue, // VuePress 正在使用的 Vue 構造函數
// options, // 附加到根實例的一些選項
// router, // 當前應用的路由實例
// siteData // 站點元數據
}) => {
// ...做一些其他的應用級別的優化
}
3. 使用
之后在包裝代碼的外層div加上v-highlight指令，并在code標簽標明代碼模板類型為html/javascript/css
<div class="code-content" v-highlight style="height: 0;">
<div class="code-content-height">
<!-- <div class="code-user-desc">
組件描述說明
</div> -->
<pre><code class="html">{{codeStr}}</code></pre>
</div>
</div>
4. 效果
image
仿element-ui的風格，其他主題可以到highlight的官方文檔中尋找highlight?github.com
總結
這是本人用vuepress寫的UI框架文檔，可供參考.?? EchoWheel UI?zyqq.github.io
