Method 1: Using docsify-swagger
The docsify-swagger GitHub repository provides a lightweight plugin to parse and render a Swagger JSON or YAML document natively within your custom Docsify pages. [1, 2]
1. Update
index.htmlhtml
<!-- Main Docsify script -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- Docsify-swagger plugin -->
<script src="//cdn.jsdelivr.net/npm/docsify-swagger/dist/docsify-swagger.min.js"></script>
Use code with caution.
2. Embed the Swagger Doc in a Markdown File [1]
Create a dedicated Markdown page (e.g.,
api.md). You can render your OpenAPI schema by declaring a docsify-swagger block and pointing it to your hosted Swagger definition file: [1]markdown
# API Reference
```docsify-swagger
https://swagger.io
```
Use code with caution.
Method 2: Using
docsify-swagger-uiIf you prefer the official, interactive look and feel of the standard Swagger dashboard (including the "Try it out" testing panel), you can use the docsify-swagger-ui GitHub repository plugin. [1, 2]
1. Update
index.htmlInclude both the official Swagger UI assets and the Docsify wrapper plugin in your configuration file:
html
<!-- Swagger UI CSS -->
<link rel="stylesheet" href="//://unpkg.com" />
<!-- Docsify configuration -->
<script>
window.$docsify = {
// your config here
}
</script>
<!-- Docsify and Swagger UI Scripts -->
<script src="//://unpkg.com"></script>
<script src="//://unpkg.com"></script>
<script src="//://unpkg.com"></script>
Use code with caution.
2. Embed the UI Component
In your Markdown file, use a customized utility tag to position the interactive layout:
markdown
# Interactive API Explorer
<div id="swagger-ui"></div>
```javascript
window.ui = SwaggerUIBundle({
url: 'https://swagger.io',
dom_id: '#swagger-ui'
});
```
Use code with caution.
---------------
method 2 seems working better
