React Markdown showing (`) backquote/backtick on render.

[rifqirosyidi]

Hi there,

I just wondering if the default display for code backtick in markdown i think it should remove the backtick by default but they still showing on my page. here's what is look on rendered page

screenshot:

i also try to inspect html there are ::before and ::after that render those backtick. is there any way i can remove this. and also i use tailwind-typograpy. is this the probem with tailwind or just default react-markdown?

[wooorm]

there are no backticks added with before and after by this project. You should look for the problem somewhere else

[wooorm]

https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L116-L121

[peteristhegreat]

The fix in tailwind typography that adds this is to put an patch in the tailwind.config.js file

The default values for ::before and ::after look like

        'code::before': {
          content: '"`"',
        },
        'code::after': {
          content: '"`"',
        },

This is one possibility for changing it:

module.exports = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code::before': {
              content: '  ',
            },
            'code::after': {
              content: '  ',
            },
            code: {
              background: '#ffeff0',
              wordWrap: 'break-word',
              boxDecorationBreak: 'clone',
              padding: '.1rem .3rem .2rem',
              borderRadius: '.2rem',
            }
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
};

[traversng]

Thanks bud 🤙🏽

[maheshj01]

With the above fix the build fails with error

HookWebpackError: /vercel/path0/static/css/92438371fc38e653.css:717:18: Unknown word

Use this instead

    typography: {
      DEFAULT: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          },
        },
      },
    },