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

问题描述

我正在使用@ theme-ui / prism来格式化Markdown文件中的代码块文本。我使用的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'
    }
  }
}

解决方法

棱镜功能似乎实际上是主题UI的未来版本的目标，因此默认功能（在撰写本文时为doesn't support it）。

要解决此问题，您可以将v0.3.x和theme-ui*软件包的版本更改为gatsby-plugin-theme-ui（rc.3实际上已经淘汰，但是it's broken atm请勿使用）

^0.4.0-rc.1

gatsby prism theme-ui