diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts index 016ddf1a..e2b2adce 100644 --- a/src/components/JsonViewer/style.ts +++ b/src/components/JsonViewer/style.ts @@ -8,7 +8,7 @@ export const jsonStyles = css` font-family: ${props => props.theme.typography.code.fontFamily}; font-size: ${props => props.theme.typography.code.fontSize}; - white-space: pre-wrap; + white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; overflow-x: auto; .callback-function { diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx index efae6aa8..c97d8be8 100644 --- a/src/components/Markdown/styled.elements.tsx +++ b/src/components/Markdown/styled.elements.tsx @@ -74,7 +74,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole pre { font-family: ${props => props.theme.typography.code.fontFamily}; - white-space: pre-wrap; + white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; background-color: #263238; color: white; padding: 12px 14px 15px 14px; diff --git a/src/components/SourceCode/SourceCode.tsx b/src/components/SourceCode/SourceCode.tsx index bc874cc8..b6707663 100644 --- a/src/components/SourceCode/SourceCode.tsx +++ b/src/components/SourceCode/SourceCode.tsx @@ -12,7 +12,7 @@ const StyledPre = styled(PrismDiv.withComponent('pre'))` overflow-x: auto; margin: 0; - white-space: pre-wrap; + white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; `; export interface SourceCodeProps { diff --git a/src/theme.ts b/src/theme.ts index 3fa864f8..28945e4f 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -102,7 +102,6 @@ const defaultTheme: ThemeInterface = { fontFamily: 'Roboto, sans-serif', smoothing: 'antialiased', optimizeSpeed: true, - headings: { fontFamily: 'Montserrat, sans-serif', }, @@ -113,6 +112,7 @@ const defaultTheme: ThemeInterface = { fontWeight: ({ typography }) => typography.fontWeightRegular, color: '#e53935', backgroundColor: 'rgba(38, 50, 56, 0.04)', + wrap: false, }, links: { color: ({ colors }) => colors.primary.main, @@ -271,6 +271,7 @@ export interface ResolvedThemeInterface { code: FontSettings & { backgroundColor: string; + wrap: boolean; }; headings: { fontFamily: string;