Automattic / Automattic/jetpack

Feature Request: Support Mermaid, GeoJSON, TopoJSON, and ASCII STL rendering in Jetpack Markdown Block

Open
#44,323 6 comments 0 reactions 0 assignees View on GitHub
[Block] Markdown [Feature] Markdown [Plugin] Jetpack [Pri] Low Good For Community New Feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.