how to add swagger to docsify

 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.html

Add the plugin script inside your main index.html file, right below the main Docsify script: [1, 2]

html

<!-- 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-ui

If 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.html

Include 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