Code Fences Extended - JSON

FixIt theme provides an interactive JSON viewer using code fences extended syntax.

Overview

The JSON viewer is based on the json-viewer-element project, which provides an elegant way to display and interact with JSON data in your posts.

Usage

To create a JSON viewer, use a code fence with the json language identifier:

1
2
3
4
5
6
7
8

```json
{
  "name": "FixIt",
  "version": "0.4.0",
  "description": "A clean, elegant but advanced blog theme for Hugo",
  "keywords": ["Hugo", "theme", "FixIt"]
}
```

The rendered output will be an interactive JSON viewer with expandable nodes.

Features

The JSON viewer provides the following features:

• Expandable/Collapsible: Click on nodes to expand or collapse them
• Syntax Highlighting: Different colors for keys, values, strings, numbers, etc.
• Copy Support: Copy JSON content with a single click (if enabled)
• Sorting: Sort object keys alphabetically (if enabled)
• Boxed Display: Display JSON in a bordered container (if enabled)

Configuration

You can configure the JSON viewer globally in your site configuration file, per-page basis or per-instance basis.

Global Configuration

Add the following to your hugo.toml (Configuration Options):

1
2
3
4
5
6
7
8

[params]

[params.jsonViewer]
enable = true
expand_depth = 1
copyable = true
sort = false
boxed = true

Page-level Configuration

You can override global settings for individual pages using front matter:

1
2
3
4
5
6

---
title: My JSON Data
jsonViewer:
  expand_depth: 2
  sort: true
---

Instance-level Configuration

You can also customize the JSON viewer for individual instances by adding options directly in the code fence:

1
2
3
4
5
6
7
8

```json {expand_depth=2, copyable=false, sort=true, boxed=false}
{
  "name": "FixIt",
  "version": "0.4.0",
  "description": "A clean, elegant but advanced blog theme for Hugo",
  "keywords": ["Hugo", "theme", "FixIt"]
}
```

The above code fence will render as: