**Do you want to request a *feature* or report a *bug*?**
This is an accessibility issue with the new documentation website.

It's a clear-cut problem, but the solution is pretty open ended and ill defined. Might be difficult, and could use some design creativity.

**What is the current behavior?**
We are using [Prism.js](http://prismjs.com/) for the syntax highlighting styles of our code snippets. We also sometimes want to "highlight" a certain line, so we lighten the background of that line. With the lighter background, many of the font colors don't provide enough contrast.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).**

You can verify this by [running the aXe a11y audit](https://www.deque.com/products/axe/) on this page: https://reactjs.org/docs/introducing-jsx.html

**What is the expected behavior?**

We need a way to highlight a line without losing so much contrast.

BUT choosing a different hue without making it lighter looks bad in my opinion, and I would rather not fiddle with the various font colors used in the syntax highlighting.

We should either collaborate with the Prism project to add a 'highlight' option with enough contrast, or find another library/system to use for syntax highlighting.

background: colors.dark,
  color: colors.white,
  borderRadius: 10,
  overflow: 'auto',
  tabSize: '1.5em',
});
css.global(
  `
.gatsby-highlight code[class*="gatsby-code-"],
.gatsby-highlight pre[class*="gatsby-code-"],
.gatsby-highlight pre.prism-code`,
  {
    height: 'auto !important',
    margin: '1rem',
    fontSize: 14,
    lineHeight: '20px',
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word',
  },
);
css.global('.gatsby-highlight + .gatsby-highlight', {
  marginTop: 20,
});
css.global('.gatsby-highlight-code-line', {
  backgroundColor: prismColors.lineHighlight,
  display: 'block',
  margin: '-0.125rem calc(-1rem - 15px)',
  padding: '0.125rem calc(1rem + 15px)',
});
css.global('.token.attr-name', {