` is nested within a `` tag,
if not, it's considered inline code and the `inline` prop is set to `true`.
It's passed as a `rehypePlugin` to `react-markdown`:
```tsx
import ReactMarkdown from "react-markdown";
import { rehypeInlineCodeProperty } from "react-shiki";
{markdown}
;
```
Now `inline` can be accessed as a prop in the `code` component:
```tsx
const CodeHighlight = ({
inline,
className,
children,
node,
...props
}: CodeHighlightProps): JSX.Element => {
const match = className?.match(/language-(\w+)/);
const language = match ? match[1] : undefined;
const code = String(children).trim();
return !inline ? (
{code}
) : (
{code}
);
};
```
## Performance
### Throttling Real-time Highlighting
For improved performance when highlighting frequently changing code:
```tsx
// With the component
{code.trim()}
// With the hook
const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
delay: 150,
});
```
### Output Format Optimization
`react-shiki` provides two output formats to balance safety and performance:
**React Nodes (Default)** - Safer, no `dangerouslySetInnerHTML` required
```tsx
// Hook
const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark");
// Component
{code}
```
**HTML String** - 15-45% faster performance
```tsx
// Hook (returns HTML string, use dangerouslySetInnerHTML to render)
const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
outputFormat: 'html'
});
// Component (automatically uses dangerouslySetInnerHTML when outputFormat is 'html')
{code}
```
Choose HTML output when performance is critical and you trust the code source. Use the default React output when handling untrusted content or when security is the primary concern.
---
Made with ❤️ by [Bassim (AVGVSTVS96)](https://github.com/AVGVSTVS96)