3.1.1 • Published 4 years ago
@code-surfer/themes v3.1.1
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.
3.1.1
4 years ago
3.1.0
4 years ago
3.0.0
4 years ago
3.0.0-beta.2
4 years ago
3.0.0-beta.1
5 years ago
3.0.0-beta.0
5 years ago