CodeMark+

Overview

CodeMark+ is a powerful Visual Studio Code extension that helps you insert, remove, and highlight custom comments in your code. It streamlines your workflow by automatically applying dynamic highlights to important keywords (like TODO, FIXME, and NOTE) and by enabling special inline directives for more advanced highlighting (such as highlighting the next, previous, or a range of lines).

Whether you’re debugging, documenting, or simply organizing your code, CodeMark+ provides a fully customizable solution that works across multiple programming languages.

Table of Contents

• CodeMark+
  • Overview
  • Table of Contents
  • Features
  • Installation
  • Usage
    • Dynamic Keyword Highlighting
    • Special Highlight Directives
    • Insert & Remove Comments
  • Configuration Options
    • General Settings
    • Highlight Rules
    • Special Highlight Decoration
    • Custom Comment Templates
  • Commands and Keybindings
  • Troubleshooting
  • Support
  • Feedback
  • Follow Me
  • VSXpert Template
  • Other Extensions
  • Contributing
  • Code of Conduct
  • Changelog
  • License

Features

• Multi-Language Support: Works with JavaScript, TypeScript, Java, C#, PHP, Dart, Python, C++, Ruby, and Go.

• Dynamic Keyword Highlighting: Automatically highlights keywords like TODO, FIXME, and NOTE based on customizable rules.

• Special Highlight Directives: Recognize inline directives such as:

  • // HIGHLIGHT: next line
  • // HIGHLIGHT: previous line
  • // HIGHLIGHT: current line
  • // HIGHLIGHT: line 10
  • // HIGHLIGHT: range 5-8
  • // HIGHLIGHT: block to highlight specific lines, ranges, or code blocks.

• Customizable Comment Templates: Define your own comment formats using Mustache syntax.

• Real-Time Updates: Highlighting is applied dynamically as you work, and changes in settings update the highlights in real-time.

• Configurable Activation: Easily enable or disable dynamic highlighting with a single configuration option.

Installation

1. Open Visual Studio Code.
2. Navigate to the Extensions view by pressing Ctrl+Shift+X (or Cmd+Shift+X on macOS).
3. Search for CodeMark+.
4. Click Install.
5. Reload VSCode if prompted. The extension activates automatically.

Usage

Dynamic Keyword Highlighting

When enabled, CodeMark+ automatically scans your document for keywords defined in your configuration (such as TODO, FIXME, and NOTE) and applies your custom styles.

Special Highlight Directives

Place a special inline directive in your code to highlight additional lines. For example:

// HIGHLIGHT: next line
console.log('This line will be highlighted.');

Other supported directives include:

• previous line
• current line
• line <number> (e.g., line 12)
• range <start>-<end> (e.g., range 5-10)
• block (to highlight an entire block of code)

Insert & Remove Comments

• Insert Comment: Use the command codeMarkPlus.insertComment to insert a custom comment based on your templates.
• Remove Single-Line Comments: Use the command codeMarkPlus.removeSingleLineComments to remove inserted comments from your code.

Configuration Options

You can customize CodeMark+ through your VSCode settings. Below are the main options:

General Settings

Highlight Rules

Define your custom highlight rules for keywords:

"codeMarkPlus.highlightRules": [
  { "keyword": "TODO", "color": "rgba(255,204,0,0.3)", "bold": true },
  { "keyword": "FIXME", "color": "rgba(255,0,0,0.3)", "bold": true, "underline": true },
  { "keyword": "NOTE", "color": "rgba(0,255,0,0.3)", "italic": true }
]

Special Highlight Decoration

Customize the appearance of the special highlight applied for directives:

"codeMarkPlus.specialHighlightDecoration": {
  "backgroundColor": "rgba(0,128,255,0.3)",
  "border": "1px solid blue",
  "isWholeLine": true
}

Custom Comment Templates

Define custom comment templates for different languages using Mustache syntax. For example:

"codeMarkPlus.customTemplates": [
  {
    "language": "javascript",
    "template": [
      "{{indent}}/**",
      "{{indent}} * @description the {{functionName}} method",
      "{{indent}} * @signature {{signature}}",
      "{{indent}} * @params:",
      "{{#parameters}}{{indent}} *   - {{.}}",
      "{{/parameters}}",
      "{{indent}} * @returns {Type} - {{returnType}}",
      "{{indent}} * @file {{fileName}}",
      "{{indent}} * @date {{date}}",
      "{{indent}} * @author {{author}}",
      "{{indent}} * @version {{version}}",
      "{{indent}} * @license {{license}}",
      "{{indent}} */"
    ]
  },
  {
    "language": "python",
    "template": [
      "{{indent}}\"\"\"",
      "{{indent}}Description: the {{functionName}} method",
      "{{indent}}Signature: {{signature}}",
      "{{indent}}Parameters:",
      "{{#parameters}}{{indent}}    - {{.}}",
      "{{/parameters}}",
      "{{indent}}Returns: {{returnType}}",
      "{{indent}}File: {{fileName}}",
      "{{indent}}Date: {{date}}",
      "{{indent}}Author: {{author}}",
      "{{indent}}Version: {{version}}",
      "{{indent}}License: {{license}}",
      "{{indent}}\"\"\""
    ]
  }
]

Commands and Keybindings

While the extension primarily provides dynamic highlighting, it also includes commands for comment insertion and removal:

(Note: Adjust keybindings if needed.)

Troubleshooting

If highlighting isn’t working as expected:

• Verify your configuration: Ensure that codeMarkPlus.highlightActive is enabled and that your highlight rules are correctly defined.
• Reload VSCode: Use the Developer: Reload Window command.
• Check the Output Panel: Look for errors in the "Log (Extension Host)" channel.
• Test with a Simple File: Create a test file with known keywords and directives to confirm functionality.

Support

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

Feedback

If you enjoy using CodeMark+, please consider leaving a review on the VSCode Marketplace.

Follow Me

Stay updated on the latest features, improvements, and future projects by following me:

• GitHub
• Twitter (X)

VSXpert Template

This extension was created using VSXpert, a template designed to help you quickly create Visual Studio Code extensions with ease.

Other Extensions

Explore other extensions developed by me:

• Angular File Generator
• NestJS File Generator
• T3 Stack / NextJS / ReactJS File Generator
• JSON Flow
• Auto Barrel
• CodeIgniter 4 Spark

Contributing

We welcome contributions from the community! To contribute, fork the GitHub repository and submit a pull request.

Before contributing, please review our Contribution Guidelines for details on coding standards and best practices.

Code of Conduct

We strive to create a welcoming, inclusive, and respectful environment for all contributors. Please read our Code of Conduct before participating in this project.

Changelog

See the full list of changes in the CHANGELOG.md file.

License

This extension is licensed under the MIT License. See the MIT License for more details.