<🏄/>

Theming

Use any theme from prism-react-renderer

Night Owl

import nightOwl from "prism-react-renderer/themes/nightOwl"
<CodeSurfer
title="Night Owl"
theme={nightOwl}
notes="⬇️"
code={require("!raw-loader!./snippets/night-owl.mdx")}
steps={[{ lines:[1, 5] }]}
/>

Duotone Dark

import duotoneDark from "prism-react-renderer/themes/duotoneDark"
<CodeSurfer
title="Duotone Dark"
theme={duotoneDark}
notes="⬇️"
code={require("!raw-loader!./snippets/duotone-dark.mdx")}
steps={[{ lines:[1, 5] }]}
/>

Duotone Light

import duotoneLight from "prism-react-renderer/themes/duotoneLight"
<CodeSurfer
title="Duotone Light"
theme={duotoneLight}
notes="⬇️"
code={require("!raw-loader!./snippets/duotone-light.mdx")}
steps={[{ lines:[1, 5] }]}
/>

Oceanic Next

import oceanicNext from "prism-react-renderer/themes/oceanicNext"
<CodeSurfer
title="Oceanic Next"
theme={oceanicNext}
notes="⬇️"
code={require("!raw-loader!./snippets/oceanic-next.mdx")}
steps={[{ lines:[1, 5] }]}
/>

Ultramin

import ultramin from "prism-react-renderer/themes/ultramin"
<CodeSurfer
title="Ultramin"
theme={ultramin}
notes="⬇️"
code={require("!raw-loader!./snippets/ultramin.mdx")}
steps={[{ lines:[1, 5] }]}
/>

Dracula

import dracula from "prism-react-renderer/themes/dracula"
<CodeSurfer
title="Dracula"
theme={dracula}
notes="⬇️"
code={require("!raw-loader!./snippets/dracula.mdx")}
steps={[{ lines:[1, 5] }]}
/>

🦄 Shades of Purple

import shadesOfPurple from "prism-react-renderer/themes/shadesOfPurple"
<CodeSurfer
title="🦄 Shades of Purple"
theme={shadesOfPurple}
notes="⬇️"
code={require("!raw-loader!./snippets/shades-of-purple.mdx")}
steps={[{ lines:[1, 5] }]}
/>

VS Dark

import vsDark from "prism-react-renderer/themes/vsDark"
<CodeSurfer
title="VS Dark"
theme={vsDark}
notes="⬇️"
code={require("!raw-loader!./snippets/vs-dark.mdx")}
steps={[{ lines:[1, 5] }]}
/>