Using MDX Code Highlighting Feature
An example indicator of the code highlighting feature.
Code block with highlight lines
```jsx:providers.tsx {4,9}
import { Toast } from '@heroui/react';
export default function Providers({ children }) {
return (
<>
<Toast.Provider />
{children}
</>
);
}
```
providers.tsx
import { Toast } from '@heroui/react';
export default function Providers({ children }) {
return (
<>
<Toast.Provider />
{children}
</>
);
}
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!
