Hi. Love Code-Surfer!

Is there a clean way to integrate this library into other presentation tools (e.g. spectacle)?

I see that it can be embedded in a website (pomb.us 👍), so it must be possible, but I'm having trouble following mdx-deck-code-surfer. Could you provide guidelines for integrating this library into other applications?

Heey !

This is amazing and I am in love !

I am doing a presentation that shows some HTML code and I was just wondering if there is support for other languages or if it's something I am missing in mdx-deck ?

Hi there,

First off Code Surfer is the bomb(!) and I've been really enjoying using it! Thanks for creating such an awesome tool! 😄

One thing I've run into is when presenting if you want to go back to a previous slide, Code Surfer will start animating from the beginning of the previous slide, not the end, so you can sometimes lose a bit of continuity if you overshoot or need to go back.

I'm not sure if this is hard to add or not or if it's more related to MDX Slides as opposed to Code Surfer but having the ability to opt-in or out of this behaviour would be amazing and super useful.

Thank you very much for your time and keep up the awesome work! 🙂

Cheers!

Tom

This; https://github.com/JJ/git-push works locally without a problem, however, I can't deploy with now; it stops with this error in the log:

var _mdxDeckCodeSurfer = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module 'mdx-deck-code-surfer'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

Here's the whole log, just in case: https://zeit.co/jjmerelo/git-push/duypo66h6

Any idea?

Hi thanks for your amazing work.

When zooming in from a big code snippet, whole text is moved outside on the left side. See the screenshots.

I used your 'sample.mdx' deck:

<CodeSurfer
  title="Scale and Scroll 2"
  notes="Long snippets are scaled ⬇️"
  code={require("!raw-loader!../tronix.sol")}
  steps={[
    { range: [1, 3], notes: "⬇️" },
    { range: [5, 13], notes: "⬇️" },
    { range: [15, 32], notes: "⬇️" },
    { lines: [30, 35], notes: "⬇️" },
    { range: [15, 32], lines: [40], notes: "➡️" }
  ]}
/>

code snipppet can be found here: https://etherscan.io/address/0xf230b790e05390fc8295f4d3f60332c93bed42e2#code

If you open the deck in two tabs (one in presenter mode) after passing some slides the index and step get in what appear to be a race condition and start changing in a loop. This is bad.

https://codesurfer.js.org/sample/#3.2 shows nothing

Would be cool, if you can define a step as the initial state.

Use-Case:

I want to show the differences in one css property between slides for example.

Your component rocks! 🤘

It seems mdx-deck build doesn't work if I use CodeSurfer (regardless of how raw-loader is used).. I get this:

[mdx-deck] building
[mdx-deck] rendering static html
Missing HeadProvider
[err] TypeError: Cannot read property 'step' of null
    at _class2.render (./node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js:93:30)
    at processChild (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2207:18)
    at resolve (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:5)
    at ReactDOMServerRenderer.render (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:22)
    at ReactDOMServerRenderer.read (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:19)
    at renderToString (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2729:25)
    at renderHTML (./node_modules/mdx-deck/lib/html.js:57:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Code Surfer v3 is almost done.

If anyone wants to help me test it: create a new deck with npm init code-surfer-deck my-deck, work on your deck, and let me know if you have any problem.

Here are the docs.

Improvements to the docs are also welcome.

First, a peer dep of styled-components is required for it to work and it's not mentioned in the readme

Second, it fails with withDeck not being a function

hey pomber! love this!!

my bug is simple. this works:

<CodeSurfer
  title="React-Blade API"
  theme={ShadesOfPurple}
  code={require("!raw-loader!./snippets/react-blade.js")}
  lang="javascript"
  showNumbers={false}
  dark={true}
  steps={[]}
/>

but this doesnt work

<CodeSurfer
  title="React-Blade API"
  theme={ShadesOfPurple}
  code={require("!raw-loader!./snippets/react-blade.js")}
  lang="javascript"
  showNumbers={false}
  dark={true}
/>

the error in browser console is:

Uncaught TypeError: Cannot read property 'some' of undefined
    at InnerCodeSurfer.render (deck-code-surfer.js:117)

the problematic codesurfer code is:

      var anyNotes = notes || steps.some(function (s) {
        return s.notes;
      });

so basically i suggest checking that steps is truthy before you do .some.

Mobile currently gets cut off and has no way to arrow up/down

I rely heavily on the Code component, which I'm using as shown below with 3.0.0-alpha.1. What's the prefered way to do this now?

import contextJava from "!!raw-loader!../examples/process-function/context.java"

<CodeSurferLayout>
<Code
  lang='java'
  focus='1:18'
  code={contextJava}
/>
<Code 
  lang='java'
  focus='7:8'
  code={contextJava}
  subtitle='Context object of ProcessFunction gives access to the TimerService'
/>
</CodeSurferLayout>

my deck.mdx:

import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer";

<CodeSurferColumns>

<Step>

<div>

Yarn workspaces list.

" for the remainder of the tour, `~` will refer to the monorepo root.

This is the list of all applications and libraries contained in the monorepo.
Each workspace in this list will have their `node_modules` symlinked back to `~/node_modules`.

`yarn install` at `~` will install dependencies for all workspaces.

### reference

* [yarn workspaces docs](https://classic.yarnpkg.com/en/docs/workspaces/)

</div>

```ts title="package.json" file="../package.json"

error running mdx-deck:

unknown: Expected corresponding JSX closing tag for <li> (18:131)

  16 | <h3>{`reference`}</h3>
  17 | <ul>
> 18 | <li parentName="ul"><a parentName="li" {...{"href":"https://classic.yarnpkg.com/en/docs/workspaces/"}}>{`yarn workspaces docs`}</a></div></li>

notice how the closing </div> was thrown in before the closing </li>.

not sure if this is a problem with mdx-deck or codesurfer...

but is there a better way to use real markdown in a step?

When I create a project using the npx create-code-surfer-deck command and there is an error like this when I use code like this:

<Code    code = {require ("!! file-loader! ./ codes / fetchIntro / callFetch"). default} />

and error is :
TypeError: Cannot read property 'dimensions' of undefined

fyi:
Previously I made a project using the npx create-code-surfer-deck command and it worked fine

Once the next version of prism-react-renderer is released (the version after 0.1.6), it would be cool to upgrade to that version, so that we can get the Prism.js improvements (see FormidableLabs/prism-react-renderer#33).

Unfortunately, this does not support PowerShell syntax highlighting. Looking to Prism's documentation didn't really help much with how to add additional language support to this.

If I could be pointed in the right direction, I'd be happy to contribute.

If a suggestion is helpful, I like using eslint + eslint:recommended with a pre-commit hook and/or CI to prevent shipping stuff like this so I don't have to think about it.

It would be ideal if title and notes could take either strings or components so that consumers can have full control over the look of their presentation.

For example, would love for my notes too look like:

<CodeSurfer
  title={() => <div style={{ ... }}>Some Title</div>}}
  notes="Start with this note"
  code={require("!raw-loader!./my-snippet.js")}
  showNumbers={false}
  dark={false}
  steps={[
    { lines: [6], notes: "Note for the first step" },
    { range: [5, 9] },
    { tokens: { 9: [3, 4, 5] }, notes: () => <div style={{ ... }}>Note for the third step</div> }
  ]}
/>

Hi!

Huge thanks and props @pomber for creating this! Works like a charm 👌 🎉

Just a small detail: I'm trying to customise the color theme for the actual code, to look more similar to for example the default vscode theme for code, but it seems that it doesn't open up the theme prop right now, also the titles inside <CodeSurfer> don't seem to receive the theme from mdx-deck either 😕

I've spoken with @kitten and apparently prism-react-renderer already has a theming option, but we need to pass it down 😉

Thanks for everything and please tell me if I can help you with a small PR! 👏

Hi there! Thanks for the awesome component.

Currently in the v2 branch, it seems that the offOpacity for code that is not focused is hard coded to 0.3. Is there any objection to either:

• Moving this to the syntax theme?
• exposing this as a prop on a component (code-surfer, code, etc)?

Depending on the display/theme/other factors, 0.3 doesn't really fade the code out as much.

If there's a better way to handle this, I'd be happy to send a PR.

I feel like you could easily add a syntax to this tool

Example Syntax

```js
export function add(augend, addend) {
  return augend + addend;
}
---
* > Let's take a look at the add() function
1:17-1:36 > We've got our function signature here
1:21-1:27, 2:10-16 > The augend is the number to which others are added
1:29-1:35, 2:19-25 > The addend is a number which is added
2:3-2:25 > The function returns the result of the two
* > And that's the add function!
```

Syntax Explainer

Specify the steps after the code by using a --- or some other signifier.

```js
<code>
---
<steps>
```

Each step has some ranges and notes:

<ranges> > <notes>
1:10-2:20 > Here are some **notes**

Use * as your range to zoom out on everything:

*

Select a range:

<line>:<column>-<line>:<column>
1:10-2:20

Select multiple ranges:

<range>, <range>, <range>
1:10-2:20, 3:30-4:40

Somewhat related to #52, it would be nice to be able to style the pre element, maybe via the MDX-Deck theme.pre configuration object.

I see that a version of this is being implemented for V2 (https://github.com/pomber/code-surfer/pull/58/files#diff-5679de880b7a5d62961675e36dab6ad0R33), so I suppose this will not be a priority for releasing before that.

My personal use case for this is just setting a simple line-height on the pre, which can be resolved via either #52 or maybe in the future, FormidableLabs/prism-react-renderer#37.

And should it be a --save dependency, or a --save-dev devDependency?

I've added an export for it:

export { default as CodeSurfer } from "./deck-code-surfer";
export { default as components } from "./deck-components";
export { default as SurferSplit } from "./deck-code-surfer-split";

And used it in my mdx:

import { CodeSurfer, SurferSplit } from "mdx-deck-code-surfer"

<SurferSplit
  codeTop={simpleComponent}
  codeBottom={cleanAst}
/>

But it doesn't build into presentation, and it also crash it with react-dom errors:

Any suggestions?

These are my package.json devDependaices

"devDependencies": {
    "mdx-deck": "^2.3.2",
    "mdx-deck-code-surfer": "^0.5.5",
    "raw-loader": "^2.0.0",
    "styled-components": "^4.2.0"
  },

My presentation.mdx looks like following

export { default as theme } from '../theme';

# Auth0 as Identity Management

---

## Second Slide

---

import { CodeSurfer } from 'mdx-deck-code-surfer';

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

---

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
```(this bracketed content just to post in gihub)
---

I have my-snippet.js file on root of the folder. Both ways gives

Uncaught TypeError: (0 , _mdxDeck.withDeck) is not a function
    at eval (deck-code-surfer.js:287)
    at Object../node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js (main.js:4734)
    at __webpack_require__ (main.js:724)
    at fn (main.js:101)
    at eval (index.js:7)
    at Object../node_modules/mdx-deck-code-surfer/dist/index.js (main.js:4758)
    at __webpack_require__ (main.js:724)
    at fn (main.js:101)
    at eval (presentation.mdx:6)
    at Module../presentation.mdx (main.js:7935)

For using custom colors for syntax highlighting

How can I enable the line numbers in code surfer 2.0.0-alpha.8 with the new API?

I tried this but it doesn't work

```go title="Hello, World" showNumbers="true"
package main

import "fmt"

func main() {
  fmt.Println("Hello, World")
}

Right now, by running yarn build a static version of the presentation is generated in the /public directory, but I can't seem to figure out a way to change the relative path for static files. For example, if I'm uploading to a /presentation directory on my server, all static files 404 because index.html and other files have paths relative to the root.

In create-react-app this is solved by changing the path in the configuration file, but I can't seem to find how to do that with code-surfer.

For some prism languages (ex. import "prismjs/components/prism-elixir"; ) The layout is strange. If there is a small (one line) code block, it takes up the entire page pushing any other text or header off the page. Other languages don't seem to have this problem.

I'm not sure if it's a problem with mdx, code surfer or prism. Any suggestions on how to debug this?

You can see an example of this here: https://codesandbox.io/s/intelligent-dawn-pbb5d?file=/deck.mdx

Well so I have a custom theme like this:

import theme from 'mdx-deck/themes'

export default {
  ...theme,
  monospace: 'Dank Mono',
  colors: {
    text: '#d4d4d4',
    background: '#1e1e1e'
  }
}

And in the standalone code in the slides <SomeCode /> it works fine but code-surfer (or maybe prism-react-renderer? @kitten) is not picking it up... very minor stuff but just to inform and also I'm willing to submit a PR if pointed in the right direction 😉

Thank you for everything!! 👏

Thanks to you and to @jxnblk our slides are gonna be dope! 💪

Hi there! Great work on CodeSurfer!

One of my websites uses Next.js + React + Typescript. I'd like to use CodeSurfer as a React Component within an existing tsx file. Is there any documentation on how to do that?

Hello 👋

First, thank you for such a wonderful library! I'm really excited for the V2 release. Apologies if this is too soon to file an issue for, but I was curious about the possibility of adding a progress prop. I think it could be really cool for using code-surfer outside of MDX and for landing pages, or even walking through API documentation. An example I could see is something similar to the latest docs page for SwiftUI where scroll progress could animate between sections of code with explanations.

Taking the example from the README, it might look something like the following:

<CodeSurfer
  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" }
  ]}
  progress={0.25}
/>

I'm thinking progress would always be from 0-1. So in the case above it would show step 2, then the progress could be interpolated by something like react-spring for transitioning to the next step. One thing that seems like it might be hard is the individual animations that are all going on and how to hook that up to one progress prop.

I haven't taken a look at the code that's powering all of this yet, so I imagine it might not be very practical to rearchitect things to achieve this functionality, but if this sounds like something useful I would be happy to help and start a PR 😊.

Issue

It appears that the sample project/deck does not work by substituting yarn for npm. I don't think yarn bring in the correct version of dependencies and results in a console error once the server is started. If you run npm start then restart the server with yarn start, yarn works without issue.

yarn 1.9.4
npm 6.4.1
node 10.11.0

Reproduce

First:

$ git clone https://github.com/pomber/code-surfer.git
$ cd code-surfer/fixtures/sample
$ yarn; yarn start

Second:
Browser opens with http://127.0.0.1:8080/#0 and a blank screen. In the web browser's JavaScript console are the following errors:

Uncaught Error: Cannot find module 'mdx-deck-code-surfer'
    at webpackMissingModule (sample.mdx:10)
    at eval (sample.mdx:10)
    at Object../sample.mdx (main.js:3053)
    at __webpack_require__ (main.js:725)
    at fn (main.js:102)
    at eval (entry.js:65)
    at Object.../../node_modules/mdx-deck/dist/entry.js (main.js:1895)
    at __webpack_require__ (main.js:725)
    at fn (main.js:102)
    at eval (client:2)

webpack: Encountered errors while compiling. Reload prevented.

./sample.mdxModule not found: Error: Can't resolve 'mdx-deck-code-surfer' in '/Users/aj/Projects/code-surfer/fixtures/sample'resolve 'mdx-deck-code-surfer' in '/Users/aj/Projects/code-surfer/fixtures/sample'  Parsed request is a module  using description file: /Users/aj/Projects/code-surfer/fixtures/sample/package.json (relative path: .)    Field 'browser' doesn't contain a valid alias configuration    resolve as module

it is rendering this:

it does not take \n new lines in consideration and it does not have syntax hightlight either

<CodeSurfer
title="Sum Type"
lang="javascript"
code={require('!raw-loader!./samples/sumType.js')} />

you can reproduce here https://github.com/sibelius/functional-types-abstractions/blob/master/src/deck.mdx#L443

yarn start

here is the sumType file https://github.com/sibelius/functional-types-abstractions/blob/master/src/samples/sumType.js

Hey peoples.

This is more or less a feature idea, or feature change idea.
Currently, we can select tokens inside rows to highlight them. Why not the columns of the row?
To be honest, after seeing the code example for this feature, I totally assumed it is already this way, so it it took a while to figure out, that there is a reason, why someone named columns "tokens" o_O.

The pragmatic usage would be to be language independent.
We could use this for broken code examples or unsupported/not fully supported languages.
Or in cases, where We just want to highlight something else then tokens.

I also have some case with a template with mixed languages (*.ini.j2), that would be solved by not relying on a tokenizer (I want to highlight only {{ git_user_email }} and {{ git_user_name }}:

import { CodeSurfer } from "mdx-deck-code-surfer"
export { components } from "mdx-deck-code-surfer"

` ` `ini
# gitconfig.j2
[user]
    email = {{ git_user_email }}
    name = {{ git_user_name }}
[core]
    excludesfile = {{ ansible_user_dir }}/.gitignore
    editor = nano
----
*
3[13:33], 3[12:32] > use variable from playbook
` ` `
---

I know, this would be a breaking change, unless there is a nice way to use both ideas.
But, what do you think about this?

Have a nice day
ko

The demo link is borked.

Really impressed with this lib, thank you for all your work! Running into a strange issue trying to display ReasonML code. This simple example works:

<CodeSurfer
  title="Some MFing ReasonML Code"
  notes="Betcha didn't see that shit coming"
  code="let foo = 2.0;"
  lang="reason"
  showNumbers={false}
  dark={false}
  steps={[
    { lines: [1], notes: "Note for the first step" }
  ]}
/>

But here's one that doesn't:

<CodeSurfer
  title="Some MFing ReasonML Code"
  notes="Betcha didn't see that shit coming"
  code="open Common;"
  lang="reason"
  showNumbers={false}
  dark={false}
  steps={[
    { lines: [1], notes: "Note for the first step" }
  ]}
/>

This code causes 5 instances of this error in the console:

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

I found at least a few instances of ReasonML code that caused this error. Please let me know if there's more info that I can provide!

I try to produce a pdf version of my mdx-deck slides, and it looks like CodeSurfer does not quite work for that.

I add the following to theme to ensure 16:9 aspect ratio for the PDF:

  css: {
    '@page': {
      size: '1920px 1080px',
      margin: 0,
    }
  }

Unfortunately the scale computation seems to be off for some reason, so the code in pdf looks either too small or artificial margins appear or whatever.

The issue is more-or-less reproducible with default sample fixture if @page: {size:...} is added.

👋 Hey there!

I just threw together a sample project with mdx-deck@v4/gatsby and code-surfer@v3. When I attempted to run gatsby develop I got this error

> gatsby develop

success open and validate gatsby-configs - 0.076s
success load plugins - 0.366s
success onPreInit - 0.012s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.045s
success copy gatsby files - 0.234s
success onPreBootstrap - 0.029s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.993s
success building schema - 0.344s
success createPages - 0.149s
success createPagesStatefully - 0.045s
success onPreExtractQueries - 0.002s
success update schema - 0.050s
success extract queries from components - 0.270s
success write out requires - 0.042s
success write out redirect data - 0.003s
success onPostBootstrap - 0.004s
⠀
info bootstrap finished - 5.281 s
⠀
success run queries - 0.051s - 3/3 59.38/s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected token (12:2)

File: node_modules/@mdx-deck/gatsby-plugin/src/index.js:12:2

It seems to be related to code-surfer, though the error being printed is pointing to mdx-deck, so I figured I'd open an issue here and on mdx-deck's repo.

Below is a sample project that should be able to recreate the error.

Sample Project: https://github.com/mhartington/mdx-deck-v4-issue

Hey there,

Loving Code Surfer with mdx-deck, but noticed an odd issue with some duplicated symbols in "background" (non-focused) code snippets.

eg: = would appear as == or : appear as ::

When the same line of code is focused, the corruption goes away.

This is not a huge, deal, just confusing when an unfamiliar audience is trying to glean a bit of extra context from the background lines.

Example of this:

I've noticed this in two different presentations now, so I don't think it's a one-off.

Happy to help diagnose further.

How could we change the font size?

When the title prop isn't used, the code shows flush with the top of the viewport like this:

I feel this doesn't look too great and would suggest adding a bit of padding :)

p.s. Thanks for a fantastic library! Your work is appreciated :)

Some recent issues talk about using some newer, alpha versions, but as far as I can tell, the last version published is v0.5.5. If I wanted to use this library for a presentation I'm working on, what's the best way to do that?

It seems to happen in all cases. Even in the online example. If you open presenter mode alt + p it crashes to a blank screen with this error:

Uncaught TypeError: Cannot read property 'step' of undefined
    at InnerCodeSurfer.render (deck-code-surfer.js:180)
    at finishClassComponent (react-dom.development.js:13538)
    at updateClassComponent (react-dom.development.js:13501)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at replayUnitOfWork (react-dom.development.js:15745)

f4529ca added line number back to code surfer (thanks for that!) but I noticed a small inconsistency with how the existing line numbers are updated.

When a new step is animated in, it will animate the incoming text, then update the line numbers after the animation has completed. When stepping back, the line numbers will update, then the text will animate out.

Would it be possible to change when the line numbers update so that they update before the animation happens? Currently it feels a bit jarring to have the line number update after the step has been animated in.

Hi, I have two things that I want to clear.

1. How to give multiple steps in range for example-:
   steps={[ { range: [10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25], notes: "...headings" }, ]}
   I want to put start and end range given below.Is their any way?
   steps={[ { range: [10-25], notes: "...headings" }, ]}

2. What is the file size we can load I have a file in 3097 kb (49866 Lines). But the chrome getting hanged when I try to load this file

will code surfer v2 works with mdx-deck v3?