mdx-deck-code-surfer

React component for scrolling, zooming and highlighting code.


Keywords
mdx, mdx-deck, slides, react, code, highlight, token, prism, ractjs, syntax-highlighting, markdown, syntax, deck, keynote, presentation
License
MIT
Install
npm install mdx-deck-code-surfer@0.5.5

Documentation

Code Surfer <🏄/>

React component for scrolling, zooming and highlighting code.


Code Surfer v3 is coming soon!
See issue #70


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

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-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:

Related / Credits

Contributing

Release new versions with:

$ yarn build:packages
$ npx lerna publish

License

Released under MIT license.