post_docusaurus

adding.md

$ yarn add @docusaurus/mdx-loader
$ yarn add swagger-ui-react

gistfile1.md

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

install.md

  npx @docusaurus/init@next init mydevportal classic
  
  
  npm run start
  ✔ Client
  Compiled successfully in 8.25s

ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/edgar/Documents/DEV-2/2020/customers/cloud-day/mydevportal
ℹ ｢wds｣: 404s will fallback to /index.html

✔ Client
  Compiled successfully in 94.08ms

swagger.js

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

---
id: swagger
title: Swagger
---

You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).

<SwaggerUI url="https://petstore.swagger.io/v2/swagger.json"/>

export const Highlight = ({children, color}) => ( <span style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>{children}</span> );

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!