Giter Site home page Giter Site logo

vscode-render-special-chars's Introduction

Render Special Characters

This extension makes it easy to identify special characters by displaying them using the UTFx encoding standard.

Features

Screenshot

Installation

To install this extension:

  1. Open Visual Studio Code.
  2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
  3. Search for "Render Special Characters".
  4. Click Install.

Usage

Once installed, the extension will automatically highlight special characters based on the default configuration. You can customize the settings as needed by going to the settings page.

Extension Settings

The extension offers the following settings for customization:

  • render-special-chars.include: An array of UTFx codes or characters that will be prominently displayed.

  • render-special-chars.except: An array of characters specified in UTFx or as individual characters that will not be prominently displayed, regardless of whether they are included in the "include" array.

  • render-special-chars.position: Position of the decoration relative to the character (before or after). Default is before.

  • render-special-chars.border: A CSS string that defines the border style for the highlighted characters.

  • render-special-chars.borderColor: A color code for the border of highlighted characters.

  • render-special-chars.color: A color code for the text of highlighted characters.

  • render-special-chars.backgroundColor: A color code for the background of highlighted characters.

  • render-special-chars.excludedSchemes: Array of URI schemes to exclude from rendering.

  • render-special-chars.updateDelay: Delay time in milliseconds for updating decorations.

The text color, border color, and background color are all taken from the editorUnicodeHighlight theme colors by default. Specifically, the text color and border color are taken from the editorUnicodeHighlight.border, and the background color is taken from the editorUnicodeHighlight.background.

The excludedSchemes setting allows you to specify an array of URI schemes to exclude from rendering. Common schemes include:

  • "file": Files on disk.
  • "untitled": New, unsaved files.
  • "output": Output panel.
  • "debug": Debug console.
  • "git": Git resources.

Default Configuration

"render-special-chars.include": [
    "0000-0008",   // Control characters (NULL to BACKSPACE)
    "000B",        // Vertical Tab
    "000C",        // Form Feed
    "000E-001F",   // Control characters (SHIFT OUT to INFORMATION SEPARATOR ONE)
    "007F-009F",   // Control characters (DELETE to APPLICATION PROGRAM COMMAND)
    "00A0-4DFF",   // Latin-1 Supplement to Hangul Compatibility Jamo
    "A000-10FFFF"  // Yi Syllables to Plane 16 (Supplementary Private Use Area-B)
],
"render-special-chars.except": [
    "0009",       // TAB
    "000A",       // LF
    "000D",       // CR
    "0020-007E",  // Printable BASIC ASCII
    "3105-3129",  // Bopomofo (ㄅ~ㄦ)
    "4E00-9FFF",  // CJK Unified Ideographs
    ":;,、。?!〜()〈〉《》【】「」『』" // Commonly used special characters
],
"render-special-chars.position": "before",
"render-special-chars.border": "1px solid; border-radius: 2px;",
"render-special-chars.borderColor": null,
"render-special-chars.color": null,
"render-special-chars.backgroundColor": null,
"render-special-chars.excludedSchemes": ["output", "debug", "git"],
"render-special-chars.updateDelay": 500

Examples

Highlighting Specific Characters

To highlight specific characters, you can modify the include and except settings in your settings.json file:

// Example 1: Include a small range and exclude some characters within that range
"render-special-chars.include": [
    "0020-007E"  // Printable BASIC ASCII
],
"render-special-chars.except": [
    "0024",  // Dollar sign ($)
    "002A"   // Asterisk (*)
]

// Example 2: Include all characters and exclude some unwanted characters
"render-special-chars.include": [
    "0000-10FFFF" // All characters
],
"render-special-chars.except": [
    "0009",       // TAB
    "000A",       // LF
    "000D",       // CR
    "0020-007E",  // Printable BASIC ASCII
    "3000",       // Full-width space ( )
    "FF01-FF5E"   // Full-width ASCII variants
]

Note: The except list only excludes characters that are within the include range.

Customizing Appearance

You can customize the appearance of the highlighted characters by setting the border, borderColor, color, and backgroundColor:

"render-special-chars.border": "2px dotted",
"render-special-chars.borderColor": "#FF0000",
"render-special-chars.color": "#00FF00",
"render-special-chars.backgroundColor": "#0000FF"

Contributing

If you would like to contribute to this extension, please follow these steps:

  1. Fork the repository on GitHub.
  2. Create a new branch with a descriptive name.
  3. Make your changes and commit them with clear and concise messages.
  4. Submit a pull request to the main repository.

Reporting Issues

If you encounter any issues or have suggestions for improvements, please report them on the GitHub Issues page.

vscode-render-special-chars's People

Contributors

miku3920 avatar

Watchers

 avatar

Forkers

solartheory

vscode-render-special-chars's Issues

Enable per environment

Hi there,

Very nice extension, I have been using it for quite a long time!

I was wondering if it would be possible to add some granularity to enabling the extension. Specifically, I would like to keep the extension active in the editor view, but disable it in the terminal view as it is mostly just annoying there.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.