Skip to content

Conversation

@carloskelly13
Copy link
Contributor

Add <CodePane /> component to Spectacle rewrite!

  • Uses prism-react-renderer at the core
  • Supports a custom Google font loaded dynamically via a prop or falls back to the browser's monospace font
  • Supports font size
  • Supports React Renderer themes
  • No CSS needed to load!

Other improvements

  • Dropped custom margins and paddings to make each slide full size
  • Cleaned up slide styles
  • Updated JS-based example to have some code slides

Animated Example of 2 code slides each with their own font!
code-slide

import TestMDX from './examples/mdx/test-mdx';
// import TestJs from './examples/JS/TestJS.js';
// import TestMDX from './examples/mdx/test-mdx';
import TestJs from './examples/js/test-js';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes a filename case issue.

}, [navigateToCurrentUrl]);

React.useLayoutEffect(() => {
document.body.style.margin = '0';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some browsers add extra margins to body which throws off the full size slides. Ordinarily in an app we'd use a CSS reset, but we don't want our users to have to fuss with loading a CSS file and JS.

right: 0,
position: 'absolute'
}),
[]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a memoized base style. Likely when we land upon a theming solution this would get refactored into that.

Copy link
Contributor

@SunburtReynolds SunburtReynolds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@carloskelly13 carloskelly13 merged commit 21ed814 into task/rewrite Aug 28, 2019
@carloskelly13 carloskelly13 deleted the task/rewrite-code-panel branch August 28, 2019 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants