Much needed: well-highlighted JSON log viewer

Question

Using winston for node.js logging, I get json log files. A log file in this vein is simply a sequence of (newline delimited) json objects. This is great for log querying and treating logs as first-class data!

However, both Sublime and gedit (at least the versions of them I'm using on Ubuntu, sublime 2 and gedit 3.6.2), poorly highlight json - they use the same color for keys and values, making any log drilling quite painful and really impossible to go through in any remotely humane manner.

Existing chrome extensions for json highlighting aren't helpful here either - they can't handle a collection of json objects and thus fail displaying these log files unless I manually turn them into an array within a synthetic parent object first (thus turning them into a json object). This is tedious in the case of viewing a log file that is still being written to and in general......

Is there any tool that can both swallow json log files as is, and at the same time highlight keys in a different color than values, so that json logs are also friendly to man, not only to machine?? this is a real pain.

Thanks!

Answer 1

If you like the default Monkai Theme, check out MonokaiJSON+ Theme! It supports strings, dictionaries, arrays and all of these mixed as well!

https://github.com/ColibriApps/MonokaiJsonPlus

Answer 2

Apart from the other great answers posted, another really simple and very elegant solution to the problem is to use the Boxy Theme. It has syntax highlighting by default for JSON when using one of the included color schemes.

Installation

Install using Package Control, where Boxy is listed as Boxy Theme.

1. Open Command Palette via Command+Shift+P (mac) / Ctrl+Shift+P (win)
2. Choose Package Control: Install Package
3. Find Boxy Theme and hit Enter
4. Restart Sublime Text
5. Repeat step 1, then choose Package Control: Satisfy Dependencies
6. Restart Sublime Text

Activation

Activate the UI theme and color scheme using commands provided by the theme:

1. Open Command Palette via Command+Shift+P (mac) / Ctrl+Shift+P (win)
2. Choose Boxy Theme: Activation or Boxy Theme: Configuration
3. Hit Enter
4. Restart Sublime Text

Extended Configuration →

---

Boxy Theme with Boxy Tomorrow Color Scheme applied. Color variations are available 10 levels deep:

Answer 3

looking at a json file in SublimeText, I realised keys and values have different scopes. so it should be very trivial to customize your color scheme and add different color for keys and values.

keys have scope of source.json meta.structure.dictionary.json string.quoted.double.json while values have source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json

so if you add this snippet at the bottom of you color scheme rules you should see them in different colors:

    <dict>
        <key>name</key>
        <string>Json Keys</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FF0000</string> <!-- your keys color -->
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>JSON Values</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#00FF00</string> <!-- your custom color -->
        </dict>
    </dict>

Answer 4

Mixing Allen Bargui's and MattDMo's answers, you can change the color of the nested keys/values by simply adding more dicts specifying the depth of the code by adding a meta after the source.json word.

Locate the theme file by going to Preferences > Browse Packages and then inside the Color Scheme - Default folder. Edit it by adding these lines:

<dict>
    <key>name</key>
    <string>Json Keys - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Json Keys</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

It's important to add the deeper ones BEFORE the rest, as Sublime will select the first matching occurrence. I guessed adding more meta would work for further depths but it actually didn't... But it did the trick for depth 1 at least.

Answer 5

Check out the Neon Color Scheme, available via Package Control and Github for Sublime Text. Keys and values are highlighted in different colors, and there are different key colors for different levels.

Full disclosure: I'm the maintainer for this project, but I really think it'll help you out - it certainly helps me when working with multi-leveled JSON files like the one shown above.

Answer 6

I modified original twilight theme to add rules for prettier json. It's a modified version of @MattDMo 's answer, and has the similar different key colors for different levels. You can get it from here

https://github.com/shaunakv1/twilight-tmTheme-better-json-highlight

Here's how JSON looks: