Skip to content
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

Jump to bottom

Fix broken link #206

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix broken link #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81557cd
add guide for inline highlighting
souporserious Oct 15, 2024
2206305
Fix link
karlhorky Oct 15, 2024
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: 1 addition & 1 deletion apps/site/guides/01.mdx.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ In this example, the `MDXContent` component renders a string of MDX content with

If you're working with Next.js, configuring MDX with renoun is straightforward. We have a dedicated guide that walks you through the process of setting it up with your Next.js project.

To learn how to configure MDX with Next.js, check out the [Next.js Guide](/docs/frameworks/next).
To learn how to configure MDX with Next.js, check out the [Next.js Guide](/guides/next).

## Pre-configured Plugins

Expand Down
20 changes: 11 additions & 9 deletions packages/renoun/src/components/CodeInline.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
## Next.js MDX Inline Code
## MDX Inline Code

If you are using the `@renoun/mdx` package, you can also use the `MDXComponents` export to override the `pre` and `code` components in your project's `mdx-components.tsx` file:
When using MDX with the `rehypePlugins` from `renoun/mdx` you can prefix the inline code with a language similar to fenced code blocks. For example:

```tsx filename="02.mdx-components.tsx"
import { MDXComponents } from 'renoun/components'

export function useMDXComponents() {
return MDXComponents
}
```mdx
When using inline code `js console.log('Hello, World!')`, you can specify the language for syntax highlighting.
```

This properly forwards the MDX component props from the `code` component to the `CodeInline` component.
<Preview>

When using inline code `js console.log('Hello, World!')`, you can specify the language for syntax highlighting.

</Preview>

This will render the inline code with syntax highlighting based on the specified language.