Overview
Syntax-highlighted code block powered by highlight.js. Pass code as a string child. The language is auto-detected from the title file extension (e.g. "example.tsx" → TypeScript); falls back to TypeScript when unspecified.
Theme colours are controlled by CSS custom properties (--sh-* / --nxs-code-*) defined in nextjs-slides/styles.css. Override them in :root or .dark.
Props
Code string to highlight. Leading/trailing whitespace is trimmed automatically.
File name shown above the code block. Its extension determines the highlight language.
Additional CSS classes to apply to the wrapper element.
Supported Languages
SlideCode uses highlight.js with the following registered languages:
- JavaScript -
.js, .jsx
- TypeScript -
.ts, .tsx
- XML/HTML -
.xml, .html
Language detection:
- File extension in
title prop determines the language (e.g., "api.ts" → TypeScript)
.ts and .tsx extensions are mapped to typescript- Falls back to TypeScript when no extension is provided or language is unregistered
Usage Examples
Basic TypeScript
<SlideCode title="api.ts">{`export async function fetchData() {
return fetch('/api/data');
}`}</SlideCode>
React Component
<SlideCode title="Button.tsx">{`export function Button({ label }: { label: string }) {
return <button>{label}</button>;
}`}</SlideCode>
JavaScript Example
<SlideCode title="config.js">{`module.exports = {
port: 3000,
env: 'production'
};`}</SlideCode>
Without Title
<SlideCode>{`const greeting = "Hello, world!";
console.log(greeting);`}</SlideCode>
Custom Styling
<SlideCode
title="styles.css"
className="max-w-lg"
>{`.container {
max-width: 1200px;
margin: 0 auto;
}`}</SlideCode>
Implementation Details
Highlight Function
The internal highlightCode() function:
function highlightCode(code: string, lang?: string): string {
if (!lang) return hljs.highlight(code, { language: 'typescript' }).value;
const language = lang === 'ts' || lang === 'tsx' ? 'typescript' : lang;
const registered = hljs.getLanguage(language);
if (!registered)
return hljs.highlight(code, { language: 'typescript' }).value;
return hljs.highlight(code, { language }).value;
}
CSS Custom Properties
Override syntax highlighting colors in your CSS:
:root {
--nxs-code-bg: #f5f5f5;
--sh-keyword: #d73a49;
--sh-string: #032f62;
--sh-comment: #6a737d;
}
.dark {
--nxs-code-bg: #1e1e1e;
--sh-keyword: #569cd6;
--sh-string: #ce9178;
--sh-comment: #6a9955;
}
- SlideDemo - Live interactive component embed
- SlideList - Bullet-point list for structured content