diff --git a/src/components/Highlight.js b/src/components/Highlight.js index 1e865dc3..f032ba42 100644 --- a/src/components/Highlight.js +++ b/src/components/Highlight.js @@ -27,10 +27,15 @@ const HighlightBlock = styled.div` color: ${color.darkest}; } + code { + white-space: pre; + } + pre { padding: 11px 1rem; margin: 1rem 0; background: ${color.lighter}; + overflow: auto; } .language-bash .token.operator, diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js index 31109bc1..b6b566af 100644 --- a/src/components/Highlight.stories.js +++ b/src/components/Highlight.stories.js @@ -122,6 +122,16 @@ export const json = () => ( ); +const SmallContainer = styled.div` + max-width: 300px; +`; + +export const wrapping = () => ( + + {javascriptCode} + +); + const StyledHighlight = styled(Highlight)` code, pre {