Tailwind, prose, markdown - code samples show the: ` character

support
1

When I inline write i.e. {{ markdown . }} I wrap the one line snippet in `tickmarks` - the code gets correctly rendered in HTML - but will include the tickmarks >>> `{{ markdown . }}`

That seems to apply only the inline snippets that are HTML rendered with <code>

Stand alone snippets that are created with “tab” are wrapped in <pre><code> and render correctly, they can’t be inline though.

Is that a hugo issue or a Tailwind issue? Not a huge issue, just a question.

Source: markdown
Tailwind: 2.2.* or 3.0.* + typography 0.5.0

2

That’s Tailwind typography works.

2 Likes
3

Interesting. In the css I see:

.prose :where(code):not(:where([class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"] *))::after {
  content: "`";
}

so I change main.css from

@tailwind base;
@tailwind components;
@tailwind utilities;

to:

@tailwind base;
@tailwind components;
@tailwind utilities;

.prose :where(code):not(:where([class~="not-prose"] *))::before {
    content: "";
  }
  .prose :where(code):not(:where([class~="not-prose"] *))::after {
    content: "";
  }

…seems to work fine.

Thank you!

4

I think you might misunderstand what is going on, while still maybe having fixed your issue. They had a blog post today about the not-prose class. Basically, you tell tailwind to treat everything inside of this class as not transformed via the typography plugin.

Read here: Effortless Typography, Even in Dark Mode – Tailwind CSS

If you want to have a long-term working solution you might want to understand the issue better and maybe be able to solve it without changing/overriding the styles of the plugin.

Edit: something along the lines of this:

pre, code {
  @apply not-prose;
}
5

The not-prose did not work for me, although it looks short and elegant. But I found this old tailwind.config.js 2.0 hack and it still works in 3.0:

module.exports = {
  content: ['./layouts/**/*.html'],
  theme: {
    extend: {
        typography: {
            DEFAULT: {
                css: {
                    "code::before": {content: ''},
                    "code::after": {content: ''}
                }
            }
        }
    }
},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.