VuePress plugins All In One

VuePress & element-ui & docs

$ yarn add -D vuepress-plugin-demo-code

module.exports = {
  plugins: ['demo-code'],
};

module.exports = {
    plugins: [
        ['demo-code', {
            jsLibs: [
                // umd
                'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js',
            ],
            cssLibs: [
                'https://unpkg.com/animate.css@3.7.0/animate.min.css',
            ],
            showText: 'show code',
            hideText: 'hide',
            styleStr: 'text-decoration: underline;',
            minHeight: 200,
            onlineBtns: {
                codepen: true,
                jsfiddle: true,
                codesandbox: true,
            },
            codesandbox: {
                deps: { 'lodash': 'latest' },
                json: '',
                query: '',
                embed: '',
            },
            demoCodeMark: 'demo-code',
            copyOptions: { ... },
        }]
    ],
}

refs

https://github.com/xiguaxigua/vuepress-plugin-demo-block

https://github.com/itclanCode/blogcode

https://coder.itclan.cn/fontend/tools/markdown-use-guide/#vuepress-plugin-demo-code

cname.sh

# cname.sh

#!/usr/bin/env sh

set -e

echo 'doc.xgqfrms.xyz' > docs/.vuepress/dist/CNAME

deploy.sh

https://github.com/itclanCode/blogcode/blob/master/deploy.sh

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
# set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

# 如果是發布到自定義域名
echo 'doc.xgqfrms.xyz' > CNAME

git init
git add -A
git commit -m '部署doc.xgqfrms.xyz'

# 如果發布到 https://<USERNAME>.github.io
git push -f https://github.com/xgqfrms/xgqfrms.github.io.git  master

# 如果發布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -