Skip to content
Rad code slides <πŸ„/>
JavaScript HTML Dockerfile Python
Branch: master
Clone or download
Latest commit 9ebcba7 Jul 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.forkbox Use dockerhub image Aug 23, 2018
.github Update FUNDING.yml Jun 17, 2019
fixtures v0.5.5 Jan 21, 2019
other Add readme and license Aug 25, 2018
packages v0.5.5 Jan 21, 2019
website v0.5.0 Oct 3, 2018
.gitignore Add docs for react apps Sep 7, 2018
.prettierrc Add lerna Sep 2, 2018
.travis.yml Add travis badge Sep 3, 2018
lerna.json v0.5.5 Jan 21, 2019
license Add readme and license Aug 25, 2018
netlify.toml Build website with gatsby Sep 9, 2018
package.json Build website with gatsby Sep 9, 2018
readme.md Add v2 note Jul 6, 2019
yarn.lock Add components export to mdx-deck-code-surfer Oct 3, 2018

readme.md

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

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.

You can’t perform that action at this time.