Skip to content

Revert "Revert "Updated codeblock styling documentation with new theme options"" #1383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ethanpalm wants to merge 1 commit into from
Closed

Revert "Revert "Updated codeblock styling documentation with new theme options"" #1383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ Enable syntax highlighting by specifying the programming language after the open

We use [Shiki](https://shiki.style/) for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.

Customize code block themes globally using `styling.codeblocks` in your `docs.json` file. Set simple themes like `system` or `dark`, or configure custom [Shiki themes](https://shiki.style/themes) for light and dark modes. See [Settings](/settings#styling) for detailed configuration options.

```java
class HelloWorld {
public static void main(String[] args) {
Expand Down
2 changes: 2 additions & 0 deletions components/code-groups.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ class HelloWorld {

</CodeGroup>

Code groups inherit global styling from your `docs.json` file. Customize your theme using `styling.codeblocks`. See [Settings](/settings#styling) for configuration options.

## Creating code groups

To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.
Expand Down
48 changes: 46 additions & 2 deletions settings.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,52 @@
<ResponseField name="eyebrows" type="&quot;section&quot; | &quot;breadcrumbs&quot;">
The style of the page eyebrow. Choose `section` to show the section name or `breadcrumbs` to show the full navigation path. Defaults to `section`.
</ResponseField>
<ResponseField name="codeblocks" type="&quot;system&quot; | &quot;dark&quot;">
The theme of the code blocks. Choose `system` to match the site theme or `dark` for always dark code blocks. Defaults to `system`.
<ResponseField name="codeblocks" type="&quot;system&quot; | &quot;dark&quot; | object">
Code block theme configuration. Defaults to `"system"`.

**Simple options:**
- `"system"`: Match current site mode (light or dark)
- `"dark"`: Always use dark mode

**Custom theme configuration:**
Use an object to specify [Shiki themes](https://shiki.style/themes). Choose a single theme for both modes or separate themes for light and dark.

<Expandable title="codeblocks">
<ResponseField name="theme" type="string">
A single Shiki theme name to use for both light and dark modes.

```json
"styling": {
"codeblocks": {
"theme": "dracula"
}
}
```
</ResponseField>

<ResponseField name="themes" type="object">
Separate themes for light and dark modes.

<Expandable title="themes">
<ResponseField name="light" type="string" required>
A Shiki theme name for light mode.
</ResponseField>
<ResponseField name="dark" type="string" required>
A Shiki theme name for dark mode.
</ResponseField>
```json
"styling": {
"codeblocks": {
"themes": {
"light": "github-light",
"dark": "github-dark"
}
}
}
```
</Expandable>
</ResponseField>
</Expandable>
</ResponseField>
</Expandable>
</ResponseField>
Expand Down Expand Up @@ -175,7 +219,7 @@
Font weight, such as 400, 700. Variable fonts support precise weights such as 550.
</ResponseField>
<ResponseField name="source" type="string (uri)">
URL to your font source, such as https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.

Check warning on line 222 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L222 

In general, use active voice instead of passive voice ('are loaded').

Check warning on line 222 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L222 

In general, use active voice instead of passive voice ('is needed').
</ResponseField>
<ResponseField name="format" type="&quot;woff&quot; | &quot;woff2&quot;">
Font file format.
Expand Down Expand Up @@ -451,7 +495,7 @@

<Expandable title="Interaction">
<ResponseField name="drilldown" type="boolean">
Control automatic navigation behavior when selecting navigation groups. Set to `true` to force navigation to the first page when a navigation group is expanded. Set to `false` to prevent navigation and only expand or collapse the group. Leave unset to use the theme's default behavior.

Check warning on line 498 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L498 

In general, use active voice instead of passive voice ('is expanded').
</ResponseField>
</Expandable>
</ResponseField>
Expand Down Expand Up @@ -528,7 +572,7 @@
Destination path to redirect to. Example: `/new-page`
</ResponseField>
<ResponseField name="permanent" type="boolean">
Whether to use a permanent redirect (301). Defaults to `true`.

Check warning on line 575 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L575 

Use parentheses judiciously.
</ResponseField>
</Expandable>
</ResponseField>
Expand All @@ -539,13 +583,13 @@
<Expandable title="Contextual">
<ResponseField name="options" type="array of &quot;copy&quot; | &quot;view&quot; | &quot;chatgpt&quot; | &quot;claude&quot; | &quot;perplexity&quot; | &quot;mcp&quot; | &quot;cursor&quot; | &quot;vscode&quot;" required>
Actions available in the contextual menu. The first option appears as the default.
- `copy`: Copy the current page as Markdown to the clipboard.

Check warning on line 586 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L586 

': C' should be in lowercase.
- `view`: View the current page as Markdown in a new tab.

Check warning on line 587 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L587 

': V' should be in lowercase.
- `chatgpt`: Send the current page content to ChatGPT.

Check warning on line 588 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L588 

': S' should be in lowercase.
- `claude`: Send the current page content to Claude.
- `perplexity`: Send the current page content to Perplexity.
- `mcp`: Copies your MCP server URL to the clipboard.
- `cursor`: Installs your hosted MCP server in Cursor.

Check warning on line 592 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L592 

': I' should be in lowercase.
- `vscode`: Installs your hosted MCP server in VSCode.

<img src="/images/page-context-menu.png" alt="Contextual Menu" className="rounded-xl" />
Expand All @@ -558,7 +602,7 @@
</Expandable>
</ResponseField>

### API Configurations

Check warning on line 605 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L605 

'API Configurations' should use sentence-style capitalization.

<ResponseField name="api" type="object">
API documentation and interactive playground settings.
Expand Down Expand Up @@ -654,10 +698,10 @@
</Expandable>
</ResponseField>

### SEO and search

Check warning on line 701 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L701 

Spell out 'SEO', if it's unfamiliar to the audience.

Check warning on line 701 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L701 

'SEO and search' should use sentence-style capitalization.

<ResponseField name="seo" type="object">
SEO indexing configurations.

Check warning on line 704 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L704 

Spell out 'SEO', if it's unfamiliar to the audience.

<Expandable title="Seo">
<ResponseField name="metatags" type="object">
Expand Down Expand Up @@ -893,7 +937,7 @@
404 "Page not found" error handling.
<Expandable title="404">
<ResponseField name="redirect" type="boolean">
Whether to automatically redirect to the home page when a page is not

Check warning on line 940 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L940 

Use 'isn't' instead of 'is not'.
found.
</ResponseField>
<ResponseField name="title" type="string">
Expand Down Expand Up @@ -1449,7 +1493,7 @@

</CodeGroup>

If you already have the CLI installed, make sure it is up to date:

Check warning on line 1496 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L1496 

Use 'command-line tool' instead of 'CLI'.

Check warning on line 1496 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L1496 

Use 'it's' instead of 'it is'.

```bash
mint update
Expand All @@ -1463,7 +1507,7 @@
mint upgrade
```

This command will create a `docs.json` file from your existing `mint.json`. Review the generated file to ensure all settings are correct.

Check warning on line 1510 in settings.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

settings.mdx#L1510 

Avoid using 'will'.
</Step>
<Step title="Delete your mint.json file">
After verifying your `docs.json` is configured properly, you can safely delete your old `mint.json` file.
Expand Down
Loading