docsify-edit-on-github
docsify-edit-on-github copied to clipboard
Published
20 hours ago •
njleonzhang
njleonzhang
Combining docsify-edit-on-github with other docsify plugins
Versions
- Docsify 4.13.1
- Docsify-tabs 1.6.3
- Docsify-edit-on-github 1.0.4
Steps to reproduce
Create an index.html with the following content as per the instructions of both plugins:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'name',
plugins: [
EditOnGithubPlugin.create('docBase', docEditBase', 'title')
],
repo: 'repo',
tabs: {
persist: true, // default
sync: true, // default
theme: 'classic', // default
tabComments: true, // default
tabHeadings: true // default
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
</body>
</html>
Outcome
docsify-tabs are not rendered properly
Explanation
Defining plugins in window.$docsify declaration overwrites docsify-tabs declaration
Fix
Use instead the following syntax for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'name',
repo: 'repo',
tabs: {
persist: true, // default
sync: true, // default
theme: 'classic', // default
tabComments: true, // default
tabHeadings: true // default
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
<script>
window.$docsify.plugins.push(
EditOnGithubPlugin.create('docBase', 'docEditBase', 'title')
);
</script>
</body>
</html>
Expected action
I would kindly suggest docsify-edit-on-github documentation be amended to suggest using window.$docsify.plugins.push to avoid overwriting any other plugin such as docsify-tabs
