Code Surfer <🏄/>

React component for scrolling, zooming and highlighting code.

If you like this project consider backing my open source work on Patreon!
And follow @pomber on twitter for updates.

Version 2 of Code Surfer is coming soon!
Check the demos here and here. And the v2 PR.
You can try it now with npm init code-surfer-deck.

How to use with mdx-deck

(demo)

Add the dependency (and raw-loader if you want to load the code from a file):

$ yarn add --dev mdx-deck-code-surfer raw-loader

And then use it from your .mdx:

---  import { CodeSurfer } from "mdx-deck-code-surfer"  <CodeSurfer   title="Some Title"   code={require("!raw-loader!./my-snippet.js")}   lang="javascript"   showNumbers={false}   dark={false}   steps={[     { notes: "Start with this note"},     { lines: [6], notes: "Note for the first step" },     { range: [5, 9] },     { tokens: { 9: [3, 4, 5] }, notes: "Note for the third step" }   ]} />  ---

A list of available languages can be found here and it will default to jsx

More options:

• Theming

Related / Credits

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

Contributing

Release new versions with:

$ yarn build:packages $ npx lerna publish

License

Released under MIT license.