feat(code): Add syntax highlighting as css (instead of inline styles in js) and explicitly import specific languages #75
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { Code } from '@deque/cauldron-react'; | ||
| import Demo from '../../../Demo'; | ||
|
|
||
| const CodeDemo = () => ( | ||
| <Demo | ||
| component={Code} | ||
| states={[ | ||
| { | ||
| children: 'var foo = true;', | ||
| language: 'javascript', | ||
| DEMO_renderBefore: <h3>javascript</h3> | ||
| }, | ||
| { | ||
| children: '<span class="foo">Hello world!</span>', | ||
| language: 'html', | ||
| DEMO_renderBefore: <h3>html</h3> | ||
| }, | ||
| { | ||
| children: '$ npm install --save @deque/cauldron-react', | ||
| DEMO_renderBefore: <h3>(no language prop)</h3> | ||
| } | ||
| ]} | ||
| propDocs={{ | ||
| children: { | ||
| type: 'string', | ||
| description: 'code to be syntax highlighted and rendered in code block' | ||
| }, | ||
| language: { | ||
| type: 'string', | ||
| description: '"javascript", "css" or "html"' | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| export default CodeDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,4 +5,4 @@ | |
| [[redirects]] | ||
| from = "/*" | ||
| to = "/index.html" | ||
| status = 200 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = () => ({}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,6 @@ export default { | |
| output: { | ||
| dir: 'lib', | ||
| format: 'cjs', | ||
|
There was a problem hiding this comment. @scurker this flag causes the build to break. For some strange reason, it emits There was a problem hiding this comment. The old webpack code preserved the directory structure so I was trying to keep the same structure when migrating from webpack, so this option kept that output the same. The only downside to not having it is debugging issues with cauldron, you'll see something like There was a problem hiding this comment. It's causing issues now because of how we're "registering" languages in the Code component. I don't fully understand it either 🤷 |
||
| exports: 'auto' | ||
| }, | ||
| plugins: [typescript(), commonjs(), svgr(), dynamicImportVar()] | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,44 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| Light as SyntaxHighlighter, | ||
| SyntaxHighlighterProps | ||
| } from 'react-syntax-highlighter'; | ||
| import classNames from 'classnames'; | ||
| import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript'; | ||
| import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css'; | ||
| import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml'; | ||
|
|
||
| SyntaxHighlighter.registerLanguage('javascript', js); | ||
| SyntaxHighlighter.registerLanguage('css', css); | ||
| SyntaxHighlighter.registerLanguage('html', xml); | ||
|
|
||
| interface Props extends SyntaxHighlighterProps { | ||
| children: React.ReactNode; | ||
| language?: 'javascript' | 'css' | 'html'; | ||
| className?: string; | ||
| } | ||
|
|
||
| const Code: React.ComponentType<Props> = ({ | ||
| children, | ||
| className, | ||
| ...props | ||
| }) => ( | ||
| <SyntaxHighlighter | ||
| {...props} | ||
| useInlineStyles={false} | ||
| className={classNames('Code', className)} | ||
|
|
||
| > | ||
| {children} | ||
| </SyntaxHighlighter> | ||
| ); | ||
|
|
||
| Code.displayName = 'Code'; | ||
|
|
||
| Code.propTypes = { | ||
| children: PropTypes.string.isRequired, | ||
| language: PropTypes.oneOf(['javascript', 'css', 'html']), | ||
| className: PropTypes.string | ||
| }; | ||
|
|
||
| export default Code; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This fixes the "deployed" site, enabling it to act as a SPA. It should have been done in #76.
I know it's an unrelated change, but figured we didn't need a PR just for this.