If for any reason this happened to you, with this kind of configuration,
package.json
“name”: “my-websiteopenapi-3”,
“version”: “0.0.0”,
“private”: true,
“dependencies”: {
“@docusaurus/core”: “^3.0.0”,
“@mdx-js/react”: “^3.0.0”,
“clsx”: “^1.2.1”,
“docusaurus-preset-openapi”: “0.7.3”,
“prism-react-renderer”: “^2.1.0”,
“react”: “^18.0.0”,
“react-dom”: “^18.0.0”,
“url”: “^0.11.0”
},
“scripts”: {
“docusaurus”: “docusaurus”,
“start”: “docusaurus start”,
“build”: “docusaurus build”,
“swizzle”: “docusaurus swizzle”,
“deploy”: “docusaurus deploy”,
“clear”: “docusaurus clear”,
“serve”: “docusaurus serve”,
“write-translations”: “docusaurus write-translations”,
“write-heading-ids”: “docusaurus write-heading-ids”
},
“browserslist”: {
“production”: [
“>0.5%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
}
}
and your docusaurus.config.js looks like this:
// `@type` JSDoc annotations allow editor autocompletion and type checking
// (when paired with `@ts-check`).
// There are various equivalent ways to declare your Docusaurus config.
// See: https://docusaurus.io/docs/api/docusaurus-config
import { themes as prismThemes } from “prism-react-renderer“;
/** @type {import(‘@docusaurus/types’).Config} */
const config = {
title: “My Site“,
tagline: “Dinosaurs are cool“,
url: “https://your-docusaurus-test-site.com“,
baseUrl: “/“,
onBrokenLinks: “throw“,
onBrokenMarkdownLinks: “warn“,
favicon: “img/favicon.ico“,
organizationName: “facebook“, // Usually your GitHub org/user name.
projectName: “docusaurus“, // Usually your repo name.
presets: [
[
“docusaurus-preset-openapi“,
/** @type {import(‘docusaurus-preset-openapi’).Options} */
({
docs: {
sidebarPath: require.resolve(“./sidebars.js“),
// Please change this to your repo.
editUrl: “https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/“,
},
blog: {
showReadingTime: true,
// Please change this to your repo.
editUrl: “https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/“,
},
theme: {
customCss: require.resolve(“./src/css/custom.css“),
},
}),
],
],
themeConfig:
/** @type {import(‘docusaurus-preset-openapi’).ThemeConfig} */
({
navbar: {
title: “My Site“,
logo: {
alt: “My Site Logo“,
src: “img/logo.svg“,
},
items: [
{
type: “doc“,
docId: “intro“,
position: “left“,
label: “Tutorial“,
},
{ to: “/api“, label: “API“, position: “left“ },
{ to: “/blog“, label: “Blog“, position: “left“ },
{
href: “https://github.com/facebook/docusaurus“,
label: “GitHub“,
position: “right“,
},
],
},
footer: {
style: “dark“,
links: [
{
title: “Docs“,
items: [
{
label: “Tutorial“,
to: “/docs/intro“,
},
],
},
{
title: “Community“,
items: [
{
label: “Stack Overflow“,
href: “https://stackoverflow.com/questions/tagged/docusaurus“,
},
{
label: “Discord“,
href: “https://discordapp.com/invite/docusaurus“,
},
{
label: “Twitter“,
href: “https://twitter.com/docusaurus“,
},
],
},
{
title: “More“,
items: [
{
label: “Blog“,
to: “/blog“,
},
{
label: “GitHub“,
href: “https://github.com/facebook/docusaurus“,
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
},
}),
};
export default config;
and you have a markdown file in the browser that looks like the next image:
this will be the solution to your problem:
