Only works on localhost about gridsome-plugin-remark-prismjs-all

[DavidCouronne]

In my repo, I add Tailwind CSS after, just for testing install without plugin.
I think the "easy way" to add prism.js with Tailwind is to create a css file with /* purgecss start ignore */ and /* purgecss end ignore */ tags.

I you want to use tomorrow theme for example, locate prism-tomorrow.css in node_modules/prism/theme, copy all content and create a new file in your assets folder.

In /scr/css/tomorrow.css:

/* purgecss start ignore */

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;

...

/* purgecss end ignore */

And import this file in your main.js file.

You can find more theme here: https://github.com/PrismJS/prism-themes

[DavidCouronne]

Hello,

The problem is the use of prism.js with TailwindCSS and PurgeCSS.
In development mode, purgeCSS is not used: you can see the syntax highlighting.
But in production mode, purgeCSS is use...

With the plugin gridsome-plugin-remark-shiki, it is not a problem: the style is directely injected in the code.

<span style="color: #88C0D0">getHighlighter</span>

In order to keep safe the syntax highlighting, you must adapt your postcss.config.js

For example:

const join = require("path").join;
const tailwindJS = join(__dirname, "tailwind.js");
const purgecss = require("@fullhuman/postcss-purgecss");

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

const plugins = [require("tailwindcss")(tailwindJS), require("autoprefixer")];

if (process.env.NODE_ENV === "production") {
  plugins.push(
    purgecss({
      content: [
        "./layouts/**/*.vue",
        "./components/**/*.vue",
        "./pages/**/*.vue"
      ],
      whitelist: ["html", "body"],
      whitelistPatternsChildren: [/^token/, /^pre/, /^code/],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ["html", "vue"]
        }
      ]
    })
  );
}

module.exports = {
  plugins
};

See https://vuedose.tips/tips/remove-unused-css-with-purge-css/ for more information, or google "purgecss with prism.js"

[peoray]

I don't have a postcss file, what I have is a purge.config.js file. here is my repo

[peoray]

Also, I would need help on the tags/classes to whitelist

[peoray]

In this your repo, you seems to comment out the line that activates purge css in production.

[peoray]

Works fine, I think this is the best solution. Thanks for all your help