Расширение для Visual Studio Code, которое позволяет подсвечивать выбранные участки кода с помощью цветных закладок и сохранять их для удобной навигации. Закладки отображаются в панели "Bookmarks" и поддерживают контекстное меню для удаления.
- Подсветка кода: Выделяйте участки кода и применяйте к ним цветную подсветку (жёлтый, красный, зелёный, синий).
- Закладки: Сохраняйте подсвеченные участки как закладки с уникальными именами.
- Панель навигации: Просматривайте все закладки в дереве "Bookmarks" в Explorer.
- Контекстное меню: Удаляйте закладки правым кликом в панели "Bookmarks".
- Поддержка языков: Работает с HTML, JavaScript, TypeScript, Python, C++, Java и другими.
- Сохранение: Закладки сохраняются в рабочей области и восстанавливаются при открытии проекта.
- Через Marketplace:
- Откройте Visual Studio Code.
- Перейдите в раздел "Extensions" (Ctrl+Shift+X).
- Найдите
Highlight Codeи нажмите "Install".
- Из исходников:
- Склонируйте репозиторий:
git clone https://github.com/ivankrivenko/hl-code.git
- Перейдите в папку проекта:
cd highlight-code - Установите зависимости:
npm install
- Скомпилируйте проект:
npm run compile
- Откройте проект в VS Code и запустите отладку (F5).
- Склонируйте репозиторий:
- Выделите участок кода в редакторе.
- Нажмите
Ctrl+Shift+Pи выберите командуHighlight Selected Code. - Выберите цвет подсветки (Yellow, Red, Green, Blue).
- Введите имя закладки.
- Закладка появится в панели "Bookmarks", а код будет подсвечен.
- В панели "Bookmarks" (в Explorer) кликните по закладке, чтобы перейти к подсвеченному участку кода.
- В панели "Bookmarks" кликните правой кнопкой мыши по закладке.
- Выберите пункт "Delete Bookmark".
- Закладка и связанные комментарии будут удалены из файла.
- Нажмите
Ctrl+Shift+Pи выберите командуClear All Highlights. - Все закладки и подсветка будут удалены.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Пример</title>
</head>
<body>
<!-- hl-code "Header" Yellow -->
<header>
<a href="#">Логотип</a>
</header>
<!-- /hl-code "Header" Yellow -->
</body>
</html>- Подсветка будет применена к строкам с комментариями
<!-- hl-code "Header" Yellow -->и<!-- /hl-code "Header" Yellow -->, включая код между ними. - Закладка "Header" появится в панели "Bookmarks".
src/extension.ts: Основной код расширения.package.json: Конфигурация расширения, команды и меню.media/bookmark.svg: Иконка для Tree View.README.md: Документация.
- Node.js
- Visual Studio Code
- TypeScript
npm run compile- Откройте проект в VS Code.
- Нажмите
F5для запуска в режиме отладки. - Откроется новое окно VS Code с установленным расширением.
- Создайте закладку в файле (HTML, JS, Python и т.д.).
- Проверьте отображение в Tree View.
- Попробуйте удалить закладку через контекстное меню.
- Переключите вкладки, чтобы убедиться, что подсветка сохраняется.
- Выполните команду
Clear All Highlights.
- Если перед открывающим комментарием
<!-- hl-code ... -->есть пустые строки, они могут подсвечиваться при переключении вкладок (исправлено в последней версии). - Поддержка многострочных комментариев ограничена однострочными комментариями для большинства языков.
Если вы столкнулись с проблемой, создайте issue.
MIT License. Подробности в файле LICENSE.
- Автор: ivankrivenko
- Email: ivankrivenko@hotmail.com
- GitHub: ivankrivenko