How to highlight JSON block in Gitlab Wiki (Markdown)?

Question

I want to highlight & color the syntax for json data in GitLab Markdown.

Input Json

[
  {
    "id": 1,
    "first_name": "Jeanette",
    "last_name": "Penddreth",
    "gender": "Female"
  },
  {
    "id": 2,
    "first_name": "Giavani",
    "last_name": "Frediani",
    "gender": "Male"
  }
]

Expected Output

When I was copy paste the beautified json data in wiki it seems to be like paragraph, which leads to less readability .

pvrforpranavvr · Accepted Answer · 2020-04-23T15:32:34.637

8

Method1

Place three semicolons on the start and end of json data like below.

;;;

json data here

;;;

NB: When we are placing any text before leading three semicolons this method won't work.

Reference

Method2

```json

json data here

```

edited Apr 23 '20 at 15:32

answered Apr 22 '20 at 17:42

pvrforpranavvr

2,708
2
24
34

1

Just additional info, for other languages it works as well: ``` ```yaml ``` or ``` ```php ``` – Hermann Schwarz Nov 29 '21 at 15:09
the backticks work on github whereas semicolons dont – supi Feb 17 '22 at 15:17
The first method seems to be GitHub specific but the second one works with other wiki services – hui chen Nov 25 '22 at 10:39

score 0 · Answer 2 · answered Apr 22 '20 at 18:50

0

This is similar to How to style JSON block in Github Wiki?

Use a code fence:

```json

your JSON here

```

See https://docs.gitlab.com/ee/user/markdown.html#colored-code-and-syntax-highlighting

This will add color highlighting but won't beautify the code (change whitespace) -- you have to do that yourself which you can do with jq on the command line or using an external service such as https://beautifier.io/

answered Apr 22 '20 at 18:50

Aleksey Tsalolikhin

1,518
7
14

Yes. You are correct. For beautify we need to use some beautifier. Seems that I have inputted non beautified json. That's an issue with the question I asked. I will edit it. – pvrforpranavvr Apr 23 '20 at 15:13

score 0 · Answer 3 · answered May 22 '22 at 21:14

GitLab 15.0 (May 2022) does include syntax highlighting

GitLab 15.0 includes a few exciting improvements to speed up your workflow in the WYSIWYG Markdown editor for your wikis.

You’ll find no more un-styled, monochrome code blocks: choose from over 100 languages in the dropdown list above the code block so your CSS, YAML, and Python code are distinct from each other with accurate syntax highlighting.

The code blocks will even inherit your preferred syntax highlighting theme.

You can also quickly copy the code block to your clipboard for use in your code editor of choice.

How to highlight JSON block in Gitlab Wiki (Markdown)?

3 Answers3