WhatsApp Web: monospace for code blocks
Renders triple-backtick code fragments in a real monospace font with a tinted background.
Code to copy
/* Render code-fenced messages in a proper monospace block */
#main [data-testid="msg-container"] code,
#main [data-testid="msg-container"] pre,
#main span[class*="code-block"],
#main span:where([class*="monospace"]) {
font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace !important;
font-size: 13px !important;
background: rgba(0,0,0,0.05) !important;
padding: 6px 8px !important;
border-radius: 6px !important;
display: inline-block !important;
white-space: pre-wrap !important;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.