Automattic / Automattic/jetpack
Feature Request: Support Mermaid, GeoJSON, TopoJSON, and ASCII STL rendering in Jetpack Markdown Block
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### What
Enhance the **Jetpack Markdown block** to support the following code formats and render them inline, similarly to how GitHub does
### How
Many platforms (like GitHub and VSCode) already support inline rendering of Mermaid diagrams, GeoJSON maps, TopoJSON data, and ASCII STL geometry previews — which dramatically improves documentation clarity for developers, educators, and technical writers.
In Gutenberg, it is currently difficult to visualize flowcharts, JSON-based geometries, or 3D model data within posts without embedding third-party services or custom HTML.
https://docs.github.com/ko/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
---
Enhance the **Jetpack Markdown block** to support the following code formats and render them inline, similarly to how GitHub does:
* `mermaid` diagrams
* `geojson` maps
* `topojson` topologies
* `stl` (ASCII STL 3D models)
Each of these could be detected by code block language setting (like \`\`\`mermaid) and rendered using existing JS libraries:
* **Mermaid.js** for diagrams
* **Leaflet** or **MapLibre** for GeoJSON
* **TopoJSON client** for topology rendering
* **Three.js** for ASCII STL previews
The rendering should remain optional and fallback gracefully to plain code display if JS is disabled.
---
## 📖 Example
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
```mermaid
graph LR
A[Configure Multisite Network] --> B[Auto-generate DNS-SD Records]
B --> C[Deploy Internal WebSub Hub]
C --> D[Integrate with Standard ActivityPub Gateways]
```
```geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"ID": 0
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-90,35],
[-90,30],
[-85,30],
[-85,35],
[-90,35]
]
]
}
}
]
}
```
```topojson
{
"type": "Topology",
"transform": {
"scale": [0.0005000500050005, 0.00010001000100010001],
"translate": [100, 0]
},
"objects": {
"example": {
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"properties": {"prop0": "value0"},
"coordinates": [4000, 5000]
},
{
"type": "LineString",
"properties": {"prop0": "value0", "prop1": 0},
"arcs": [0]
},
{
"type": "Polygon",
"properties": {"prop0": "value0",
"prop1": {"this": "that"}
},
"arcs": [[1]]
}
]
}
},
"arcs": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]
}
```
```stl
solid cube_corner
facet normal 0.0 -1.0 0.0
outer loop
vertex 0.0 0.0 0.0
vertex 1.0 0.0 0.0
vertex 0.0 0.0 1.0
endloop
endfacet
facet normal 0.0 0.0 -1.0
outer loop
vertex 0.0 0.0 0.0
vertex 0.0 1.0 0.0
vertex 1.0 0.0 0.0
endloop
endfacet
facet normal -1.0 0.0 0.0
outer loop
vertex 0.0 0.0 0.0
vertex 0.0 0.0 1.0
vertex 0.0 1.0 0.0
endloop
endfacet
facet normal 0.577 0.577 0.577
outer loop
vertex 1.0 0.0 0.0
vertex 0.0 1.0 0.0
vertex 0.0 0.0 1.0
endloop
endfacet
endsolid
```
---
## 📌 Why this matters
* **Improves technical documentation**
* Helps content creators share diagrams, data, and models without external embeds
* Modernizes the block editor’s capabilities for technical blogs, tutorials, and documentation sites
---
## 📎 Related
* GitHub supports this natively in markdown
* VSCode offers live previews for these formats
* Many headless CMS platforms allow Mermaid and GeoJSON rendering
---
## 🙌 Thank you!
Contributor guide
Research direction
Start at the Jetpack Markdown block and its existing code-block rendering path. Review how language settings are detected and how plain-code fallback works, then define separate rendering behavior for Mermaid, GeoJSON, TopoJSON, and ASCII STL, including the optional JavaScript requirement. Done means each listed format renders inline when enabled and remains readable as plain code when JavaScript is disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, markdown, three.js
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100