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
Add the dependency (and raw-loader if you want to load the code from a file):
$ yarn add --dev mdx-deck-code-surfer raw-loaderAnd 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:
Release new versions with:
$ yarn build:packages
$ npx lerna publishReleased under MIT license.