Mdx: Question: how to add syntax highlighting?

[trevordmiller]

There is https://github.com/mdx-js/mdx/issues/122 which is marked as a bug. Is there any other way to add syntax highlighting to code blocks with language tags like javascript?

[timneutkens]

Yesterday I fixed that issue while flying back home, still need to send a pull request 👍🏻

[timneutkens]

After that is fixed it’s as easy as adding that plugin 👍🏻

[mager]

This worked for me for Go syntax highlighting with Prism:

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

export default {
  // extends the default theme
  ...theme,
  ...future,
  // add a custom font
  font: 'Laila, Roboto, sans-serif',
  // custom colors
  colors: {
    text: '#fff',
    background: 'black',
    link: '#da0',
  },
  prism: {
    style: okaidia,
    languages: {
        go: prismGo,}
  },
}

Export theme at the top of my deck.mdx:

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

Hope this helps!