diff --git a/content/en/functions/resources/PostProcess.md b/content/en/functions/resources/PostProcess.md
index 00720e3f9..766817ff5 100644
--- a/content/en/functions/resources/PostProcess.md
+++ b/content/en/functions/resources/PostProcess.md
@@ -27,51 +27,51 @@ Step 1
Step 2
: Install the required Node.js packages in the root of your project:
-```sh
-npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
-```
+ ```sh {copy=true}
+ npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
+ ```
Step 3
: Enable creation of the `hugo_stats.json` file when building the site. If you are only using this for the production build, consider placing it below [`config/production`].
-{{< code-toggle file=hugo >}}
-[build.buildStats]
-enable = true
-{{< /code-toggle >}}
+ {{< code-toggle file=hugo copy=true >}}
+ [build.buildStats]
+ enable = true
+ {{< /code-toggle >}}
-See the [configure build] documentation for details and options.
+ See the [configure build] documentation for details and options.
Step 4
: Create a PostCSS configuration file in the root of your project.
-```js {file="postcss.config.js" copy=true}
-const autoprefixer = require('autoprefixer');
-const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;
+ ```js {file="postcss.config.js" copy=true}
+ const autoprefixer = require('autoprefixer');
+ const purgeCSSPlugin = require('@fullhuman/postcss-purgecss').default;
-const purgecss = purgeCSSPlugin({
- content: ['./hugo_stats.json'],
- defaultExtractor: content => {
- const els = JSON.parse(content).htmlElements;
- return [
- ...(els.tags || []),
- ...(els.classes || []),
- ...(els.ids || []),
- ];
- },
- // https://purgecss.com/safelisting.html
- safelist: []
-});
+ const purgecss = purgeCSSPlugin({
+ content: ['./hugo_stats.json'],
+ defaultExtractor: content => {
+ const els = JSON.parse(content).htmlElements;
+ return [
+ ...(els.tags || []),
+ ...(els.classes || []),
+ ...(els.ids || []),
+ ];
+ },
+ // https://purgecss.com/safelisting.html
+ safelist: []
+ });
-module.exports = {
- plugins: [
- process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null,
- autoprefixer,
- ]
-};
-```
+ module.exports = {
+ plugins: [
+ process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null,
+ autoprefixer,
+ ]
+ };
+ ```
-> [!note]
-> If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example] and issue [#7333].
+ > [!note]
+ > If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example] and issue [#7333].
Step 5
: Place your CSS file within the `assets/css` directory.
@@ -79,17 +79,17 @@ Step 5
Step 6
: If the current environment is not `development`, process the resource with PostCSS:
-```go-html-template
-{{ with resources.Get "css/main.css" }}
- {{ if hugo.IsDevelopment }}
-
- {{ else }}
- {{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
-
+ ```go-html-template {copy=true}
+ {{ with resources.Get "css/main.css" }}
+ {{ if hugo.IsDevelopment }}
+
+ {{ else }}
+ {{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
+
+ {{ end }}
{{ end }}
{{ end }}
-{{ end }}
-```
+ ```
## Environment variables
@@ -124,7 +124,7 @@ let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.con
## Limitations
-Do not use `resources.PostProcess` when running Hugo's built-in development server. The examples above specifically prevent this by verifying that the current environment is not "development".
+Do not use `resources.PostProcess` when running Hugo's built-in development server. The examples above specifically prevent this by verifying that the current environment is not `development`.
The `resources.PostProcess` function only works within templates that produce HTML files.