How to Format Code Blocks in Blogger

How to Format Code Blocks in Blogger

Blogger’s default editor strips away some HTML formatting, but you can use Prism.js to style your code blocks.

Step 1: Add Prism.js to Your Blogger Theme

Go to Theme > Edit HTML and add the following before </head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

Step 2: Use <pre><code> Tags in Your Blog Post

When writing a new post in HTML mode, use the following format:

<pre><code class="language-batch">
@echo off
setlocal enabledelayedexpansion
for %%F in (*.zip) do (
    set "foldername=%%~nF"
    mkdir "!foldername!"
    tar -xf "%%F" -C "!foldername!"
)
echo Extraction complete!
pause
</code></pre>

Step 3: Preview and Publish

Switch to Compose mode to check formatting. The code should appear in a gray-colored block.

Example Output:

@echo off
setlocal enabledelayedexpansion
for %%F in (*.zip) do (
    set "foldername=%%~nF"
    mkdir "!foldername!"
    tar -xf "%%F" -C "!foldername!"
)
echo Extraction complete!
pause

Thanks to ChatGPT for this information