Code Surfer

<🏄/>

Lines

<CodeSurfer
title="Lines"
code={require("!raw-loader!./snippets/1.mdx")}
steps={[
{ notes: "Use ⬆️ and ⬇️ keys" },
{ lines: [6], notes: "Highlight a single line ⬇️" },
{ lines: [5, 7, 8], notes: "... or multiple lines ➡️" }
]}
/>

Use ⬆️ and ⬇️ keys

Range and ranges

<CodeSurfer
title="Range and ranges"
code={require("!raw-loader!./snippets/2.mdx")}
steps={[
{ notes: "Sometime is easier to use ranges ⬇️" },
{ range: [2, 4], notes: "From line 2 to 4 ⬇️" },
{ ranges: [[2, 3], [6, 11]], notes: "2, 3 and 6 to 10 ⬇️" },
{ lines: [1, 3], range: [6, 11], notes: "➡️" }
]}
/>

Sometime is easier to use ranges ⬇️

Highlight Tokens

<CodeSurfer
title="Highlight Tokens"
code={require("!raw-loader!./snippets/3.mdx")}
steps={[
{ notes: "⬇️" },
{ lines: [6], notes: "Instead of the full line ⬇️" },
{ tokens: { 8: [9, 12, 15] }, notes: "... select some tokens ➡️" }
]}
/>

⬇️

Line Numbers

1. <CodeSurfer
2. title="Line Numbers"
3. notes="Show line numbers ➡️"
4. showNumbers
5. code={require("!raw-loader!./snippets/4.mdx")}
6. />

Show line numbers ➡️

Scale and Scroll

import React from "react"
import PropTypes from "prop-types"
import styled from "styled-components"
const CarouselRoot = styled.div([], {
overflowX: "hidden",
width: "100%",
height: "100%",
"@media print": {
height: "auto",
overflowX: "visible"
}
})
const CarouselInner = styled.div(
[],
{
display: "flex",
width: "100%",
height: "100%",
transitionProperty: "transform",
transitionTimingFunction: "ease-out",
transitionDuration: ".3s",
"@media print": {
height: "auto",
display: "block"
}
},
props => ({
transform: `translateX(${-100 *
props.index}%)`
})
)
CarouselInner.propTypes = {
index: PropTypes.number.isRequired
}
export const Carousel = props => (
<CarouselRoot>
<CarouselInner {...props} />
</CarouselRoot>
)
export default Carousel

Long snippets are scaled ⬇️

Titles, Notes and Steps are optional

➡️

<CodeSurfer
title="Highlight Tokens"
code={require("!raw-loader!./snippets/3.mdx")}
steps={[
{ notes: "⬇️" },
{ lines: [6], notes: "Instead of the full line ⬇️" },
{ tokens: { 8: [9, 12, 15] }, notes: "... select some tokens ➡️" }
]}
/>

Use Render Props

<CodeSurfer
title={() => (
<h1 style={{ background: "black", color: "pink" }}>
Use Render Props
</h1>
)}
notes={() => (
<span style={{ background: "black", color: "pink" }}>
For title or notes
</span>
)}
code={require("!raw-loader!./snippets/render-props.mdx")}
/>
For title or notes

Use Code Blocks instead of JSX

export { components } from "mdx-deck-code-surfer"
```java FizzBuzz
public String fizzBuzz(int n){
String s = "";
if (n == 0)
return s;
if((n % 5) == 0)
s = "Buzz" + s;
if((n % 3) == 0)
s = "Fizz" + s;
if (s.equals(""))
s = n + "";
return fizzBuzz(n-1) + s;
}
----
* > Copy pasted from rosettacode.org
1, 3 > Some lines
1:4, 6, 8:10 > Also ranges
2, 4[1:6], 5[2, 4, 6:9] > Some tokens
```

 

Global Theming

import { dark } from "mdx-deck/themes"
import nightOwl from "prism-react-renderer/themes/nightOwl"
export const theme = {
...dark,
codeSurfer: {
...nightOwl,
showNumbers: false
}
}

You can't set the theme for each Code Block