289

Is there a way to nicely format/style JSON code in Github Wiki (i.e Markdown preferred)?

Something like this with few colors (or bold) and correct indentation:

http://www.freeformatter.com/json-formatter.html#ad-output

2
  • Just paste already-prettified JSON into a code block.
    – Matt Ball
    Commented Feb 15, 2013 at 18:41
  • @MattBall But that doesn't work?
    – Dodgie
    Commented Mar 13, 2018 at 20:55

4 Answers 4

618

Some color-syntaxing enrichment can be applied with the following blockcode syntax

```json
Here goes your json object definition
```

Note: This won't prettify the json representation. To do so, one can previously rely on an external service such as jsbeautifier.org and paste the prettified result in the wiki.

0
152
```javascript
{ "some": "json" }
```

I tried using json but didn't like the way it looked. javascript looks a bit more pleasing to my eye.

2
  • 19
    +1 - I like it so I can put // comments in the block for a little description. Since it's not valid JSON, the json block makes it ugly
    – NG.
    Commented Oct 10, 2013 at 23:04
  • 1
    Thanks for the hint, for some reason GitHub was making a simple JSON array unnecessarily ugly, now it's just fine :)
    – Kilian
    Commented Aug 6, 2014 at 21:37
52

2019 Github Solution

```yaml
{
   "this-json": "looks awesome..."
}

Result

enter image description here

If you want to have keys a different colour to the values, set your language as yaml

@Ankanna's answer gave me the idea of going through github's supported language list and yaml was my best find. (No other language had keys a different colour to values on github).

Also you can use comments in yaml with //

3
  • 1
    Still the same method in 2023
    – Olney1
    Commented Jun 30, 2023 at 20:01
  • For my resolve, I must add a closing ``` with the same indentation, otherwise there are issues with writing another code-block. Commented Nov 15, 2023 at 21:32
  • Yeah, we do need the closing ``` on github, but unfortunately here on SO, there is no way to display those in this answer without wrecking the formatting for the rest of the answer Commented Jan 23 at 3:10
14

I encountered the same problem. So, I tried representing the JSON in different Language syntax formats.But all time favorites are Perl, js, python, & elixir.

This is how it looks.

The following screenshots are from the Gitlab in a markdown file. This may vary based on the colors using for syntax in MARKDOWN files.

JsonasPerl

JsonasPython

JsonasJs

JsonasElixir

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.