How to tag code blocks for prism.js highlighting
- Step 1Open one content file — Paste the body of a single Markdown/MDX content file, or upload one
.mdfile. One file per run. - Step 2Run the tagger — Click Run. No options — the same nine-pattern detection applies every time.
- Step 3Untagged fences are scanned — Each bare backtick fence is read by first line. Tilde fences and indented blocks are ignored.
- Step 4Prism-ready hints are inserted — Matching blocks gain a lowercase identifier your SSG converts to a
language-*class; other blocks are untouched. - Step 5Rebuild the site — Run your Docusaurus / Astro / Hugo build. Prism applies highlighting to the newly classed blocks.
- Step 6Repeat per file — Tag each content file in turn. Wire the deterministic pass into your content pipeline if you want it automated.
Identifier-to-Prism mapping
Each hint the tool writes is a valid Prism component id, so the matching language component highlights it without an alias.
| Hint inserted | Prism component | Rendered class |
|---|---|---|
python | prism-python | language-python |
javascript | prism-javascript | language-javascript |
rust | prism-rust | language-rust |
go | prism-go | language-go |
php | prism-php | language-php |
sql | prism-sql | language-sql |
html | prism-markup | language-html |
json | prism-json | language-json |
cpp | prism-cpp | language-cpp |
What Prism still needs you to do
The tagger covers nine languages. Anything outside that set you tag manually so Prism can load the right component.
| Situation | Tagger result | Your step for Prism |
|---|---|---|
| Bash / shell command block | Left bare | Tag ``` bash ``` and load prism-bash |
| TypeScript snippet | Tagged javascript | Change to ``` typescript ``` and load prism-typescript if you need TS |
| YAML frontmatter example | Left bare | Tag ``` yaml ``` and load prism-yaml |
| JSX / TSX | Often left bare | Tag ``` jsx / tsx ``` and load the component |
| Diff block | Left bare | Tag ``` diff ``` and load prism-diff |
Cookbook
Diffs from real SSG content files. Inputs are bare fences; outputs are the Prism-ready tagged result.
Python block becomes language-python
Tagged python from the def start, which your SSG renders as language-python for prism-python.
Input:
```
def handler(request):
return {'ok': True}
```
Output:
```python
def handler(request):
return {'ok': True}
```JSON config tagged for Prism
Leading { matches the JSON rule, giving Prism a language-json class to highlight the config.
Input:
```
{
"presets": ["@docusaurus/preset-classic"]
}
```
Output:
```json
{
"presets": ["@docusaurus/preset-classic"]
}
```Bash command stays bare — tag it yourself
Shell is not detected. The block is left untagged; add ``` bash ``` so Prism's bash component can style it.
Input: ``` npm run docusaurus build ``` Output: ``` npm run docusaurus build ``` (Manually change to ```bash for Prism.)
TypeScript snippet tagged javascript
A .ts block opening with const matches the JavaScript pattern. If your theme loads prism-typescript, rename the hint to typescript.
Input:
```
const config: Config = { title: 'Docs' };
```
Output:
```javascript
const config: Config = { title: 'Docs' };
```Your manual Prism tag is preserved
A block you already tagged ``` jsx ``` for Prism is left untouched, so the tagger never clobbers component-specific tags.
Input: ```jsx export default () => <Hero />; ``` Output: ```jsx export default () => <Hero />; ```
Edge cases and what actually happens
Bash / shell blocks unstyled by Prism
Left bareShell is not in the detection set, so command blocks stay bare and Prism shows them plain. Tag them ``` bash ``` and ensure prism-bash is loaded in your theme.
TypeScript tagged javascript
By designThere is no typescript target. TS gets javascript, which prism-javascript highlights adequately. For true TS highlighting, rename to typescript and load prism-typescript.
JSX/TSX content blocks
Left bareJSX rarely matches the patterns unless it opens with a recognised keyword. Tag ``` jsx / tsx ``` by hand and load the matching Prism component.
HTML maps to prism-markup
SupportedThe html hint produces a language-html class that Prism's markup component highlights. No extra component is needed for HTML.
Manual Prism tag preserved
PreservedAny hint you set for a specific Prism component (e.g. ``` graphql ```) is kept. The tagger only fills bare fences, so your component-specific tags survive.
Tilde fences in MDX
Not detectedOnly backtick fences are processed. Tilde (~~~) fences common in some MDX content are skipped — convert them to backticks first.
Go block tagged javascript
By designJavaScript is tested before Go and shares const /var . A Go block opening with const ( becomes javascript. Lead with package or func for go.
Brace-first non-JSON block
By designA block starting with { or [ is tagged json. Watch for non-JSON config (e.g. JS object literals) being given a language-json class — review and correct.
Content file over the limit
Rejected over limitFree tier accepts up to 500,000 characters / 1 MB per file. Large generated docs beyond that are rejected; tag them on a higher tier (Pro: 5,000,000 / 10 MB) or split first with md-splitter.
Whole content folder at once
One per runThis tool processes a single file per run. For a site-wide pass, tag each content file individually, combine them with md-merger first, or script the deterministic transform into your pipeline.
Frequently asked questions
Does Prism need a specific tag format?
Prism reads the language-* class your SSG generates from the fence hint. The tool writes standard lowercase identifiers like python and json, which map directly to Prism component names.
Why isn't my Bash block highlighted after tagging?
Shell is not detected, so the block was left bare. Tag it ``` bash ``` and confirm prism-bash is included in your theme's component list.
Which languages get tagged automatically?
Python, JavaScript, Rust, Go, PHP, SQL, HTML, JSON, and C++. Everything else — Bash, YAML, TS, JSX, diff — you tag manually for Prism.
Will it work with custom Prism plugins?
Yes. The tool only adds the fence hint. Line-highlighting, copy-button, and other Prism plugins read the same language-* class and continue to work.
Does it handle TypeScript for Prism?
It tags TS as javascript. If your theme loads prism-typescript and you want TS-specific highlighting, rename the hint to typescript after running.
Is HTML supported?
Yes — the html hint yields a language-html class, which Prism's markup component highlights without any extra setup.
Will it overwrite a tag I set for a Prism component?
No. Existing hints, including component-specific ones like graphql or jsx, are preserved. Only bare fences are filled.
Can I tag all my content files at once?
No — one file per run. Process each content file individually, or wire the deterministic transform into your build pipeline.
Does it work with Astro, Docusaurus, and Hugo?
Yes. All three turn the fence hint into a language-* class. The tool just supplies the hint; your SSG and Prism do the rest. There are no options to configure — the same pass runs every time.
Should I scan content for secrets before publishing?
Good idea for docs sites. Run md-secret-redactor over example code to catch leaked keys, then tag the blocks. Both are deterministic browser-side passes you can chain in a content pipeline.
Is it safe to run before every build?
Yes. It is idempotent — tagged blocks are skipped — so only newly added bare fences change on a re-run.
Where is my content processed?
In your browser. Unpublished content never leaves the page, which suits drafts and private docs sites.
Privacy first
All Markdown processing runs locally in your browser using JavaScript. No file is ever uploaded to JAD Apps servers — only metadata counters are saved for signed-in dashboard stats.