Using MDX Code Highlighting Feature
An example indicator of the code highlighting feature.
Code block with highlight lines
```jsx:providers.tsx {4,9} import { HeroUIProvider } from '@heroui/react'; import { ToastProvider } from '@heroui/toast'; export default function Providers({ children }) { return ( <HeroUIProvider> <ToastProvider /> {children} </HeroUIProvider> ); } ```
providers.tsx
import { HeroUIProvider } from '@heroui/react'; import { ToastProvider } from '@heroui/toast'; export default function Providers({ children }) { return ( <HeroUIProvider> <ToastProvider /> {children} </HeroUIProvider> ); }
Use codeBlock to highlight code
```codeBlock bash ✅ Your project has no detected issues. ```
Or, if issues are detected:
```codeBlock bash ❌ Your project has 1 issue that requires attention ```
Use diff to highlight code
```diff-jsx:filename.tsx showLineNumbers <Popover showArrow backdrop="opaque" placement="right" classNames={{ - base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50", - arrow: "bg-default-200", + base: [ + // the "before" pseudo element is now the popover' arrow + "before:bg-default-200" + ], + content: [ // now we need to use the "content" slot to actually modify the popover' content styles + "py-3 px-4 border border-default-200", + "bg-gradient-to-br from-white to-default-300", + "dark:from-default-100 dark:to-default-50", ], }} > ... </Popover> ```
filename.tsx
<Popover showArrow backdrop="opaque" placement="right" classNames={{ - base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50", - arrow: "bg-default-200", + base: [ + // the "before" pseudo element is now the popover' arrow + "before:bg-default-200" + ], + content: [ // now we need to use the "content" slot to actually modify the popover' content styles + "py-3 px-4 border border-default-200", + "bg-gradient-to-br from-white to-default-300", + "dark:from-default-100 dark:to-default-50", ], }} > ... </Popover>
Community
We're excited to see the community adopt Hyperse-io, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
