Theme-ui/prism 不适用于 gatsbyjs 降价文件答案

【问题标题】：Theme-ui/prism won't work for gatsbyjs markdown filesTheme-ui/prism 不适用于 gatsbyjs 降价文件
【发布时间】：2020-12-04 10:05:33
【问题描述】：

我正在使用 @theme-ui/prism 来格式化 markdown 文件中的代码块文本。我使用的降价插件是 gatsby-plugin-mdx。它似乎不起作用，因为我没有在代码块中获得深色背景。

这就是我所做的：

yarn add @theme-ui/prism

创建 src/gatsby-plugin-theme-ui/components.ts:

import Prism from '@theme-ui/prism'
const components = {
  pre: props => props.children,
  code: Prism,
}
export default components

在 src/gatsby-plugin-theme-ui/index.ts 我为pre定义了一个样式：

import nightOwl from '@theme-ui/prism/presets/night-owl.json';
import colors from "./colors";
import headings from "./headings";

const systemFonts =
  '-apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif';
const transition = '0.2s ease-out';

export default {
  useColorSchemeMediaQuery: true,
  colors,
  initialColorMode: `dark`,
  fonts: {
    body: systemFonts,
    heading: "Avenir Next",
    monospace: 'Menlo, monospace'
  },
  fontSizes: [12, 14, 16, 24, 28, 36, 48, 64],
  fontWeights: {
    body: 400,
    heading: 500,
    bold: 600,
  },
  lineHeights: {
    body: 1.7,
    heading: 1.1275,
  },
  letterSpacings: {
    body: 'normal',
    caps: '0.2em'
  },
  breakpoints: [
    '320px', '376px', '540px', '735px', '1070px', '1280px', '1640px', '1880px'
  ],
  transition,
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      ...headings
    },
    ...headings,
    p: {
      my: 4,
    },
    a: {
      color: 'secondary',
      transition: `color ${transition}`,
      ':hover,:focus': {
        color: 'text'
      }
    },
    pre: {
      ...nightOwl,
      fontFamily: `"Operator Mono", monospace`,
      fontSize: '0.9rem',
      tabSize: 4,
      hyphens: `none`,
      overflow: `auto`,
      borderRadius: 6,
      p: 3,
      my: 4
    },
    inlineCode: {
      color: `primary`,
      background: `rgba(233, 218, 172, 0.15)`,
      borderRadius: 3,
      px: `0.4rem`,
      py: `0.2rem`
    },
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid'
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid'
    }
  }
}

【问题讨论】：

标签： prism gatsby theme-ui

【解决方案1】：

prism 功能似乎实际上是针对未来版本的 theme-ui，所以默认（在撰写本文时为v0.3.x）doesn't support it。

要解决这个问题，您可以将 theme-ui* 和 gatsby-plugin-theme-ui 软件包版本更改为 ^0.4.0-rc.1（rc.3 实际上已经发布，但 it's broken atm 所以不要使用它）。

// package.json
{
  ...
  "dependencies": {
    "gatsby-plugin-theme-ui": "^0.4.0-rc.1",
    "@theme-ui/prism": "^0.4.0-rc.1",
    "theme-ui": "^0.4.0-rc.1",
  }
}

【讨论】：