Code Surfer <🏄/>

React component for scrolling, zooming and highlighting code.

How to use with mdx-deck

(demo)

Add the dependency:

$ yarn add mdx-deck-code-surfer

And then use it from your .mdx:

import { CodeSurfer } from "mdx-deck-code-surfer";

<CodeSurfer
  title="Some Title"
  notes="Start with this note"
  code={require("raw-loader!./my-snippet.jsx")}
  showNumbers={true}
  steps={[
    { lines: [6], notes: "Note for the first step" },
    { range: [5, 9] },
    { tokens: { 9: [3, 4, 5] }, notes: "Note for the third step" }
  ]}
/>

Related / Credits

• mdx-deck
• prism-react-renderer
• spectacle-code-slide
• prism

License

Released under MIT license.