gatsby-remark-prismjsとtailwindcss-typography併用時のフォント指定

2021.06.17

gatsby-remark-prismjsのスタイルが効いていない

当初、背景が黒いPrims.jsのテーマを選んだので気づかなかったが、明るいテーマに変更してみるとsyntax highlighterの一部にPrism.jsのスタイルが効いていなかった。

これはtailwind.config.jsでtailwindcss-typographyのデフォルトの指定を拡張する際に、要素にnullを指定することで削除できる。属性だけを削除したい場合は、その属性にnullを指定すると消すことができる。

• https://github.com/tailwindlabs/tailwindcss-typography/issues/60

いろいろ削除しつつ、せっかくなので、monospaceフォントもOverpass Monoを使うように変更したり、code要素の飾りのバッククオートを削除したりした。

また、global.cssにtailwindcssのディレクティブをimportしているせいか、どうも重たいので、ここで指定していたPrism.jsのスタイルはtailwind.config.jsで指定するようにした。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['Overpass', ...defaultTheme.fontFamily.sans],
      'mono': ['"Overpass Mono"', ...defaultTheme.fontFamily.mono],
    },
    extend: {
      typography: {
        DEFAULT: {
          css: {
            code: {
              color: defaultTheme.colors.gray['900'],
              fontWeight: '400',
              fontFamily: ['"Overpass Mono"', ...defaultTheme.fontFamily.mono].join(','),
            },
            'code::before': {
              content: '""',
            },
            'code::after': {
              content: '""',
            },
            pre: null,
            'pre code': {
              backgroundColor: null,
              borderWidth: null,
              borderRadius: null,
              padding: null,
              fontWeight: '400',
              color: null,
              fontSize: 'inherit',
              fontFamily: ['"Overpass Mono"', ...defaultTheme.fontFamily.mono].join(','),
              lineHeight: 'inherit',
            },
          },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

スマホでフォント指定が適用されない

スマホではなぜかsyntax highlighterにmonospaceが効いていない。global.cssでtailwindcssのディレクティブを使って、Prism.jsのクラスをさらに上書きした。

code[class^=language-],
pre[class^=language-] {
  @apply font-mono !important;
}