code-scope-highlighter 1.1.0

package/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                "selector": "import",
+                "format": [ "camelCase", "PascalCase" ]
+            }
+        ],
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
+}

package/.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--disable-extensions",
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+		}
+	]
+}

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

package/.vscode/tasks.json

@@ -0,0 +1,6 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": []
+}

package/.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

package/.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+esbuild.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Scope Highlighter Change Log
+
+## v0.0.1 - 2024-07-03
+
+- Initial release

package/LICENSE.md

@@ -0,0 +1,24 @@
+---
+title: License
+description: MIT License for Code Highlighter
+---
+
+# 📄 License – Code Highlighter
+
+This project is open-source and freely available under the terms below.
+
+---
+
+## MIT License
+
+Copyright (c) {new Date().getFullYear()} [Jose Valdivia](https://github.com/joseavr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+**THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND**, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the Software.
+
+---
+
+_Originally published at [github.com/joseavr/code-highlighter](https://github.com/joseavr/code-highlighter)_

package/README.md

@@ -0,0 +1,90 @@
+<p align="center">
+  <img src="./code-scope-highlighter.gif" alt=" Language" />
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/github/languages/top/lamula21/scope-highlighter" alt=" Language" />
+  <img src="https://img.shields.io/github/stars/lamula21/scope-highlighter" alt=" Stars" />
+  <img src="https://img.shields.io/github/issues-pr/lamula21/scope-highlighter" alt=" Pull Requests" />
+  <img src="https://img.shields.io/github/issues/lamula21/scope-highlighter" alt=" Issues" />
+  <img src="https://img.shields.io/github/contributors/lamula21/scope-highlighter" alt=" Contributors" />
+</p>
+
+
+# Code Highlighter - A Highlighter Extension for Better Readability
+
+A customizable scope highlighter, inspired by Dr Racket IDE.
+
+## ✨ Features
+- **Universal highlighting:** ScopeHighlighter works on any language!
+- **Dynamic Highlighting:** Instantly see the scope of matching brackets with vibrant colors.
+- **HTML Tag Support:** Highlight nested HTML tags with intelligent cursor positioning:
+  - Place cursor on `<` of start tag to highlight: start tag + content + end tag
+  - Place cursor on `>` of any tag to highlight: content inside the tag
+- **Customizable Colors:** Personalize your highlight colors for brackets, braces, and parentheses.
+- **Flexible Modes:** Choose from "near", "always", or "never" highlight modes to suit your coding style.
+- **(Soon) Language Specific Settings:** Enable or disable highlighting for specific programming languages.
+
+## 🌟 Why ScopeHighlighter?
+- **Boost Productivity:** Quickly understand the structure of your code, making it easier to debug and develop.
+- **Enhanced Readability:** No more squinting at matching brackets; ScopeHighlighter makes it clear and straightforward.
+- **Seamless Integration:** Works effortlessly and fast within the VS Code ecosystem, either on desktop or the browser, thanks to the bundler `esbuild`.
+
+## ⚙️ Extension Settings
+
+The following settings are configured for the scope-highlighter extension:
+
+### `codeScopeHighlighter.matchBrackets` - Match Brackets
+
+For color picker: https://vuetifyjs.com/en/components/color-pickers/
+
+- **Default**: `near`
+- **Description**: Choose when the scope highlight should be active:
+    - `near` for when the cursor is near the bracket,
+    - `always` to always highlight,
+    - `never` to never highlight.
+
+### `codeScopeHighlighter.scopeColor` - Scope Color
+- **Default**: `#4d4d4d30`
+- **Description**: Color for highlighting the entire scope of matching brackets. (Hex format)
+
+### `codeScopeHighlighter.bracketColor` - Bracket Color
+- **Default**: `#4d4d4d30`
+- **Description**: Color for highlighting the matching brackets. (Hex format)
+
+## 🎯 HTML Tag Highlighting
+
+The extension now supports HTML tag highlighting with intelligent cursor positioning:
+
+### How it works:
+- **Cursor on `<` of start tag:** Highlights the entire tag including start tag, content, and end tag
+- **Cursor on `>` of any tag:** Highlights only the content inside the tag (excluding the end tag's opening bracket)
+- **Cursor inside tag content:** Highlights the content and end tag
+
+### Example:
+```html
+<div class="container">
+    <h1>Hello World</h1>
+    <p>This is a <strong>test</strong> paragraph.</p>
+</div>
+```
+
+- Place cursor on `<` of `<div>` → highlights entire div block
+- Place cursor on `>` of `<div>` → highlights content inside div
+- Place cursor on `<` of `<h1>` → highlights h1 tag and content
+- Place cursor on `>` of `</h1>` → highlights h1 content only
+
+## 🗺️ Roadmap 
+
+- [x] **HTML support:** Implement highlighting for nested html tags.
+- [ ] **Language Specific Settings:** Implement highlighting for specific programming languages.
+- [ ] **Bracket Specific Settings:** Implement highlighting for specific matching bracket symbols.
+
+
+## 📄 License
+
+This project is licensed under the **MIT** - see the [MIT](https://github.com/xavimondev/easyreadme/blob/main/LICENSE) file for details.
+
+## For Devs
+
+Start Debugging right away with `F5` or Command Pallete `Debug: Start Debugging`

package/debug-test.html

@@ -0,0 +1,3 @@
+<div>
+  <span>test</span>
+</div> 

package/esbuild.js

@@ -0,0 +1,56 @@
+const esbuild = require("esbuild");
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(`    ${location.file}:${location.line}:${location.column}:`);
+			});
+			console.log('[watch] build finished');
+		});
+	},
+};
+
+async function main() {
+	const ctx = await esbuild.context({
+		entryPoints: [
+			'src/extension.ts'
+		],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production,
+		sourcesContent: false,
+		platform: 'node',
+		outfile: 'dist/extension.js',
+		external: ['vscode'],
+		logLevel: 'silent',
+		plugins: [
+			/* add to the end of plugins array */
+			esbuildProblemMatcherPlugin,
+		],
+	});
+	if (watch) {
+		await ctx.watch();
+	} else {
+		await ctx.rebuild();
+		await ctx.dispose();
+	}
+}
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "code-scope-highlighter",
+  "publisher": "joseavr",
+  "displayName": "Code Highlighter",
+  "description": "Highlight the scope of matching brackets with customizable colors and flexible highlight modes.",
+  "repository": "https://github.com/joseavr/code-highlighter",
+  "icon": "code-scope-highlighter-logo.webp",
+  "license": "MIT",
+  "version": "1.1.0",
+  "engines": {
+    "vscode": "^1.90.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "*"
+  ],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "scope-highlighter.helloWorld",
+        "title": "Hello World"
+      }
+    ],
+    "configuration": {
+      "type": "object",
+      "title": "Scope Highlighter",
+      "properties": {
+        "codeScopeHighlighter.scopeColor": {
+          "type": "string",
+          "description": "Color for highlighting the entire scope of matching brackets. (Hex format)",
+          "default": "#4d4d4d89"
+        },
+        "codeScopeHighlighter.bracketColor": {
+          "type": "string",
+          "description": "Color for highlighting the matching brackets. (Hex format)",
+          "default": "#4d4d4d89"
+        },
+        "codeScopeHighlighter.matchBrackets": {
+          "type": "string",
+          "enum": [
+            "near",
+            "always",
+            "never"
+          ],
+          "default": "near",
+          "description": "Choose when the scope highlight should be active: 'near' for when the cursor is near the bracket, 'always' to always highlight, and 'never' to never highlight."
+        }
+      }
+    }
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.90.0",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "20.x",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.11.0",
+    "eslint": "^8.57.0",
+    "esbuild": "^0.21.5",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^5.4.5",
+    "@vscode/test-cli": "^0.0.9",
+    "@vscode/test-electron": "^2.4.0"
+  },
+  "scripts": {
+    "package": "pnpm run check-types && pnpm run lint && node esbuild.js --production",
+    "prepublish": "pnpm run package",
+    "watch": "npm-run-all -p watch:*",
+    "watch:esbuild": "node esbuild.js --watch",
+    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
+    "compile": "pnpm run check-types && pnpm run lint && node esbuild.js",
+    "compile-tests": "tsc -p . --outDir out",
+    "test": "vscode-test",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "pnpm run compile-tests && pnpm run compile && pnpm run lint",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint src --ext ts"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

package/src/controller.ts

@@ -0,0 +1,61 @@
+import * as vscode from "vscode"
+import { Highlighter } from "./highlighter"
+
+export class Controller {
+	private highlighter: Highlighter
+	private _disposable: vscode.Disposable
+
+	constructor(highlighter: Highlighter) {
+		this.highlighter = highlighter
+
+		const subscriptions: vscode.Disposable[] = []
+		vscode.window.onDidChangeTextEditorSelection(
+			this._onEvent,
+			this,
+			subscriptions
+		)
+		vscode.window.onDidChangeActiveTextEditor(
+			this._onChangeEditor,
+			this,
+			subscriptions
+		)
+		vscode.workspace.onDidChangeConfiguration(
+			this._onUpdateSettings,
+			this,
+			subscriptions
+		)
+
+		this._onEvent()
+
+		this._disposable = vscode.Disposable.from.apply(
+			vscode.Disposable,
+			subscriptions
+		)
+
+		this.highlighter.updateConfig()
+		this.highlighter.onChange()
+	}
+
+	dispose(): void {
+		this._disposable.dispose()
+	}
+
+	private _onUpdateSettings(
+		configuration: vscode.ConfigurationChangeEvent
+	): void {
+		if (configuration.affectsConfiguration("codeScopeHighlighter")) {
+			this.highlighter.updateConfig()
+		}
+	}
+
+	private _onChangeEditor(): void {
+		this.highlighter.updateConfig()
+		this.highlighter.onChange()
+	}
+
+	private _onEvent(e?: vscode.TextEditorSelectionChangeEvent): void {
+		if (e && e.textEditor === vscode.window.activeTextEditor) {
+			this.highlighter.onChange()
+		}
+	}
+}

package/src/extension.ts

@@ -0,0 +1,11 @@
+import * as vscode from "vscode"
+import { Highlighter } from "./highlighter"
+import { Controller } from "./controller"
+
+export function activate(context: vscode.ExtensionContext) {
+	const highligher = new Highlighter()
+	const controller = new Controller(highligher)
+
+	context.subscriptions.push(highligher)
+	context.subscriptions.push(controller)
+}

package/src/highlighter.ts

@@ -0,0 +1,129 @@
+import * as vscode from "vscode"
+import util from "./util"
+import { HighlighterMode, MatchingBracket } from "./types"
+
+class Highlighter {
+	scoperRangeDecorationType: vscode.TextEditorDecorationType
+	scoperEndDecorationType: vscode.TextEditorDecorationType
+	userConfigHighlightingMode: HighlighterMode
+
+	constructor() {
+		this.scoperRangeDecorationType = util.setRangeStyle()
+		this.scoperEndDecorationType = util.setEndStyle()
+		this.userConfigHighlightingMode = vscode.workspace
+			.getConfiguration("codeScopeHighlighter")
+			.get<HighlighterMode>("matchBrackets", HighlighterMode.Near)
+	}
+
+	updateConfig() {
+		if (vscode.window.activeTextEditor) {
+			vscode.window.activeTextEditor.setDecorations(
+				this.scoperRangeDecorationType,
+				[]
+			)
+			vscode.window.activeTextEditor.setDecorations(
+				this.scoperEndDecorationType,
+				[]
+			)
+		}
+		this.scoperRangeDecorationType.dispose()
+		this.scoperEndDecorationType.dispose()
+
+		this.scoperRangeDecorationType = util.setRangeStyle()
+		this.scoperEndDecorationType = util.setEndStyle()
+
+		util.updateConfig()
+	}
+
+	onChange() {
+		this.scoperRangeDecorationType.dispose()
+		this.scoperEndDecorationType.dispose()
+
+		this.scoperRangeDecorationType = util.setRangeStyle()
+		this.scoperEndDecorationType = util.setEndStyle()
+
+		const editor = vscode.window.activeTextEditor
+
+		if (!editor) {
+			return
+		}
+
+		const offset = editor.document.offsetAt(editor.selection.active)
+		const text = editor.document.getText()
+
+		let backwardResult: MatchingBracket
+		let forwardResult: MatchingBracket
+
+		// ^: cursor position
+		// (...)
+		//      ^
+		if (util.isCloseBracket(text.charAt(offset - 1))) {
+			backwardResult = util.findLeftBracket(text, offset - 2)
+			forwardResult = util.findRightBracket(text, offset - 1)
+		}
+
+		//  (...)
+		//  ^
+		else if (util.isOpenBracket(text.charAt(offset))) {
+			backwardResult = util.findLeftBracket(text, offset)
+			forwardResult = util.findRightBracket(text, offset + 1)
+		}
+
+		// (.)
+		//	 ^
+		else {
+			backwardResult = util.findLeftBracket(text, offset - 1)
+			forwardResult = util.findRightBracket(text, offset)
+		}
+
+		const shouldHighlight = util.shouldHighlight(
+			this.userConfigHighlightingMode,
+			offset,
+			backwardResult,
+			forwardResult
+		)
+
+		// set up the decoratiosn to highlight the scope and matching brackets
+		if (
+			util.isMatchingBracket(backwardResult.bracket, forwardResult.bracket) &&
+			shouldHighlight
+		) {
+			let start =
+				backwardResult.offset < text.length
+					? backwardResult.offset + 1
+					: backwardResult.offset
+			let end = forwardResult.offset
+
+			const start_decoration = new vscode.Range(
+				editor.document.positionAt(start - 1),
+				editor.document.positionAt(start)
+			)
+			const range_decoration = new vscode.Range(
+				editor.document.positionAt(start),
+				editor.document.positionAt(end)
+			)
+			const end_decoration = new vscode.Range(
+				editor.document.positionAt(end),
+				editor.document.positionAt(end + 1)
+			)
+
+			var rangeDecorations = []
+			var endDecorations = []
+
+			rangeDecorations.push(range_decoration)
+			editor.setDecorations(this.scoperRangeDecorationType, rangeDecorations)
+
+			endDecorations.push(start_decoration)
+			endDecorations.push(end_decoration)
+			editor.setDecorations(this.scoperEndDecorationType, endDecorations)
+		}
+	}
+
+	dispose(): void {
+		this.scoperRangeDecorationType.dispose()
+		this.scoperEndDecorationType.dispose()
+	}
+}
+
+const highlighter = new Highlighter()
+export { highlighter, Highlighter }

package/src/test/extension.test.ts

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});

package/src/types.ts

@@ -0,0 +1,12 @@
+export interface MatchingBracket {
+	bracket: string
+	offset: number
+}
+
+export enum HighlighterMode {
+	Near = "near",
+	Always = "always",
+	Never = "never",
+}
+
+export type BracketStringType = "parentheses" | "braces" | "squareBrackets"

package/src/util.ts

@@ -0,0 +1,148 @@
+import * as vscode from "vscode"
+import { HighlighterMode, MatchingBracket } from "./types"
+
+let openingBrackets = ""
+let closingBrackets = ""
+
+function updateConfig() {
+	const activeEditor = vscode.window.activeTextEditor
+
+	if (activeEditor) {
+		openingBrackets = "({["
+		closingBrackets = ")}]"
+	}
+}
+
+function isMatchingBracket(open: string, close: string) {
+	switch (open) {
+		case "(":
+			return close === ")"
+		case "{":
+			return close === "}"
+		case "[":
+			return close === "]"
+		default:
+			return false
+	}
+}
+
+function isOpenBracket(char: string) {
+	return openingBrackets.includes(char)
+}
+
+function isCloseBracket(char: string) {
+	return closingBrackets.includes(char)
+}
+
+// Finds to the left the nearest open bracket using a stack.
+// Starting from the cursor position (index) to the beginning of the (text)
+function findLeftBracket(text: string, index: number): MatchingBracket {
+	const bracketStack = []
+	let offset = 0
+	let bracket = ""
+
+	for (let i = index; i >= 0; i--) {
+		let char = text.charAt(i)
+		if (isOpenBracket(char)) {
+			if (bracketStack.length === 0) {
+				bracket = char
+				offset = i
+				break
+			} else {
+				let top = bracketStack.pop()!
+				if (!isMatchingBracket(char, top)) {
+					throw "Unmatched bracket pair"
+				}
+			}
+		} else if (isCloseBracket(char)) {
+			bracketStack.push(char)
+		}
+	}
+
+	return { bracket, offset }
+}
+
+// Finds to the right the nearest open bracket using a stack.
+// Starting from the cursor position (index) to the end of the (text)
+function findRightBracket(text: string, index: number): MatchingBracket {
+	const bracketStack = []
+	let offset = text.length
+	let bracket = ""
+	for (let i = index; i < text.length; i++) {
+		let char = text.charAt(i)
+		if (isCloseBracket(char)) {
+			if (bracketStack.length === 0) {
+				offset = i
+				bracket = char
+				break
+			} else {
+				let top = bracketStack.pop()!
+				if (!isMatchingBracket(top, char)) {
+					throw "Unmatched bracket pair"
+				}
+			}
+		} else if (isOpenBracket(char)) {
+			bracketStack.push(char)
+		}
+	}
+
+	return { bracket, offset }
+}
+
+function shouldHighlight(
+	highlighterMode: HighlighterMode,
+	offset: number,
+	leftMatchingBracket: { offset: number; bracket: string },
+	rightMatchingBracket: { offset: number; bracket: string }
+): boolean {
+	switch (highlighterMode) {
+		// highlight only when the cursor is next to the matching bracket
+		case HighlighterMode.Near:
+			return (
+				offset === leftMatchingBracket.offset ||
+				offset === rightMatchingBracket.offset + 1
+			)
+		case HighlighterMode.Always:
+			return true
+		case HighlighterMode.Never:
+			return false
+		default:
+			return false // fallback for any unexpected values
+	}
+}
+
+function setRangeStyle() {
+	return vscode.window.createTextEditorDecorationType({
+		light: {
+			backgroundColor: "#4d4d4d30"
+		},
+		dark: {
+			backgroundColor:
+				vscode.workspace.getConfiguration("codeScopeHighlighter").scopeColor,
+		},
+	})
+}
+
+function setEndStyle() {
+	return vscode.window.createTextEditorDecorationType({
+		light: {
+			backgroundColor: "#4d4d4d30"
+		},
+		dark: {
+			backgroundColor:
+				vscode.workspace.getConfiguration("codeScopeHighlighter").bracketColor,
+		},
+	})
+}
+
+export default {
+	updateConfig,
+	isMatchingBracket,
+	isOpenBracket,
+	isCloseBracket,
+	findLeftBracket,
+	findRightBracket,
+	shouldHighlight,
+	setRangeStyle,
+	setEndStyle,
+}

package/test-html-highlighting.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Highlighting Test</title>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Welcome to HTML Highlighting</h1>
+            <nav>
+                <ul>
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
+        </header>
+        
+        <main>
+            <section>
+                <h2>Features</h2>
+                <p>This extension now supports <strong>HTML tag highlighting</strong> with intelligent cursor positioning.</p>
+                <ul>
+                    <li>Place cursor on <code>&lt;</code> to highlight entire tag</li>
+                    <li>Place cursor on <code>&gt;</code> to highlight content only</li>
+                    <li>Works with nested tags</li>
+                </ul>
+            </section>
+        </main>
+        
+        <footer>
+            <p>&copy; 2024 HTML Highlighter</p>
+        </footer>
+    </div>
+</body>
+</html> 

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	}
+}