CodePane component has hardcoded behavior

Prerequisites

Feel free to delete this section if you have checked off all of the following.

I've searched open issues to make sure I'm not opening a duplicate issue
I have read through the docs before asking a question
I am using the latest version of Spectacle

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle)

Spectacle 8.2.x

Describe the Problem

I've been using Spectacle 5.x for the last couple years, and I'm working on creating a new version of my Spectacle+CRA+MDX configuration ( https://github.com/markerikson/cra-spectacle-mdx-boilerplate ) that uses the latest CRA and Spectacle versions.

I use the <CodePane> component heavily. While re-creating my slides setup today, I've noticed that the current version of <CodePane> has several bits of behavior that are hardcoded:

First, the showLineNumbers prop for <SyntaxHighlighter> is hardcoded to true, and there is no way to pass additional style parameters to it - the style prop is calculated based on some values from the theme value that was passed down the tree. Also, there doesn't seem to be

spectacle/src/components/code-pane.js

Lines 156 to 163 in 86ebff9

    
           <SyntaxHighlighter 
        
             customStyle={customStyle} 
        
             language={language} 
        
             wrapLines 
        
             showLineNumbers 
        
             lineProps={getLineProps} 
        
             lineNumberProps={getLineNumberProps} 
        
             style={syntaxTheme}

Second, because of how the theme.size field is destructured using rest spread at the top of the component, it seems like the style.width value for the <SyntaxHighlighter> always ends up as width: 1366 even if your root theme object has a size.width value. I've been unable to find a way to directly alter the width of the component via React props, and have had to resort to some hacky CSS overrides to make it fit the container element it's in.

Expected behavior: [What you expect to happen]

<CodePane> would expose additional props to allow more configuration of the underlying `.

Actual behavior: [What actually happens]

<CodePane> does not allow that configuration directly.

Additional Information

I'm also not seeing any of the language-* classes ending up on the <pre> or code> tags generated by react-syntax-highlighter. I'm not sure if this has to do with Prism, react-syntax-highlighter's normal behavior or the fact that it's v12 when v15 is available, or that the useInlineStyles prop is not being passed to <SyntaxHighlighter>.

+1 on also experiencing the fixed width and having to hack around it with !important flags

Thanks for pointing these out. Those hardcoded values are absolutely an error. We will get on patching this shortly.

	<SyntaxHighlighter
	customStyle={customStyle}
	language={language}
	wrapLines
	showLineNumbers
	lineProps={getLineProps}
	lineNumberProps={getLineNumberProps}
	style={syntaxTheme}