From 3472ef9f46655993086c50effc3af6be4e4bd500 Mon Sep 17 00:00:00 2001 From: Ricardo Nunez <113212961+ricardonunez-io@users.noreply.github.com> Date: Tue, 10 Jun 2025 18:13:39 -0700 Subject: [PATCH 1/2] Add proper language support for syntax highlighting to all code blocks --- .../customization/adding-sdk-examples.mdx | 2 +- .../customization/complex-data-types.mdx | 6 ++-- .../managing-page-visibility.mdx | 12 ++++---- .../customization/multiple-responses.mdx | 2 +- api-playground/mdx/authentication.mdx | 8 +++--- api-playground/mdx/configuration.mdx | 13 +++++---- api-playground/openapi-setup.mdx | 8 +++--- api-playground/overview.mdx | 2 +- api-playground/troubleshooting.mdx | 6 ++-- authentication-personalization/overview.mdx | 2 +- changelog.mdx | 8 +++--- code.mdx | 12 ++++---- components/accordions.mdx | 4 +-- components/callouts.mdx | 14 +++++----- components/cards.mdx | 6 ++-- components/code-groups.mdx | 5 ++-- components/columns.mdx | 2 +- components/examples.mdx | 4 +-- components/expandables.mdx | 2 +- components/fields.mdx | 8 +++--- components/frames.mdx | 4 +-- components/icons.mdx | 2 +- components/mermaid-diagrams.mdx | 4 +-- components/panel.mdx | 2 +- components/responses.mdx | 6 ++-- components/steps.mdx | 2 +- components/tabs.mdx | 2 +- components/tooltips.mdx | 2 +- components/update.mdx | 4 +-- guides/hidden-pages.mdx | 4 +-- guides/migration.mdx | 8 +++--- image-embeds.mdx | 2 +- installation.mdx | 4 +-- list-table.mdx | 10 +++---- navigation.mdx | 2 +- pages.mdx | 28 +++++++++---------- quickstart.mdx | 6 ++-- react-components.mdx | 14 +++++----- settings.mdx | 6 ++-- settings/custom-domain.mdx | 2 +- settings/seo.mdx | 2 +- text.mdx | 12 ++++---- 42 files changed, 128 insertions(+), 126 deletions(-) diff --git a/api-playground/customization/adding-sdk-examples.mdx b/api-playground/customization/adding-sdk-examples.mdx index 9d63857f..dd58a580 100644 --- a/api-playground/customization/adding-sdk-examples.mdx +++ b/api-playground/customization/adding-sdk-examples.mdx @@ -25,7 +25,7 @@ Here is an example of code samples for a plant tracking app, which has both a Ba paths: /plants: get: - ... + # ... x-codeSamples: - lang: bash label: List all unwatered plants diff --git a/api-playground/customization/complex-data-types.mdx b/api-playground/customization/complex-data-types.mdx index c49d3159..c26607a8 100644 --- a/api-playground/customization/complex-data-types.mdx +++ b/api-playground/customization/complex-data-types.mdx @@ -32,7 +32,7 @@ org_with_users: users: type: array description: An array containing all users in the organization -... +# ... components: schemas: Org: @@ -67,14 +67,14 @@ delivery_address: address_line_1: type: string description: The street address of the recipient - ... + # ... - title: POBox type: object properties: box_number: type: string description: The number of the PO Box - ... + # ... ``` diff --git a/api-playground/customization/managing-page-visibility.mdx b/api-playground/customization/managing-page-visibility.mdx index 08a9b7d0..a3d6c29e 100644 --- a/api-playground/customization/managing-page-visibility.mdx +++ b/api-playground/customization/managing-page-visibility.mdx @@ -39,24 +39,24 @@ Here are examples of how to use each property in an OpenAPI schema document for "/plants": { "get": { "description": "Returns all plants from the store", - "parameters": { ... }, - "responses": { ... } + "parameters": { /*...*/ }, + "responses": { /*...*/ } } }, "/hidden_plants": { "get": { "x-hidden": true, "description": "Returns all somewhat secret plants from the store", - "parameters": { ... }, - "responses": { ... } + "parameters": { /*...*/ }, + "responses": { /*...*/ } } }, "/secret_plants": { "get": { "x-excluded": true, "description": "Returns all top secret plants from the store (do not publish this endpoint!)", - "parameters": { ... }, - "responses": { ... } + "parameters": { /*...*/ }, + "responses": { /*...*/ } } } }, diff --git a/api-playground/customization/multiple-responses.mdx b/api-playground/customization/multiple-responses.mdx index c4933785..7935e76f 100644 --- a/api-playground/customization/multiple-responses.mdx +++ b/api-playground/customization/multiple-responses.mdx @@ -28,4 +28,4 @@ responses: countryCode: "GB" currencyCode: "GBP" taxRate: 0.20 -``` \ No newline at end of file +``` diff --git a/api-playground/mdx/authentication.mdx b/api-playground/mdx/authentication.mdx index a1bf0cc7..60fe4869 100644 --- a/api-playground/mdx/authentication.mdx +++ b/api-playground/mdx/authentication.mdx @@ -23,7 +23,7 @@ A page's authentication method will override a global method if both are set. } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "bearer" @@ -46,7 +46,7 @@ authMethod: "bearer" } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "basic" @@ -70,7 +70,7 @@ authMethod: "basic" } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "key" @@ -84,7 +84,7 @@ authMethod: "key" The "none" authentication method is useful to disable authentication on a specific endpoint after setting a default in docs.json. -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "none" diff --git a/api-playground/mdx/configuration.mdx b/api-playground/mdx/configuration.mdx index b6beb7eb..5b1abcf1 100644 --- a/api-playground/mdx/configuration.mdx +++ b/api-playground/mdx/configuration.mdx @@ -40,7 +40,7 @@ To generate pages for API endpoints using `MDX`, configure your API settings in Each API endpoint page should have a corresponding `MDX` file. At the top of each file, define `title` and `api`: - ```md + ```mdx --- title: 'Create new user' api: 'POST https://api.mintlify.com/user' @@ -61,11 +61,12 @@ To generate pages for API endpoints using `MDX`, configure your API settings in You can override the globally-defined display mode for the API playground per page by adding `playground` at the top of the `MDX` file: - ```md + ```mdx --- title: 'Create new user' api: 'POST https://api.mintlify.com/user' playground: 'none' + --- ``` @@ -95,7 +96,7 @@ A page's authentication method will override a global method if both are set. } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "bearer" @@ -118,7 +119,7 @@ authMethod: "bearer" } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "basic" @@ -142,7 +143,7 @@ authMethod: "basic" } ``` -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "key" @@ -156,7 +157,7 @@ authMethod: "key" The `none` authentication method is useful to disable authentication on a specific endpoint after setting a default in docs.json. -```md Page Metadata +```mdx Page Metadata --- title: "Your page title" authMethod: "none" diff --git a/api-playground/openapi-setup.mdx b/api-playground/openapi-setup.mdx index 58bb4348..964ce548 100644 --- a/api-playground/openapi-setup.mdx +++ b/api-playground/openapi-setup.mdx @@ -162,7 +162,7 @@ If you want to reference an external OpenAPI file, add the file's URL to your `d -```md Example +```mdx Example --- title: "Get users" description: "Returns all plants from the system that the user has access to" @@ -172,7 +172,7 @@ version: "1.0" --- ``` -```md Format +```mdx Format --- title: "title of the page" description: "description of the page" @@ -225,14 +225,14 @@ You can create individual pages for any OpenAPI schema defined in an OpenAPI doc -```md Example +```mdx Example --- openapi-schema: OrderItem --- ``` -```md Format +```mdx Format --- openapi-schema: "schema-key" --- diff --git a/api-playground/overview.mdx b/api-playground/overview.mdx index f0ea8198..d3c6e36b 100644 --- a/api-playground/overview.mdx +++ b/api-playground/overview.mdx @@ -25,7 +25,7 @@ We recommend generating your API playground from an OpenAPI specification. See [ Make sure that your OpenAPI specification file is valid using the [Swagger Editor](https://editor.swagger.io/) or [Mint CLI](https://www.npmjs.com/package/mint). - ``` {2} + ```bash {2} /your-project |- docs.json |- openapi.json diff --git a/api-playground/troubleshooting.mdx b/api-playground/troubleshooting.mdx index 6340a04b..9f9c5c7a 100644 --- a/api-playground/troubleshooting.mdx +++ b/api-playground/troubleshooting.mdx @@ -37,7 +37,7 @@ If your API pages aren't displaying correctly, check these common configuration Here's an example of how things might go wrong: - ```md get-user.mdx + ```mdx get-user.mdx --- openapi: "GET /users/{id}/" --- @@ -56,7 +56,7 @@ If your API pages aren't displaying correctly, check these common configuration in the `openapi` field, ensure the filename is correct. For example, if you have two OpenAPI documents `openapi/v1.json` and `openapi/v2.json`, your metadata might look like this: - ```md api-reference/v1/users/get-user.mdx + ```mdx api-reference/v1/users/get-user.mdx --- openapi: "v1 GET /users/{id}" --- @@ -73,4 +73,4 @@ If your API pages aren't displaying correctly, check these common configuration likely require you to configure CORS on your server, as these requests will now come directly from your users' browsers. - \ No newline at end of file + diff --git a/authentication-personalization/overview.mdx b/authentication-personalization/overview.mdx index 6d882eb4..bd71a319 100644 --- a/authentication-personalization/overview.mdx +++ b/authentication-personalization/overview.mdx @@ -125,7 +125,7 @@ Restrict which pages are visible to your users by adding `groups` fields to your Users will only see pages for `groups` that they are in. -```md +```mdx --- title: "Managing your users" description: "Adding and removing users from your organization" diff --git a/changelog.mdx b/changelog.mdx index f20381a7..ea656184 100644 --- a/changelog.mdx +++ b/changelog.mdx @@ -98,13 +98,13 @@ mode: "center" 1. Make sure your CLI is the latest version - ``` + ```bash npm i mint@latest -g ``` 1. In your docs repository, run - ``` + ```bash mint upgrade ``` @@ -230,7 +230,7 @@ mode: "center" sayHello(); ``` - ````md + ````mdx ```javascript Line Highlighting Example {1,3-5} const greeting = "Hello, World!"; function sayHello() { @@ -461,4 +461,4 @@ mode: "center" - Snippets V2: We now support fully reusable components and variables for snippets. - Open-source MDX Engine: We've exposed two APIs—getCompiledMdx and MDXComponent—so you can access Mintlify markdown and code syntax highlighting. [Contributions to the project](https://github.com/mintlify/mdx) are welcome. - AI Chat Insights: Segment chat history by date and increase AI Chat quota from the dashboard, and see how often a specific query appears. - \ No newline at end of file + diff --git a/code.mdx b/code.mdx index 8261e1cb..c99251a9 100644 --- a/code.mdx +++ b/code.mdx @@ -10,7 +10,7 @@ icon: "code" To denote a `word` or `phrase` as code, enclose it in backticks (\`). -``` +```mdx To denote a `word` or `phrase` as code, enclose it in backticks (`). ``` @@ -26,7 +26,7 @@ class HelloWorld { } ``` -````md +````mdx ```java HelloWorld.java class HelloWorld { public static void main(String[] args) { @@ -48,7 +48,7 @@ class HelloWorld { } ``` -````md +````mdx ```java class HelloWorld { public static void main(String[] args) { @@ -165,7 +165,7 @@ Add a title after the programming language to set the name of your code example. const hello = "world"; ``` -````md Code Block Example +````mdx Code Block Example ```javascript Code Block Example const hello = "world"; ``` @@ -183,7 +183,7 @@ function sayHello() { sayHello(); ``` -````md +````mdx ```javascript Line Highlighting Example {1,3-5} const greeting = "Hello, World!"; function sayHello() { @@ -287,7 +287,7 @@ if __name__ == "__main__": main() ``` -````md +````mdx ```javascript Expandable Example [expandable] const greeting = "Hello, World!"; function sayHello() { diff --git a/components/accordions.mdx b/components/accordions.mdx index 2427d39b..18379a4c 100644 --- a/components/accordions.mdx +++ b/components/accordions.mdx @@ -17,7 +17,7 @@ icon: "chevron-down" -````jsx Accordion Example +````mdx Accordion Example You can put any content in here, including other components, like code: @@ -31,7 +31,7 @@ icon: "chevron-down" ```` -````jsx Accordion Group Example +````mdx Accordion Group Example You can put other components inside Accordions. diff --git a/components/callouts.mdx b/components/callouts.mdx index 20e392a5..ba77c67c 100644 --- a/components/callouts.mdx +++ b/components/callouts.mdx @@ -8,31 +8,31 @@ Callouts can be styled as a Note, Warning, Info, Tip, or Check: This adds a note in the content -```jsx +```mdx This adds a note in the content ``` This raises a warning to watch out for -```jsx +```mdx This raises a warning to watch out for ``` This draws attention to important information -```jsx +```mdx This draws attention to important information ``` This suggests a helpful tip -```jsx +```mdx This suggests a helpful tip ``` This brings us a checked status -```jsx +```mdx This brings us a checked status ``` @@ -44,8 +44,8 @@ Callouts can be styled as a Note, Warning, Info, Tip, or Check: -```jsx Callout Example +```mdx Callout Example This adds a note in the content ``` - \ No newline at end of file + diff --git a/components/cards.mdx b/components/cards.mdx index 8b25fc39..7ee626e7 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -10,14 +10,14 @@ icon: 'square-mouse-pointer' - ```jsx Card Example + ```mdx Card Example This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page. ``` -```jsx Image Card Example +```mdx Image Card Example Here is an example of a card with an image @@ -57,7 +57,7 @@ You can customize the CTA and whether or not to display the arrow on the card. B - ```jsx Card Example + ```mdx Card Example ` component around them. Every Code Block must have a filename because we use the names for the tab buttons. @@ -30,7 +30,7 @@ class HelloWorld { -````md Code Group Example +````mdx Code Group Example ```javascript helloWorld.js @@ -51,4 +51,5 @@ class HelloWorld { ```` + diff --git a/components/columns.mdx b/components/columns.mdx index 279926b2..67903602 100644 --- a/components/columns.mdx +++ b/components/columns.mdx @@ -18,7 +18,7 @@ The `Columns` component lets you group multiple `Card` components together. It's -```jsx Card Group Example +```mdx Card Group Example Neque porro quisquam est qui dolorem ipsum quia dolor sit amet diff --git a/components/examples.mdx b/components/examples.mdx index a8d61282..0a436f71 100644 --- a/components/examples.mdx +++ b/components/examples.mdx @@ -15,7 +15,7 @@ The `` component works similar to [CodeGroup](/components/code-g Please set a name on every code block you put inside RequestExample. -````md RequestExample Example +````mdx RequestExample Example ```bash Request @@ -32,7 +32,7 @@ Please set a name on every code block you put inside RequestExample. The `` component is the same as `` but will show up underneath it. -````md ResponseExample Example +````mdx ResponseExample Example ```json Response diff --git a/components/expandables.mdx b/components/expandables.mdx index 3d2f1502..431048ca 100644 --- a/components/expandables.mdx +++ b/components/expandables.mdx @@ -20,7 +20,7 @@ icon: 'list-tree' -```jsx Expandable Example +```mdx Expandable Example diff --git a/components/fields.mdx b/components/fields.mdx index 196fae39..99d0a2c1 100644 --- a/components/fields.mdx +++ b/components/fields.mdx @@ -16,19 +16,19 @@ A `ParamField` component is used to define the parameters for your APIs or SDKs. -```jsx Path Example +```mdx Path Example An example of a parameter field ``` -```jsx Body Example +```mdx Body Example The age of the user. Cannot be less than 0 ``` -```jsx Response Example +```mdx Response Example A response field example @@ -82,7 +82,7 @@ The `` component is designed to define the return values of an AP A response field example -```jsx +```mdx A response field example diff --git a/components/frames.mdx b/components/frames.mdx index 3532e173..fdcc755c 100644 --- a/components/frames.mdx +++ b/components/frames.mdx @@ -26,13 +26,13 @@ You can add additional context to an image using the optional `caption` prop. -```jsx Frame +```mdx Frame ``` -```jsx Frame with Captions +```mdx Frame with Captions diff --git a/components/icons.mdx b/components/icons.mdx index 2baab4df..9afef6ba 100644 --- a/components/icons.mdx +++ b/components/icons.mdx @@ -8,7 +8,7 @@ icon: 'flag' -```jsx Icon Example +```mdx Icon Example ``` diff --git a/components/mermaid-diagrams.mdx b/components/mermaid-diagrams.mdx index 3a3b34ca..100fec13 100644 --- a/components/mermaid-diagrams.mdx +++ b/components/mermaid-diagrams.mdx @@ -6,7 +6,7 @@ icon: 'waypoints' -````md Mermaid Flowchart Example +````mdx Mermaid Flowchart Example ```mermaid flowchart LR subgraph subgraph1 @@ -56,7 +56,7 @@ For a complete list of diagrams supported by Mermaid, check out their [website]( To create a flowchart, you can write the Mermaid flowchart inside a Mermaid code block. -````md +````mdx ```mermaid // Your mermaid code block here ``` diff --git a/components/panel.mdx b/components/panel.mdx index 7fdcbed6..6a9febc5 100644 --- a/components/panel.mdx +++ b/components/panel.mdx @@ -10,7 +10,7 @@ If a page has a `` component, any [RequestExample](/components/examples#r The components in a `` will replace a page's table of contents. -````md +````mdx Pin info to the side panel. Or add any other component. diff --git a/components/responses.mdx b/components/responses.mdx index 634554f5..e692bfe8 100644 --- a/components/responses.mdx +++ b/components/responses.mdx @@ -9,7 +9,7 @@ The `` component is designed to define the return values of an AP A response field example -```jsx +```mdx A response field example @@ -47,10 +47,10 @@ The `` component is designed to define the return values of an AP -```jsx Response Field Example +```mdx Response Field Example A response field example ``` - \ No newline at end of file + diff --git a/components/steps.mdx b/components/steps.mdx index dd4fe6b9..fa0087db 100644 --- a/components/steps.mdx +++ b/components/steps.mdx @@ -20,7 +20,7 @@ Steps are the best way to display a series of actions of events to your users. Y -```jsx Steps Example +```mdx Steps Example These are instructions or content that only pertain to the first step. diff --git a/components/tabs.mdx b/components/tabs.mdx index 2b772eda..42988439 100644 --- a/components/tabs.mdx +++ b/components/tabs.mdx @@ -28,7 +28,7 @@ You can add any number of tabs, and other components inside of tabs. -````jsx Tabs Example +````mdx Tabs Example ☝️ Welcome to the content that you can only see inside the first Tab. diff --git a/components/tooltips.mdx b/components/tooltips.mdx index 81409661..0f305684 100644 --- a/components/tooltips.mdx +++ b/components/tooltips.mdx @@ -10,7 +10,7 @@ Tooltips are a way to show a definition when you hover over text. -```jsx Tooltip Example +```mdx Tooltip Example Hover over me ``` diff --git a/components/update.mdx b/components/update.mdx index a62fd8eb..52719e23 100644 --- a/components/update.mdx +++ b/components/update.mdx @@ -25,7 +25,7 @@ The `Update` component is used to keep track of changes and updates. ### How to use - ```md + ```mdx This is how you use a changelog with a label and a description. @@ -60,7 +60,7 @@ The `Update` component is used to keep track of changes and updates. -```jsx Update Example +```mdx Update Example This is how you use a changelog with a label and a description. diff --git a/guides/hidden-pages.mdx b/guides/hidden-pages.mdx index 9c4441c0..e2460282 100644 --- a/guides/hidden-pages.mdx +++ b/guides/hidden-pages.mdx @@ -22,9 +22,9 @@ Some navigation elements like sidebars, dropdowns, and tabs may appear empty or By default, hidden pages are excluded from indexing for search engines and internal search within your docs. To include hidden pages in search results, add this setting to your `docs.json`: -``` +```json "seo" { - "indexing": all + "indexing": "all" } ``` diff --git a/guides/migration.mdx b/guides/migration.mdx index 787b9d02..464e7bcd 100644 --- a/guides/migration.mdx +++ b/guides/migration.mdx @@ -101,7 +101,7 @@ The commands will automatically detect the framework. First, install the package: -``` +```bash npm i @mintlify/scraping ``` @@ -122,7 +122,7 @@ npx @mintlify/scraping@latest page [url] Global installation: -``` +```bash npm install @mintlify/scraping@latest -g ``` @@ -143,9 +143,9 @@ mintlify-scrape page [url] Provide the relative path or URL to the OpenAPI file to generate frontmatter files for each endpoint. -``` +```bash mintlify-scrape openapi-file [openApiFilename] -w, --writeFiles Whether or not to write the frontmatter files [boolean] [default: true] -o, --outDir The folder in which to write any created frontmatter files [string] -``` \ No newline at end of file +``` diff --git a/image-embeds.mdx b/image-embeds.mdx index 43c97fc4..d4670fbd 100644 --- a/image-embeds.mdx +++ b/image-embeds.mdx @@ -17,7 +17,7 @@ Images are the most common way to add visual content to your documentation. The [markdown syntax](https://www.markdownguide.org/basic-syntax/#images) lets you add images using the following code -```md +```mdx ![title](/path/image.jpg) ``` diff --git a/installation.mdx b/installation.mdx index 9dce5436..d2e4c265 100644 --- a/installation.mdx +++ b/installation.mdx @@ -97,7 +97,7 @@ mint dev --port 3333 If you attempt to run on a port that's already in use, it will use the next available port: -```md +```mdx Port 3000 is already in use. Trying 3001 instead. ``` @@ -154,4 +154,4 @@ If you use JetBrains, we recommend the [MDX IntelliJ IDEA plugin](https://plugin Solution: Go to the root of your device and delete the ~/.mintlify folder. Afterwards, run `mint dev` again. - \ No newline at end of file + diff --git a/list-table.mdx b/list-table.mdx index 51ab4957..6a39401b 100644 --- a/list-table.mdx +++ b/list-table.mdx @@ -16,7 +16,7 @@ To create an ordered list, add line items with numbers followed by periods 3. Third item 4. Fourth item -```md +```mdx 1. First item 2. Second item 3. Third item @@ -32,7 +32,7 @@ To create an unordered list, add dashes (`-`), asterisks (`*`), or plus signs (` - Third item - Fourth item -```md +```mdx - First item - Second item - Third item @@ -49,7 +49,7 @@ Add indents on list items to nest them - Additional item - Third item -```md +```mdx - First item - Second item - Additional item @@ -77,10 +77,10 @@ Add indents on list items to nest them To add a table, use three or more hyphens (`---`) to create each column's header, and use pipes (`|`) to separate each column. For compatibility, you should also add a pipe on either end of the row. -```md +```mdx | Property | Description | | -------- | ------------------------------------- | | Name | Full name of user | | Age | Reported age | | Joined | Whether the user joined the community | -``` \ No newline at end of file +``` diff --git a/navigation.mdx b/navigation.mdx index 22cbd614..cca3216d 100644 --- a/navigation.mdx +++ b/navigation.mdx @@ -202,7 +202,7 @@ Anchors that strictly contain external links can be achieved using the `global` } ] }, - "tabs": [...] + "tabs": /*...*/ } ``` diff --git a/pages.mdx b/pages.mdx index 306c30fb..3bafbb67 100644 --- a/pages.mdx +++ b/pages.mdx @@ -10,7 +10,7 @@ Each page is an MDX file that should begin with `---` at the start and end. This For example, you can define the title for this page as follows. -```jsx +```mdx --- title: "Your title goes here" --- @@ -20,7 +20,7 @@ title: "Your title goes here" You can add a description that shows the summary of the page under the title with the `description` metadata. -```jsx +```mdx --- description: "Your description goes here" --- @@ -30,7 +30,7 @@ description: "Your description goes here" If you want to show a different title in the navigation, you can set the `sidebarTitle` metadata. This is useful if your title is long and you want something shorter in the navigation links. -```jsx +```mdx --- title: "Your very long page title you want to shorten" sidebarTitle: "Short title" @@ -41,7 +41,7 @@ sidebarTitle: "Short title" You can set an icon for your sidebar item like the one for this page. You can set icons by using the `icon` metadata. -```jsx +```mdx --- title: "Code Block" icon: "code" @@ -52,7 +52,7 @@ You can set icons from [Font Awesome](https://fontawesome.com/icons) and [Lucide You can also set the icon type for Font Awesome icons (optional). If not set, the icon type will be regular. -```jsx +```mdx --- iconType: "solid" --- @@ -62,7 +62,7 @@ iconType: "solid" Add tags to label specific pages. Tags display in the sidebar next to page titles. -```jsx +```mdx --- tag: "NEW" --- @@ -75,7 +75,7 @@ must set an `api` or `openapi` property in the page metadata. Learn more about API pages by visiting the [API page guides](/api-playground/overview). -```jsx +```mdx --- openapi: "GET /endpoint" --- @@ -92,7 +92,7 @@ will use the default settings. If no specific mode is given, the page will default to standard settings. This means the page will display the default table of contents and other standard elements. -```jsx +```mdx --- title: "Default page title" --- @@ -104,7 +104,7 @@ In Wide Mode, you can hide the table of contents (ToC) on the right side of the particularly useful if your page doesn’t have any headings or if you prefer to utilize the extra horizontal space for more content. -```jsx +```mdx --- mode: "wide" --- @@ -117,7 +117,7 @@ This mode offers a blank canvas, which is ideal for creating a "landing page" or you want a clean, distraction-free environment. -```jsx +```mdx --- mode: "custom" --- @@ -129,7 +129,7 @@ Center Mode removes the sidebar and the table of contents, and centers the page or any page where you want to focus on the content. -```jsx +```mdx --- mode: "center" --- @@ -140,7 +140,7 @@ mode: "center" If you want the sidebar to open an external URL, you can set the `url` metadata in any page. -```jsx +```mdx --- title: "Page that goes to external link" url: "https://www.npmjs.com/package/mint" @@ -154,7 +154,7 @@ them into your page's metadata. Note that meta tags with colons need to be wrapped in quotes. -```jsx +```mdx --- "twitter:image": "/images/your-photo.jpg" --- @@ -168,7 +168,7 @@ You can also enhance a specific page's discoverability in the built-in search by providing `keywords` in your metadata. These keywords won't appear as part of the page content or in search results, but users that search for them will be shown the page as a result. -```jsx +```mdx --- keywords: ['search', 'indexing'] --- diff --git a/quickstart.mdx b/quickstart.mdx index 981c33cc..75c004c5 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -109,7 +109,7 @@ After you set up your environment, you can start editing your documentation file Open your repository created during onboarding, find the `introduction.mdx` file, and find the top of the file: -```jsx introduction.mdx +```mdx introduction.mdx --- title: "Introduction" description: "This is the introduction to the documentation" @@ -118,7 +118,7 @@ description: "This is the introduction to the documentation" Update the `title` field to `"Hello World"`. -```jsx introduction.mdx {2} +```mdx introduction.mdx {2} --- title: "Hello World" description: "This is the introduction to the documentation" @@ -252,4 +252,4 @@ If you encounter issues during the setup process, check these common troubleshoo -Need more help? [Contact our Support Team](https://mintlify.com/docs/support). \ No newline at end of file +Need more help? [Contact our Support Team](https://mintlify.com/docs/support). diff --git a/react-components.mdx b/react-components.mdx index b9202106..7b111636 100644 --- a/react-components.mdx +++ b/react-components.mdx @@ -19,7 +19,7 @@ You can build components directly in your MDX files using [React hooks](https:// Here's a basic example of a counter component: -```jsx +```mdx export const Counter = () => { const [count, setCount] = useState(0); @@ -36,7 +36,7 @@ export const Counter = () => { The `Counter` component can then be used in your MDX files like this: -```jsx +```mdx ``` @@ -48,7 +48,7 @@ And the component will be rendered as a React component in the MDX file. Just like in regular React, you can import components from other files. -```jsx +```mdx import { ColorGenerator } from "/snippets/color-generator.mdx" ``` @@ -58,7 +58,7 @@ import { ColorGenerator } from "/snippets/color-generator.mdx" After importing the component, you can use it in your MDX files like this: -```jsx +```mdx ``` @@ -68,7 +68,7 @@ Learn more about [reusable snippets](/reusable-snippets). You can also build much more complex components. Here's an example of a color generator component that uses multiple React hooks: -```jsx /snippets/color-generator.mdx [expandable] +```mdx /snippets/color-generator.mdx [expandable] export const ColorGenerator = () => { const [hue, setHue] = useState(180) const [saturation, setSaturation] = useState(50) @@ -183,7 +183,7 @@ export const ColorGenerator = () => { The above component can then be used in your MDX files like this: -```jsx +```mdx ``` @@ -207,4 +207,4 @@ And the component will be rendered as a React component in the MDX file. - **Reduce Re-renders**: Break large components into smaller ones to prevent cascading re-renders - **Lazy Loading**: Consider lazy loading complex components to improve initial page load time - \ No newline at end of file + diff --git a/settings.mdx b/settings.mdx index a157567a..fe236af5 100644 --- a/settings.mdx +++ b/settings.mdx @@ -786,7 +786,7 @@ It is advised to include the following schema reference at the top of your docs. ```json { - "$schema": "https://mintlify.com/docs.json", - ... + "$schema": "https://mintlify.com/docs.json" + /*...*/ } -``` \ No newline at end of file +``` diff --git a/settings/custom-domain.mdx b/settings/custom-domain.mdx index 24fa7f16..dc5d8a8b 100644 --- a/settings/custom-domain.mdx +++ b/settings/custom-domain.mdx @@ -40,7 +40,7 @@ If Vercel happens to be your domain provider, you will have to add a verificatio 1. Proceed to your domain's DNS settings on your domain provider's website. 2. Create a new DNS entry, inputting the following values: -``` +```bash CNAME | docs | cname.vercel-dns.com. ``` diff --git a/settings/seo.mdx b/settings/seo.mdx index 0909cbb3..47b6054d 100644 --- a/settings/seo.mdx +++ b/settings/seo.mdx @@ -24,7 +24,7 @@ You can set default meta tags by adding the `metadata` field to your `docs.json` Add your meta tags to the page's metadata like so: -```md +```mdx --- title: 'Your Example Page Title' 'og:image': 'link to your meta tag image' diff --git a/text.mdx b/text.mdx index e72d532e..bb71c9d8 100644 --- a/text.mdx +++ b/text.mdx @@ -8,7 +8,7 @@ icon: 'heading' Best used for section headers. -```md +```mdx ## Titles ``` @@ -16,7 +16,7 @@ Best used for section headers. Best used for subsection headers. -```md +```mdx ### Subtitles ``` @@ -61,7 +61,7 @@ To create a blockquote, add a `>` in front of a paragraph. > Dorothy followed her through many of the beautiful rooms in her castle. -```md +```mdx > Dorothy followed her through many of the beautiful rooms in her castle. ``` @@ -71,7 +71,7 @@ To create a blockquote, add a `>` in front of a paragraph. > > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. -```md +```mdx > Dorothy followed her through many of the beautiful rooms in her castle. > > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. @@ -85,7 +85,7 @@ Equations on their own line can be created with double dollar signs (\$\$): $$\exists \, x \notin [0,1]$$ -```md +```mdx $$\exists \, x \notin [0,1]$$ ``` @@ -97,7 +97,7 @@ Markdown syntax also recognizes a double enter in your MDX as a linebreak.
``` -```md +```mdx Paragraph 1 Paragraph 2 From a7ded9dd56d8c23532452c0069d251b4d3660e96 Mon Sep 17 00:00:00 2001 From: Ricardo Nunez <113212961+ricardonunez-io@users.noreply.github.com> Date: Tue, 10 Jun 2025 19:09:51 -0700 Subject: [PATCH 2/2] Camel case inline code --- image-embeds.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/image-embeds.mdx b/image-embeds.mdx index d4670fbd..3fe7df62 100644 --- a/image-embeds.mdx +++ b/image-embeds.mdx @@ -36,7 +36,7 @@ To get more customizability with images, you can also use embeds to add images. ### Disable Image Zoom -To disable the default zoom on click for images, add the noZoom property to image embeds. +To disable the default zoom on click for images, add the `noZoom` property to image embeds. ```html @@ -131,7 +131,7 @@ To autoplay the video, use: Since Mintlify needs to adhere to the JSX syntax, double word attributes will need to -be written in camelCase: autoPlay, playsInline. +be written in camelCase such as `autoPlay` and `playsInline`. ## iFrames