{"id":14563647,"url":"https://github.com/corentinleberre/create-docsify-plugin","last_synced_at":"2025-09-04T06:32:43.792Z","repository":{"id":191515667,"uuid":"577562099","full_name":"corentinleberre/create-docsify-plugin","owner":"corentinleberre","description":"Template for creating your own Docsify plugin","archived":false,"fork":false,"pushed_at":"2023-01-27T19:19:42.000Z","size":37,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-08T02:42:20.257Z","etag":null,"topics":["docsify","docsify-plugin","docsify-template"],"latest_commit_sha":null,"homepage":"https://dev.to/corentinleberre/enhance-your-docsify-experience-with-your-own-plugin-33aj","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corentinleberre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-12-13T02:24:59.000Z","updated_at":"2024-09-06T03:00:50.000Z","dependencies_parsed_at":"2023-08-30T08:29:05.274Z","dependency_job_id":"f379c050-860e-444c-9ca5-cd9ee66214df","html_url":"https://github.com/corentinleberre/create-docsify-plugin","commit_stats":null,"previous_names":["corentinleberre/create-docsify-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corentinleberre%2Fcreate-docsify-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corentinleberre%2Fcreate-docsify-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corentinleberre%2Fcreate-docsify-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corentinleberre%2Fcreate-docsify-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corentinleberre","download_url":"https://codeload.github.com/corentinleberre/create-docsify-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231940608,"owners_count":18449183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docsify","docsify-plugin","docsify-template"],"created_at":"2024-09-07T02:04:19.179Z","updated_at":"2024-12-31T03:31:08.132Z","avatar_url":"https://github.com/corentinleberre.png","language":"JavaScript","readme":"# create-docsify-plugin\n\n## Enhance your Docsify experience with your own plugin\n\nDocsify is a popular and lightweight documentation generator that allows you to **easily create beautiful, intuitive documentation sites** based on your markdown documentations. It includes features like a search function, a table of contents, and the ability to customize the look and feel of the site using templates and custom CSS. Thanks to that it's a popular choice for open-source documentation sites and other purposes.\n\nIf you want to extend Docsify's features, you can use [community plugins](https://github.com/docsifyjs/awesome-docsify#plugins) or **create your own Docsify plugin**.\n\nIn this post I'll guide you to **create your first Docsify plugin** and deploy it to NPM.\n\n\u003e Requirements : Node 16\n\nTo simplify the process, I've made a preconfigured workspace. To use it just clone the repository below and use it as a starting point for your own plugin 👇\n\n```bash\nnpx degit corentinleberre/create-docsify-plugin my-plugin\ncd my-plugin\n```\n\n### Structure of the project\n\nHere is the structure of this template. The code is stored in the **src** folder.\n\n```text\n📦create-docsify-plugin\n┣ 📂src\n┃ ┣ 📂plugin\n┃ ┃ ┣ 📜main.js\n┃ ┃ ┗ 📜my-plugin.js\n┃ ┣ 📂test\n┃ ┃ ┗ 📜my-plugin.spec.js\n┃ ┣ 📜README.md\n┃ ┗ 📜index.html\n┣ 📜package.json\n┣ 📜README.md\n┗ 📜vite-config.js\n```\n\nWe use [Vite](https://github.com/vitejs/vite) as a dev server. This allows you to take advantage of hot reloading in development and easily build and minify code with [Rollup](https://rollupjs.org/) integration. [Playwright](https://github.com/microsoft/playwright) is also provided, so you can write intregration tests in the matching folder.\n\n### Write your plugin\n\n👉 Run the dev server\n\n```bash\nnpm run dev\n```\n\n#### Pass props to your plugin\n\nYou can pass props to your plugin this way 👇\n\n```html\n// src/index.html\n\n\u003cscript\u003e\n  ...\n  window.$docsify = {\n      name: \"My plugin documentation website\",\n\n      // props\n      myPlugin: {\n          hello: \"world\",\n      },\n  };\n  ...\n\u003c/script\u003e\n```\n\nThese props will be accessible through the docsify global object in your plugin 👇\n\n```javascript\n// src/plugin/main.js\nconst docsify = window.$docsify || {};\n\nconst props = docsify.myPlugin || {};\n```\n\n#### Interact with Docsify lifecycle hooks\n\n\u003e Docsify lifecycle hooks are provided threw the **hook argument** passed to the plugin function. To have more detail about lifecycle hooks check out the [official doc](https://docsify.js.org/#/write-a-plugin?id=lifecycle-hooks).\n\nYou can attach your function to **6 differents lifecycle hooks** allowing your to modify the state of the app.\n\nBelow is the example included in the template for this project.\n\n```javascript\nconst myPlugin = (props = { hello: \"\" }) =\u003e (hook) =\u003e hook.init(() =\u003e {\n    console.log(`hello ${props.hello}`);\n});\n```\n\nThis is a function that will be called once when the Docsify script is **initialized** on the first load of the application. This function will simply display the parameter provided in the browser console.\n\n![Plugin result after init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwi78xh8ecgp3sfv80vn.png)\n\nThe example is deliberately **very simple** here, but it's possible to modify the rendering of Docsify. By example you can add a button to copy and paste the current paragraph when hovering the content or add a custom footer on each page.\n\n#### Detailed example\n\nHere is a detailed example coming from the [official documentation](https://docsify.js.org/#/write-a-plugin?id=examples) interacting with two different Hooks **beforeEach** and **afterEach**. The goal is to add an edit button and a footer to each of your page.\n\nReplace **my-plugin.js** with this content 👇\n\n```javascript\nconst editOnGitPlugin = (props = { repoUrl }) =\u003e (hook, vm) =\u003e\n    hook.beforeEach((html) =\u003e {\n      let editUrl = props.repoUrl + vm.route.file;\n      let editLinkMarkdown = \"[📝 Edit on Github](\" + editUrl + \")\\n\";\n\n      return editLinkMarkdown + html;\n});\n\nconst customFooterPlugin = (props = { title, link }) =\u003e (hook) =\u003e\n    hook.afterEach((html) =\u003e {\n      let footer = [\n        \"\u003chr/\u003e\",\n        \"\u003cfooter\u003e\",\n        `\u003cspan\u003e${props.title}\u003c/span\u003e`,\n        `\u003cspan\u003e\u003ca href=\"${props.link}\" target=\"_blank\"\u003e✨\u003c/a\u003e\u003c/span\u003e`,\n        \"\u003c/footer\u003e\",\n      ].join(\"\");\n\n      return html + footer;\n});\n\nexport { editOnGitPlugin, customFooterPlugin };\n```\n\nYou may noticed that we pass the **vm** property to the plugin, it's the current Docsify instance. It give us access to some property as the current file rendered.\n\nReplace **main.js** with this content 👇\n\n```javascript\nimport { editOnGitPlugin, customFooterPlugin } from \"./my-plugin\";\n\nconst docsify = window.$docsify || {};\n\nconst props = { editOnGitPlugin: docsify.editOnGitPlugin, customFooterPlugin: docsify.customFooterPlugin } || {};\n\ndocsify.plugins = [].concat(docsify.plugins || [], editOnGitPlugin(props.editOnGitPlugin), customFooterPlugin(props.customFooterPlugin));\n```\n\nReplace the Docsify script section in **index.html** with this content 👇\n\n```html\n\u003cscript\u003e\n    window.$docsify = {\n        name: \"Docsify-plugin-playground\",\n        repo: \"\",\n        editOnGitPlugin: {\n            repoUrl: \"https://github.com/docsifyjs/docsify/blob/master/docs/\",\n        },\n        customFooterPlugin: {\n            title: \"My awesome custom footer \",\n            link: \"https://github.com/docsifyjs/awesome-docsify\",\n        },\n    };\n\u003c/script\u003e\n```\n\nYou can now see the edit button on top of the page. On click you'll be redirect to the markdown file you want to modify on your Git repo.\nThe second plugin add a footer providing some informations.\n\n![Illustration of the Docsify plugin to add edit button and footer to each page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr4ayvtxi7ralx7t7nnm.png)\n\nHere are detailed examples of plugins made that I've made using this template if you need some inspiration👇\n\n- [docsify-mermaid-zoom](https://github.com/corentinleberre/docsify-mermaid-zoom)\n- [docsify-replace-pattern](https://github.com/corentinleberre/docsify-replace-pattern)\n\n#### Test your plugin\n\nYou can test your plugin using [Playwright](https://github.com/microsoft/playwright). We provide a simple test file that test the plugin function in **src/my-plugin.spec.js**.\n\n👉 Run the tests\n\n```bash\nnpm run test\n```\n\n### Deploy your plugin\n\nTo deploy this package on **npm**, you will need to have an account on npmjs.com. Once you have an account, follow these steps:\n\n👉 Build the project with **npm run build**\n\nYou have the choice to deliver it as a CommonJS, ESModule, IIFE or UMD. By default, two artifacts CJS and ESM are generated. You can modify that in **vite-config.js**.\n\n```text\n📦dist\n ┣ 📜my-plugin.cjs\n ┗ 📜my-plugin.js\n```\n\n👉 Run **npm publish**\n\nYou can now access your package on npm with this url 👉 [https://www.npmjs.com/package/my-docsify-plugin](https://www.npmjs.com/package/my-docsify-plugin).\n\nTo use this package on your website we will use Jsdelivr.com. It will act as [Content Delivery Network](https://en.wikipedia.org/wiki/Content_delivery_network) proxying your npm package enabling you to use this script directly in the browser.\n\nYou can get your plugin threw this url 👉[https://cdn.jsdelivr.net/npm/my-docsify-plugin@version/dist/my-plugin.js](https://cdn.jsdelivr.net/npm/my-docsify-plugin@version/dist/my-plugin.js)\n\nNow your users just have to add this url directly in their Docsify **index.html** page to use your plugin 👇\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/my-docsify-plugin@version/dist/my-plugin.js\"\u003e\u003c/script\u003e\n```\n\nIf you specified **\"main\": \"dist/my-plugin.js\"** in package.json, you could also access it directly with this url 👉 [https://cdn.jsdelivr.net/npm/my-docsify-plugin@1.0.0](https://cdn.jsdelivr.net/npm/my-docsify-plugin@version)\n\n### Conclusion\n\nThank you for reading this article. If you need more information, feel free to check out the Docsify's plugin documentation.\n\n## License\n\nThis repository is licensed under the MIT License. This means that you are free to use, modify, and distribute it, as long as you include the original copyright and license notice in your documentation.\n\n## Contributing\n\nIf you would like to contribute to this template, please fork the repository and submit a pull request. By contributing to this template, you agree to release your contributions under the MIT License.\n","funding_links":[],"categories":["others","Community Resources"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorentinleberre%2Fcreate-docsify-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorentinleberre%2Fcreate-docsify-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorentinleberre%2Fcreate-docsify-plugin/lists"}