Just

Removing Tailwind Typography's backticks around inline code blocks

Morten Just

Tailwind Typography is a great way to style your transformed markdown into best practice typography. Except this one little detail. The backquotes around inline code blocks. Here's what it looks like out of the box:

A block of text showing the backticks around the code blocks

Removing the inline code backticks

For some reason, Tailwind adds backticks, making the overall texture of the text noisy. Let's fix that.

Method 1: Using a class

<div class="prose-code:before:content-none prose-code:after:content-none">
    `This` will not have backticks
</div>

This works great on a case by case basis. But if we just want to get rid of those backticks once and for all, let's grab a bigger hammer

Method 2: Changing tailwind.config.js

Here's how to overwrite those backticks.

module.exports = {
    theme: {
      extend: {
        typography(theme) {
                "code::before": {
                  content: '""',
                },
                "code::after": {
                  content: '""',
                },
            }
        }
    }

Now that we're here, it's easy to add more styling to those inline code blocks.


module.exports = {
    theme: {
      extend: {
        typography(theme) {
            code: {
                fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;",                     
                backgroundColor: "rgba(255,255,255,0.1)",
                opacity: 0.8,
                },
                "code::before": {
                content: '""',
                    "padding-left": "0.25rem"
                },
                "code::after": {
                content: '""',
                    "padding-right": "0.25rem"
                },
            }
        }
    }
{

And here's the final result.

A block of text showing the now disappeared backticks around code blocks

And that's what we wanted. I really can't think of a good reason to artificially add the backticks other than "it's easier to see that it's code, and programmers are almost all familiar with Markdown, so they'll know what the ticks mean." Luckily, it's not Dhard to change that behavior. If you know how.


Cover Image for Convert a Storyboard lifecycle to a  modern SwiftUI app
Code

Convert a Storyboard lifecycle to a modern SwiftUI app

How to turn a Storyboard-based macOS app into a SwiftUI app