Ask Daniel's CODEX · index

Ask Daniel's CODEX

Notepad++ JSON Colorization

Notepad++ JSON Colorization

Exported from ChatGPT | 2025-01-29 | 8 messages

You:

I am using Notepad++ to write/edit json code. I have json plugins enabled, and I am using a custom style (configurator) but can't figure out how to color the text values differently than the code/script. See images. I want to do something like you do when writing json so I can read the values easier.

ChatGPT:

In Notepad++, the default JSON syntax highlighting does not differentiate between JSON keys and values in the way you want (with values appearing in a different color from keys and structure). However, you can achieve better readability by following these steps:

1. Use a JSON-specific Language Setting

Notepad++'s built-in JSON support is limited, so try manually selecting JSON as the language:

2. Customize Colors Using the Style Configurator

Since you are using a custom theme (Daniel-style), you can manually adjust the JSON highlighting:

  1. Open the Style Configurator

- Settings > Style Configurator - In the left pane, select JSON (if available) or JavaScript (since JSON is based on JavaScript).

  1. Modify the Color for String Values

- Locate STRING or VALUE - Change the Foreground color to something distinct (e.g., green, blue, or orange).

  1. Modify the Color for Keys

- Locate PROPERTY NAME or KEY - Choose a different Foreground color from values.

  1. Modify Numbers and Booleans

- Locate NUMBER and BOOLEAN - Assign a separate color to differentiate them.

3. Install a JSON Syntax Plugin

If the default JSON highlighting is not detailed enough, try installing a JSON-specific plugin:

You can install these from:

4. Use an External Theme for JSON Readability

Some community themes enhance JSON readability with clear distinctions between keys, values, numbers, and punctuation. You can download and apply them from:

Alternative Approach: Try VS Code for JSON Editing

If Notepad++ does not provide the level of differentiation you need, VS Code (Visual Studio Code) has built-in JSON color differentiation with themes that separate keys, values, numbers, and booleans automatically.

Let me know if you need more detailed steps!

You:

1 - selecting json rather than javascript makes it worse. See capture image 2 - doublestring changes the javascript but it does all of it. There is no 'value' selection. see capture.

3 - there is no 'property name' or 'key' 4 - 'number' or 'boolean' are not available 5 - json tools are already installed. see capture Visual Studio is a little better. see capture. Is there a way to customize the coloring in VS?

ChatGPT:

**Customizing JSON Syntax Highlighting in Visual Studio (VS)

Code or VS 2019+ Visual Studio does offer more detailed JSON syntax highlighting than Notepad++, but by default, it does not always distinguish JSON keys from values** effectively. However, you can customize this.

**1. Modify JSON Color Theme in Visual Studio**

Steps to Change JSON Colors in Visual Studio:

  1. Open Settings:

- Go to Tools > Options. - Navigate to Environment > Fonts and Colors.

  1. Find JSON-Specific Items:

- Look for Display Items related to JSON: - JSON String (Values) - JSON Property Name (Keys) - JSON Number (Numeric values) - JSON Keyword (True/False, null)

  1. Customize Colors:

- Select each category and assign different colors for Foreground and Background. - Click OK to save the changes.

**2. Use a Custom JSON Theme in VS

Code (If Preferred) If you use VS Code**, JSON color customization is more straightforward:

  1. Open the Command Palette (Ctrl+Shift+P).
  2. Type and select "Preferences: Open Settings (JSON)".
  3. Add the following customization:

``json { "editor.tokenColorCustomizations": { "[Default Dark+]": { "textMateRules": [ { "scope": "support.type.property-name.json", "settings": { "foreground": "#FFA500" } // Orange for keys }, { "scope": "string.quoted.double.json", "settings": { "foreground": "#00FF00" } // Green for values }, { "scope": "constant.numeric.json", "settings": { "foreground": "#FFD700" } // Gold for numbers }, { "scope": "constant.language.json", "settings": { "foreground": "#FF4500" } // Red for true/false/null } ] } } } ``

  1. Save the file, and your JSON colors should now be more readable.

Alternative: JSON Theme Extensions

If this level of customization is not enough, you can install JSON-focused themes in VS Code by:

Would you prefer sticking with Visual Studio, or does this approach with VS Code interest you?

You:

In VS, what is the light brown colored text? I can not find where it is assigned. none of the json selections are that color

ChatGPT:

In Visual Studio, the light brown colored text in your JSON file is likely categorized under "Text" or "Plain Text" rather than a dedicated JSON element.

To Identify and Customize It:

  1. Open the Font and Color Settings:

- Go to Tools > Options. - Navigate to Environment > Fonts and Colors.

  1. Check "Display Items":

- Scroll through the Display Items list and look for: - "JSON Text" or "String" (if it applies to values). - "Plain Text" (this might be the color assignment you're seeing). - "Other", "Identifier", or "Default" (if it's not explicitly categorized).

  1. Modify the Color:

- Select the suspected category (e.g., "Plain Text"). - Change the Foreground Color to verify if it affects the light brown text. - Click OK to save.

Why This Happens

Visual Studio sometimes applies a general fallback color when the syntax highlighter doesn't explicitly classify a text type. If the JSON theme doesn’t recognize certain keys or values distinctly, they might default to "Text" or "Plain Text" styling.

Would you like help modifying your JSON theme further to ensure all elements are properly categorized?

You:

Yes it was 'String'

thanks

ChatGPT:

You're welcome! Glad you found the issue—it makes sense that it was categorized under "String" in Visual Studio's Fonts and Colors settings.

If you ever need to tweak JSON formatting further or set up a more distinct syntax highlighting scheme, feel free to ask. Happy coding! 🚀

Ask Daniel's CODEX