Allow for `theme` customization about code-surfer HOT 7 CLOSED

Hi!

I think the change isn't too big, if you want to try it see this line:
https://github.com/pomber/code-surfer/blob/master/packages/code-surfer/src/code-surfer.js#L29

Adding a theme property to that component and changing the condition to something like theme={theme !== undefined ? theme : dark ? darkTheme : lightTheme} (I explicitly check against undefined because null is a valid theme for prism-react-rederer).

I think that should be enough at least for a short-term solution.

from code-surfer.

Thanks for the PR @kutyel !

@kitten what API do you have in mind?
Current mdx-deck themes for syntax highlighting look like this:

// example theme.js
import { future } from 'mdx-deck/themes'
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
import prismRuby from 'react-syntax-highlighter/languages/prism/ruby'

export default {
  ...future,
  prism: {
    style: okaidia,
    languages: {
      ruby: prismRuby
    }
  }
}

from code-surfer.

I would happily accept a PR for using prism-react-renderer for mdx-deck code blocks. As for theming for this particular component, I'm guessing that mdx-deck themes could use an object named CodeSurfer (or similar) and pass the whole thing along

from code-surfer.

I added some examples for using it with prism-react-renderer. I couldn't make it work with prism themes yet (tried something like this).

from code-surfer.

@pomber I think a longterm solution would include to add the prism-react-renderer theme to mdx's theme as well eventually.

Maybe they can even be convinced to switch code blocks over to it?

from code-surfer.

@kitten oh, that's right, I'd like to use Night Owl from prism-react-renderer for example, the themes from mdx-deck seem to be pretty simple regarding code highlighting, @jxnblk what do you think? 😉

from code-surfer.

Closing this one. Now you can also set the theme globally: https://codesurfer.js.org/sample/#10

from code-surfer.