My custom code style for Typography by TailwindCSS & HighlightJS

If you are using Tailwind’s typography plugin to style text rendered from Markdown you may have seen these default inline code and code block styles:

For me, it didn’t look well. Especially inline code. So I went over to style it a bit.

Highlight JS

First of all, I checked how I can highlight code inside code blocks. The markdown-it package that I use for Markdown parsing contains a special option for this.

I have tried setting highlight using the provided example, but something didn’t work out, and I also found markdown-it-highlightjs plugin that simplifies everything.

You just set it up as written in the docs and specify a style that you want to use for highlighting as global CSS.

That’s how it’s done with me in Nuxt. In the nuxt.config.js:

export default {
  /*
   ** Global CSS
   */
  css: [
    {
      src: "~/node_modules/highlight.js/styles/github.css",
      lang: "css"
    }
  ],
}

As you may see, I have chosen the GitHub highlight style. It worked best with the background I decided to use for code blocks.

The whole list of available styles you may find here. And here is a helpful page where you can check the look of each available style.

Typography

Next part was setting everything up in typography plugin.

First, I set code block background to lightest grey I had in the palette, so code block would be highlighted, but won’t stand out as much as default one. You can see how it’s done in pre related setters in code I’ll provide below.

Second, I changed the look of the inline code. For this code styles had to be modified. I made the lightest grey background on the code text too with red colour for the text itself. And I also removed ` symbol at the beginning and the end of inline code.

Here is the full code that I used in tailwind.config.js:

module.exports = {
  theme: {
    colors: {
      grey: {
        100: "#F5F7FA",
        1000: "#1F2933"
      },
    },
    typography: theme => ({
      default: {
        css: {
          pre: {
            color: theme("colors.grey.1000"),
            backgroundColor: theme("colors.grey.100")
          },
          "pre code::before": {
            "padding-left": "unset"
          },
          "pre code::after": {
            "padding-right": "unset"
          },
          code: {
            backgroundColor: theme("colors.grey.100"),
            color: "#DD1144",
            fontWeight: "400",
            "border-radius": "0.25rem"
          },
          "code::before": {
            content: '""',
            "padding-left": "0.25rem"
          },
          "code::after": {
            content: '""',
            "padding-right": "0.25rem"
          }
        }
      }
    })
  },
  plugins: [require("@tailwindcss/typography")],
};

All the modifications are laid in typography part.

Result

With all this set, code in blog posts now look like this:

Yeah, you already have seen this, but in case something will change 🙃.