Code Block Highlighting v1.2.0: File Name Tabs, Download Snippet and more
By default, the code blocks, beautifully formatted by my plugin Code Block Highlighting, have the file name visible when you hover over them. It’s a great default setting, but sometimes you want them visible at first glance. And sometimes you want your visitor to easily download the code snippet.
With v1.2.0, you can do both.
The file name is now a tab
Set a value in the File name or title field in the block sidebar, and it renders as an editor-style tab sitting flush on top of the code block. No hover required. The tab takes its background and text color from the active Prism theme, so it reads as part of the same surface across all 21 themes rather than a box bolted on top.
Getting the colors right was the interesting part. The plugin already parsed each theme’s base background and color out of its CSS to style the editor canvas, so the tab reuses that. I pulled the parser into a single method, Settings::extract_theme_colors(), and it now feeds both the editor canvas and the frontend custom properties. Two details in the theme CSS made a naive parse wrong: several themes end with a forced-colors @media block declaring background: window, which wins as the last matching rule, and Gruvbox and others declare the background on a selector list like :not(pre)>code[class*="language-"], pre[class*="language-"], where rejecting the whole list because one part contains :not( loses the value entirely. At-rule blocks are stripped first, and selector lists are evaluated per comma-separated part. Synthwave ’84 declares a transparent background, so it resolves to nothing and falls back to the CSS default, which keeps the tab readable instead of invisible.
The tab markup is emitted by PHP in both client-side and server-side modes, so it looks identical either way.
If you prefer the old behavior, File Name Style on the settings page has a Toolbar label option that puts the file name back in the hover toolbar next to the language label. The full option list is in the settings reference.
Developers can rewrite the tab markup with the new wzcbh_file_tab_htmlOpens in a new window filter. It receives the tab HTML, the title, and the language slug, and it only runs when File Name Style is set to Tab above the code block.
Download the snippet
A Download button now sits next to Copy in the code block toolbar. Click it, and the snippet saves as a file. Copying works for a few lines you’re going to paste straight into a terminal. It works less well for a config file or a full class that a reader wants to keep, and once the file name work was done, the rest of this was mostly a naming problem.
The name comes from the block’s File name or title when one is set. Without a title, it falls back to snippet.{ext} with the extension derived from the block’s language: snippet.js, snippet.py, snippet.txt for plain text. Docker blocks download as Dockerfile, because a Dockerfile with an extension isn’t a Dockerfile. The line numbers gutter is excluded from the saved file, so you get the code and nothing else.
The button is enabled by default and can be turned off globally with the Download Snippet setting. Individual blocks override that from the Download button control in the block sidebar, which is a three-way choice: Use global setting, Show, or Hide. PHP resolves the global setting and the block override into a single data-wzcbh-download attribute carrying the file name, which is why the button behaves the same in both highlighting modes without duplicating the logic in JavaScript.
The language-to-extension map is filterable through wzcbh_download_extensions. A value starting with a dot is appended to snippet, and a value without one is used as the complete file name, which is how docker produces Dockerfile. A language missing from the map falls back to snippet.txt. The filter only applies when the block has no file name set: a title always wins over a derived name. See the per-block controls documentation for how the overrides interact.
Bug fixes
File names from the old Code Syntax Block plugin now show up. That plugin stored the file name as a plain title attribute on the <pre> element rather than data-title. The frontend toolbar button already checked both, but the PHP render path only looked at data-title, so migrated posts showed no file name until you opened and re-saved them. PHP now falls back to title the same way the toolbar does, and old posts display correctly with no re-save.
The editor canvas is styled again on several themes. The theme color parser used to read every rule in the file, including the forced-colors @media block that some themes end with. background: window was the last matching declaration, so it won, and the code block in the block editor came out unstyled. Stripping at-rule blocks before parsing fixed it. This only ever affected the editor, never the frontend.
Upgrade notes
Both new features are on by default, so the update changes what your published code blocks look like.
- If you never set file names on your blocks, the tab never appears, and this part changes nothing for you.
- If you do set them and want the previous look, set File Name Style to Toolbar label at Settings > Code Block Highlighting.
- If you don’t want visitors saving snippets, turn off Download Snippet on the same page, or hide it per block from the Download button control.
No database changes, no migration, no re-saving of posts.