Mdx-deck: Custom syntax highlighting

[janhesters]

I want to use Darcula from react-syntax-highlighter together with my own custom theme. But since the prism key has been removed, I can't figure out how to do it.

// theme.js
const custom = {
  colors: {
    text: '#abb7c4',
    background: '#2b2b2b',
  },
};

export { custom };

Here is what I try:

import base from '@mdx-deck/themes/base';
import highlight from '@mdx-deck/themes/syntax-highlighter-prism';
import darcula from 'react-syntax-highlighter/styles/prism/darcula';
import { custom } from './theme';

export const themes = [base, highlight, custom, darcula];

But this doesn't work. How can you use custom syntax highlighting?

[jxnblk]

It’s probably best to provide your own code component, see https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#syntax-highlighting

[janhesters]

@jxnblk So you mean using a custom code component, passing the prism style to it to wrap each line of code in it?

[jxnblk]

I mean create your own theme like this one and pass whatever custom colors/styles you want to itt https://github.com/jxnblk/mdx-deck/blob/master/packages/themes/syntax-highlighter.js