Support Mermaid, GeoJSON, TopoJSON, and ASCII STL rendering in SyntaxHighlighter Code Block

[Jiwoon-Kim]

📝 What problem does this address?

Currently, WordPress block editor's SyntaxHighlighter Code block treats all content as plain code, without rendering structured diagram or geometry formats.

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

---

💡 What is your proposed solution?

Enhance the SyntaxHighlighter Code 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

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Loading

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]

Loading

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "ID": 0
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
              [-90,35],
              [-90,30],
              [-85,30],
              [-85,35],
              [-90,35]
          ]
        ]
      }
    }
  ]
}

Loading

{
  "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]]]
}

Loading

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

Loading

---

📌 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!

[Jiwoon-Kim]

This makes me wonder if it might be better to fully integrate Jetpack’s Markdown block into the Gutenberg core and handle its rendering according to the active theme’s styles. It could streamline the experience for users who rely on Markdown-based workflows while maintaining visual consistency across the site.

[Mamaduka]

Core doesn't ship with "SyntaxHighlighter Code block" or with syntax highlighting for code block. The issue needs to reported to the plugin author.

[skorasaurus]

Thanks for reporting; the syntaxhightlighter code block is not a default block included in Gutenberg; it is a separate block that is maintained by automattic at https://github.com/Automattic/syntaxhighlighter. Please create your issue there instead.

[Jiwoon-Kim]

Oh — interesting. I’ve actually never installed the SyntaxHighlighter plugin myself, but the block has been available in my Gutenberg editor.
Is it possible that it’s bundled or pre-installed in some configurations (like via Jetpack or wp.com environments), or maybe left over from a default block set at some point?

Just wanted to clarify since I was able to use it without manually adding the plugin.

[skorasaurus]

I don't know the origin in your case, but my guess is that since it is supported by automattic, is that it is enabled by default on wordpress.com but i don't know for sure because i don't use wordpress.com

[Jiwoon-Kim]

RIP Alex