Demo blog live sample not working

[webOS101]

Navigate to: https://gatsby-starter-blog-mdx-demo.netlify.com/hi-folks/

Scroll all the way down... Code sample not working. I assume it's supposed to do something?

[LpmRaven]

EDIT: Sorry @webOS101 , I mistook which code sample you meant. I see now you were referring to the 'Live code sample'.

Semantically the code sample is working but to have syntax highlighting you need to edit the code component to include a theme

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'

// Here I import the theme
import theme from "prism-react-renderer/themes/github";

import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

export const Code = ({ codeString, language, ...props }) => {
    if (props["react-live"]) {
        return (
            <LiveProvider code={codeString} noInline={true} theme={theme}>
                <LiveEditor />
                <LiveError />
                <LivePreview />
            </LiveProvider>
        );
    }
    return (
        <Highlight
            {...defaultProps}
            code={codeString}
            language={language}

            // Here I use the theme
            theme={theme}
        >
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <div className="gatsby-highlight" data-language={language}>
                    <pre className={className} style={style}>
                        {tokens.map((line, i) => (
                            <div {...getLineProps({ line, key: i })}>
                                {line.map((token, key) => (
                                    <span {...getTokenProps({ token, key })} />
                                ))}
                            </div>
                        ))}
                    </pre>
                </div>
            )}
        </Highlight>
    );
};

[webOS101]

I guess I misunderstood. I thought this was showing off the MDX plugin that shows the output of the inline source code in markdown. Can close this if that React sample wasn't supposed to render into the page.

[hagnerd]

Hey @webOS101 it sounds like you're talking about React-live. It's pretty easy to add react-live to your own Gatsby site, but I wanted to keep this starter simple and just add support for MDX out of the box.

Chris has a video on egghead showing off how to do this