[Feature proposal] Prose core plugins

[estevanmaito]

I'm trying to add Prism to highlight code (using the same package as you guys are using for the blog, @mapbox/rehype-prism with Next).

The problem I'm facing is that the classes added by the highlight styles are overwritten by pre and code styles inside prose.

Also, overwriting typography styles in tailwind.config only work to certain extent, as code styles leak to other selectors: if I overwrite pre code styles so code boxes have one style, while small snippets using just code have another, the styles from the later would be inherited.

Edit: as configs are always merged, there isn't a way to completely overwrite a rule without specific styles, as it will be added back again.

Possible solution

I was thinking about "prose core plugins": it's the same concept as Tailwind CSS, but would be applied to certain components like: headings, table, code, lists and text(?)

This way you could easily remove certain styles and provide your own.

Expand Prism theme CSS

/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+bash+markdown+jsx+yaml */
/**
 * prism.js Funky theme
 * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
 * @author Lea Verou
 */
code[class*='language-'],

pre[class*='language-'] {

font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

font-size: 1em;

text-align: left;

white-space: pre;

word-spacing: normal;

word-break: normal;

word-wrap: normal;

line-height: 1.5;
-moz-tab-size: 2;

-o-tab-size: 2;

tab-size: 2;
-webkit-hyphens: none;

-moz-hyphens: none;

-ms-hyphens: none;

hyphens: none;

}
/* Code blocks /

pre[class='language-'] {

padding: 0.4em 0.8em;

margin: 0.5em 0;

overflow: auto;

background: black;

background-size: 1em 1em;

}
code[class*='language-'] {

background: black;

color: white;

box-shadow: -0.3em 0 0 0.3em black, 0.3em 0 0 0.3em black;

}
/* Inline code /

:not(pre) > code[class='language-'] {

padding: 0.2em;

border-radius: 0.3em;

box-shadow: none;

white-space: normal;

}
.token.comment,

.token.prolog,

.token.doctype,

.token.cdata {

color: #aaa;

}
.token.punctuation {

color: #999;

}
.token.namespace {

opacity: 0.7;

}
.token.property,

.token.tag,

.token.boolean,

.token.number,

.token.constant,

.token.symbol {

color: #0cf;

}
.token.selector,

.token.attr-name,

.token.string,

.token.char,

.token.builtin {

color: yellow;

}
.token.operator,

.token.entity,

.token.url,

.language-css .token.string,

.token.variable,

.token.inserted {

color: yellowgreen;

}
.token.atrule,

.token.attr-value,

.token.keyword {

color: deeppink;

}
.token.regex,

.token.important {

color: orange;

}
.token.important,

.token.bold {

font-weight: bold;

}

.token.italic {

font-style: italic;

}
.token.entity {

cursor: help;

}
.token.deleted {

color: red;

}
/* Plugin styles: Diff Highlight */

pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),

pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {

background-color: rgba(255, 0, 0, 0.3);

display: inline;

}
pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),

pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {

background-color: rgba(0, 255, 128, 0.3);

display: inline;

}

[geekish]

This sounds ideal, really. I'm running into the same problem trying to implement Prism.

I'm working typography into two different projects and I've found I'm making a lot of overrides in my config file that could be avoided if it was structured more like Tailwind itself. Especially for this use case. I really just want to nuke all code/pre styling.

[adamwathan]

I'm not sure I understand the proposal, can you provide an example of what you mean? Where do "prose core plugins" live, how are they configured, how does the user interact with the, what is a concrete example of a prose core plugin?

To disable the code colors that are fighting with Prism you should just need to do this:

pre: { color: null, backgroundColor, null },
'pre code': { color: null, backgroundColor: null },

[estevanmaito]

To disable the code colors that are fighting with Prism you should just need to do this:

As I said earlier: if I overwrite pre code styles so code boxes have one style, while small snippets using just code have another, the styles from the later would be inherited.

This is the code I have for code:

code: {
  backgroundColor: defaultTheme.colors.gray[200],
  borderRadius: defaultTheme.borderRadius.default,
  paddingLeft: defaultTheme.spacing[1],
  paddingRight: defaultTheme.spacing[1],
  display: 'inline-block',
  lineHeight: defaultTheme.lineHeight['snug'],
},

Now code elements inside pre inherit these styles, that is, they get back backgroundColor and get the default color that I didn't overwrite.

Prism selectors also have less specificity because they are targeting elements like code[class*='language-'],pre[class*='language-'].

Core plugins

I will work to improve my proposal as I'm not familiar with the inner working of the corePlugins inside Tailwind CSS. But as a summary for now:

• With Tailwind you can use corePlugins to disable unwanted features, ex:

module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

• My idea would be something like this, but living inside the typography plugin, as a property, like:

theme: {
  extend: {},
  typography: {
    corePlugins: {
      code: false,
      lists: false,
    },
    default: {

This way I could completely disable all styles related to code and lists and provide my own or something.

I'll refine this idea and call back.

[yonydev]

Hi everyone!

Does anyone found a solution to this issue?

[MaluNoPeleke]

This comment was quite helpful for me: tailwindlabs/tailwindcss#2021 (reply in thread)

[reinink]

Hey all, I am going to close this issue, as it hasn't really gone anywhere. Plus, since this has been posted we've made big changes to this plugin (see here), making it easier than ever to customize the typography styles 💪

That said, reviewing this issue myself, I'm not sure if Adam's point was fully understood. Adam is not suggesting that you overwrite the styles that are applied for the code and pre elements in this plugin — he's suggesting that you completely remove them from being generated in the first place:

To disable the code colors that are fighting with Prism you should just need to do this:

pre: { color: null, backgroundColor, null },
'pre code': { color: null, backgroundColor: null },

By setting all the values to null, they will be excluded entirely 👍