How to use the @emotion/styled.code function in @emotion/styled

({ theme }) => ({
    overflowY: 'auto',
    wordBreak: 'break-all',
    flexGrow: 1,
    fontSize: '75%',
    display: 'flex',
    background: theme.background,
    borderBottom: `1px solid ${theme.mixer(0.125)}`,
    padding: '.5em',
  }),
  ({ reverse }) => ({
    flexDirection: reverse ? 'column-reverse' : 'column',
  })
);

const OutputLine = styled.code(({ theme }) => ({
  background: theme.background,
  borderColor: theme.background,
}));

/**
 * Terminal Core page in the Terminal Page
 *
 * @class TerminalCore
 * @extends {Component}
 */
class TerminalCore extends Component {
  outputRef = React.createRef();

  /**
   *Creates an instance of TerminalCore.
   * @param {*} props

gridArea: 'content',
  overflow: 'visible',
});

const Console = styled.div({
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
});

const ConsoleInput = styled.div({
  marginBottom: '1em',
  position: 'relative',
});

const ConsoleOutput = styled.code(({ theme }) => ({
  flexGrow: 1,
  flexBasis: 0,
  fontSize: '75%',
  overflow: 'auto',
  wordBreak: 'break-all',
  whiteSpace: 'pre-wrap',
  background: theme.background,
  border: `1px solid ${theme.mixer(0.125)}`,
}));

const ExecuteButton = styled(Button)(({ theme }) => ({
  borderLeft: `1px solid ${theme.mixer(0.125)}`,
}));

const HelpButton = styled(Button)(({ theme }) => ({
  borderRight: `1px solid ${theme.mixer(0.125)}`,

import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from '@styled-system/theme-get';
import Highlight, {defaultProps} from 'prism-react-renderer';
import {CodeblockTheme} from './theme';

const StyledCode = styled.code<{}>(props => ({
  display: 'block',
  height: '100%',
  fontSize: themeGet('fontSizes.fontSize30')(props),
  overflowX: 'auto',
  padding: `${themeGet('space.space40')(props)} ${themeGet('space.space60')(props)}`,
}));

export type Language =
  | 'markup'
  | 'bash'
  | 'clike'
  | 'c'
  | 'cpp'
  | 'css'
  | 'javascript'
  | 'jsx'

gridArea: 'content',
  overflow: 'visible',
});

const Console = styled.div({
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
});

const ConsoleInput = styled.div({
  marginBottom: '1em',
  position: 'relative',
});

const ConsoleOutput = styled.code(({ theme }) => ({
  flexGrow: 1,
  flexBasis: 0,
  fontSize: '75%',
  overflow: 'auto',
  wordBreak: 'break-all',
  whiteSpace: 'pre-wrap',
  background: theme.background,
  border: `1px solid ${theme.mixer(0.125)}`,
}));

const ExecuteButton = styled(Button)(({ theme }) => ({
  borderLeft: `1px solid ${theme.mixer(0.125)}`,
}));

/**
 * Console Page in the Terminal Page

import styled from '@emotion/styled'
import {
  space,
  width,
  fontSize,
  color,
  borders,
  borderColor,
  borderRadius
} from "styled-system"

const Kbd = styled.code(
  space,
  width,
  fontSize,
  color,
  borders,
  borderColor,
  borderRadius,
  {
    boxSizing: "border-box",
    fontFamily: "monospace, monospace"
  }
)

Kbd.defaultProps = {
  fontSize: 2
}

border: `1px solid ${colors.divider}`,
  borderRadius: 4,
  margin: '1.5em 0',
  overflow: 'hidden'
})

const Header = styled.div({
  padding: '1.25rem',
  backgroundColor: colors.background
})

const MainHeading = styled.h4({
  marginBottom: 0
})

const StyledCode = styled.code({
  padding: '0 !important',
  background: 'none !important'
})

const Subheading = styled.h6({
  marginTop: 12,
  marginBottom: 0
})

const Body = styled.div({
  padding: '1.25rem'
})

const BodySubheading = styled.h6(smallCaps, {
  fontWeight: 'bold'
})

import React from 'react'
import styled from '@emotion/styled'

export const inlineCode = styled.code(
  props => ({
    fontFamily: props.theme.monospace,
  }),
  props => props.theme.code
)

export const code = styled.pre(
  props => ({
    fontFamily: props.theme.monospace,
    fontSize: '.75em',
  }),
  props => props.theme.pre
)

export const img = styled.img({
  maxWidth: '100%',

import styled from '@emotion/styled'
import {
  space,
  width,
  display,
  fontSize,
  color,
  borders,
  borderColor,
  borderRadius,
} from 'styled-system'

const Code = styled.code(
  space,
  width,
  display,
  fontSize,
  color,
  borders,
  borderColor,
  borderRadius,
  {
    boxSizing: 'border-box',
    display: 'block'
  },
)

Code.defaultProps = {}

margin: '0.5em 0 1.45em',
  border: `1px solid ${colors.divider}`,
  borderRadius: 4
})

const Header = styled.div({
  display: 'flex',
  alignItems: 'center',
  padding: 10,
  borderBottom: `1px solid ${colors.divider}`,
  [breakpoints.sm]: {
    padding: 5
  }
})

const Filename = styled.code({
  marginLeft: 8,
  marginRight: 'auto',
  color: colors.text2,
  fontSize: 15
})

const StyledSelect = styled(Select)({
  marginRight: 8
})

const InnerContainer = styled.div({
  padding: 15,
  backgroundColor: colors.background,
  overflow: 'auto',
  [breakpoints.sm]: {
    padding: 5

import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
import css from '@emotion/css'
import { mq, colors, constants, animatedUnderline } from './style'

const textStyles = mq({
  fontSize: [15, 16],
  marginTop: 20,
  color: colors.color,
  fontWeight: 400,
  lineHeight: '1.7'
})

export const p = styled.p(textStyles)

export const code = styled.code(
  textStyles,
  mq({
    backgroundColor: 'rgba(117, 63, 131, 0.07)',
    borderRadius: '0.325rem',
    fontSize: ['80%', '85%'],
    margin: 0,
    padding: '0.2rem 0.325rem'
  })
)

export const pre = styled.pre({
  '& > code': {
    padding: 0
  }
})