Color highlighter sublime text 3 настройка
Sublime Text 3 users: a python3 branch is also available. Just git checkout python3 from the root of your package installation to use in in ST3. If you upgrade from a previous ST2 installation or encounter problems with the package, please proceed as detailed below:
This SublimeText2 package allows to highlight & export currently edited code to HTML or RTF using Pygments.
Several commands are added to SublimeText2 when installed:
- SublimeHighlight: convert to HTML: will convert current code to highlighted HTML in a new SublimeText tab.
- SublimeHighlight: convert to RTF: will convert current code to highlighted RTF in a new SublimeText tab.
- SublimeHighlight: view as HTML: will convert current code to highlighted HTML and open it in your default browser.
- SublimeHighlight: view as RTF: will convert current code to an RTF document and open the generated file with your default program.
- SublimeHighlight: copy to clipboard as HTML: will convert current code to highlighted HTML and store it into the system clipboard.
- SublimeHighlight: copy to clipboard as RTF: will convert current code to raw highlighted RTF and store it into the system clipboard.
This latter command, Copy to clipboard as RTF, allows to copy and paste highlighted code from Sublime Tex 2 to other softwares like Powerpoint, Keynotes, Word, etc.
Поиск
Целая куча функций поиска: обычный поиск по файлу, поиск с заменой (одного или всех значений), поиск по файлам и папкам, поиск с регулярными выражениями и многое другое.
Нечёткий поиск
Вы вводите лишь комбинацию символов –
нечеткий поиск выдаcт все возможные совпадения. Супер!
P.S. Смотрите, как полезен символ @ для CSS.
Comment-Snippets
Лаконичный набор сниппетов для красивых комментариев.
Variables highlighting
THIS FEATURE CURRENTLY DOESN'T WORK.
It was removed because it didn't work very well, was slow and buggy. Right now I'm in the process of searching for ways to implement it nicely, but it's not ready yet. I also plan to include color functions and native CSS variables into the release of this feature. Please be patient.
My plugin settings are gone!
The settings file in the 8.0 has a completely different structure and way more features to configure. Because of it it's incompatible with the old one. To eliminate weird migration bugs I've decided to delete user settings file upon migration to the new version. The settings are only deleted this once, so you can reconfigure the plugin again after update and the settings won't disappear again.
The plugin doesn't work in HTML/JS/VUE/OTHER files
Yes, it does. Highlighting colors is just disabled by default in all files but stylesheets. To enable highlighting colors in files with any extension you need to modify file_extensions setting and add the required extension there. You can also put "all" there and the plugin will be enabled for all files. If you have enabled some extensions before, they need to be reenabled due to the previous section.
Inline color highlighting works incorrectly
Inline color highlighting is not guaranteed to be compatible with any plugin that generates or changes color schemes, such as SublimeLinter . If you use one of those plugins you have to either disable them completely, or configure them to not modify the color scheme or configure Color Highlighter to not modify the color scheme, which basically means disabling inline color highlighting.
I don't have any other plugin that modifies the color scheme and inline highlighting still works incorrectly
Due to a Sublime Text not ordering added regions deterministically enabling both text and non-text inline highlighting at the same time might work properly. For example, if you select Text in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and Filled in Tools > Color Highlighter > Color Highlighters > Highlight colors in selected text > Inline highlighting style it might not work all the time. If you close/open the file a few times and sometimes it's working fine and sometimes it isn't, this is exactly this issue.
Donate
Thank you guys for all your support, I couldn't have done it without your contributions. Every little bit helps!
Color Highlighting styles
There are three color highlighting styles: inline highlighting, underline blocks, and gutter icons.
Плагины, которые стоит поглядеть
Clipboard History – поможет вспомнить, что именно вы вставляли несколько итераций назад.
BufferScroll – запоминает позицию курсора при переключении окон.
Emmet Livestyle
2 режима работы с FTP: 1) подключение к удаленному серверу и работа на нем; 2) настройка FTP-соединения для каждого проекта, позволяющая быстро и просто синхронизировать файлы.
Color converter
Just put the cursor (or multiple cursors) on the color code and select “Convert color to the next format” in context menu (or press Ctrl + Shift + , ) or “Convert color to the previous format” in context menu (or press Ctrl + Shift + . ). This will convert colors under cursors between different supported color formats.
CSScomb
«Причесывает» CSS, расставляя свойства в заданном порядке. Потребует небольшой настройки: установки Node.js и конфигурации плагина в зависимости от своих предпочтений.
Inline styling
You can set the rendered HTML code to use inline styles instead of CSS classes:
Настройки, сокращения и сниппеты
Sublime Text – это гибкость и скорость:
для всех плагинов и функций есть настройки и клавиатурные сокращения. Часто пишете один и тот же код? Создайте сниппет и вызывайте код лишь несколькими символами. Работаете над несколькими проектами? Совсем не обязательно каждый раз открывать папку проекта и целый ворох необходимых файлов – воспользуйтесь системой проектов.Нужен дополнительный функционал?Откройте Package Control, скорее всего его уже кто-то написал :)
Миникарта кода
Показывает весь код в панельке справа. Кстати, можно вставлять ASCII графику в комментарии,
чтобы видеть эти области на миникарте.
Плагины
Плагины, которые стоит поглядеть
Sublime Alignment – выравнивание нескольких строчек по определенной позиции.
SublimeFileDiffs – сравнивает два файла или их части и показывает различия.
SublimeAllAutocomplete – автокомплит работает не только в рамках одного документа, но в рамках текущих открытых файлов.
Клавиатурные шорткаты
Чтобы ввести сокращение, в Key Bindings – User следует добавить новую строку, например:
command – это команда, которую ST выполняет при нажатии.
Список команд плагинов не всегда лежит в разделе Preferences.
Если возникают трудности, посмотрите репозиторий плагина на github, искомые команды прячутся в файлах с расширением .sublime-keymap или .sublime-commands.
Details
- Version 8.0.9
- Homepage sublime.wbond.net
- Issues github.com
- Modified 5 years ago
- Last Seen 4 minutes ago
- First Seen 10 years ago
Blocks
Highlighting colors with blocks will display colored blocks right near highlighted colors. These blocks cause text reflow. To enable highlighting colors with underline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Highlight colors with blocks and choose one of To the right of the color , To the left of the color , Below the color . These are options are self-explanatory.
For Below the color the block will be the same size that the color code is. For To the right of the color and To the left of the color the block size can be configured with the length parameter which defines the size of the block in characters.
Going to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Highlight colors with blocks and selecting None will disable it.
В этой презентации
Темы оформления
Очень, очень, очень много тем.
Выбор за вами!
Color picker
Just put the cursor (or multiple cursors) where you want the color and and select “Insert color with color picker” in context menu (or press Ctrl + Shift + C ). Select the color in a popup color picker and it will be inserted in place of all your cursors. If some of your cursors are in existing colors, these colors will be replaces with a newly selected one.
ZenTabs
Этот плагин умеет подсвечивать текущую вкладку и ограничивать количество открытых вкладок заданным числом. При открытии новых вкладок закрываются самые старые.
Font face
You can set font face used in RTF output by using the fontface setting.
SublimeLinter
Линтер читает код и подсвечивает ошибки и предупреждения, при наведении на которые объясняет ошибку в нижней строчке. Для каждого языка необходимо установить свой линтер.
Inline highlighting
Inline color highlighting itself has several styles. All of them require Color Scheme modification, so when this mode is enabled the view's color scheme is changed to a fake one, which is a copy of the real color scheme, but augmented with the plugin-specific definitions. To disable inline highlighting go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select None .
Inline blocks
Highlighting colors with inline blocks will display colored blocks right on top of highlighted colors. To enable highlighting colors with inline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Filled .
Colored text
Highlighting colors with colored text will make colors text be rendered with that color. To enable highlighting colors with colored text go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Text .
Outline and underline styles
If one wants color highlighting to be more subtle that one with inline blocks he can select one of Outlined , Underlined solid , Underlined strippled , Underlined squiggly styles in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style menu.
AutoFileName
Простой и удобный плагин, позволяющий забыть о написании путей к тому или иному файлу.
Color converter
Just put the cursor (or multiple cursors) on the color code and select "Convert color to the next format" in context menu (or press Ctrl + Shift + , ) or "Convert color to the previous format" in context menu (or press Ctrl + Shift + . ). This will convert colors under cursors between different supported color formats.
Readme
ColorHighlighter is a plugin for the Sublime Text 2 and 3, which unobtrusively previews color values by underlaying the selected hex codes in different styles, coloring text or gutter icons. Also, plugin adds color picker, color format converter to easily modify colors.
Line numbering
You can add line numbering by setting the linenos option:
Accepted values for the linenos option are table , inline or false — the latter being the default.
BracketHighlighter
Удобная подсветка открывающих и закрывающих скобок.
GitGutter
Полезный инструмент для пользователей Git: вживую показывает изменения, произошедшие в файле с последнего коммита.
Клавиатурные шорткаты
Шорткаты – это одна из мощнейших функций ST – практически любое действие можно повесить на комбинацию клавиш. Рассортированы они по папкам аналогично тому, как рассортированы настройки Preferences > Key Bindings.
Emmet
Необходимая вещь для верстальщика. Emmet дает возможность писать HTML и CSS сокращениями, используя нечеткий поиск на полную катушку, а также добавляет полезные шорткаты.
Командные панели
Быстрый доступ ко всем функциям и файлам.
Не нужно держать в голове клавиатурное сокращение функции или адрес файла, просто откройте панель и начните вводить название.
Color picker
Just put the cursor (or multiple cursors) where you want the color and and select "Insert color with color picker" in context menu (or press Ctrl + Shift + C ). Select the color in a popup color picker and it will be inserted in place of all your cursors. If some of your cursors are in existing colors, these colors will be replaces with a newly selected one.
Gutter Color
Ну вы сами все видите.
P.S. есть еще очень похожий Color Highlighter
Installs
- Total 1.18M
- Win 793K
- Mac 231K
- Linux 154K
May 10 | May 9 | May 8 | May 7 | May 6 | May 5 | May 4 | May 3 | May 2 | May 1 | Apr 30 | Apr 29 | Apr 28 | Apr 27 | Apr 26 | Apr 25 | Apr 24 | Apr 23 | Apr 22 | Apr 21 | Apr 20 | Apr 19 | Apr 18 | Apr 17 | Apr 16 | Apr 15 | Apr 14 | Apr 13 | Apr 12 | Apr 11 | Apr 10 | Apr 9 | Apr 8 | Apr 7 | Apr 6 | Apr 5 | Apr 4 | Apr 3 | Apr 2 | Apr 1 | Mar 31 | Mar 30 | Mar 29 | Mar 28 | Mar 27 | Mar 26 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 183 | 134 | 99 | 133 | 147 | 178 | 151 | 172 | 134 | 94 | 124 | 169 | 163 | 150 | 172 | 163 | 140 | 124 | 172 | 182 | 183 | 174 | 172 | 138 | 118 | 142 | 168 | 213 | 233 | 160 | 121 | 159 | 192 | 193 | 205 | 176 | 225 | 146 | 144 | 166 | 239 | 185 | 208 | 168 | 143 | 129 |
Mac | 20 | 21 | 10 | 23 | 23 | 16 | 16 | 23 | 16 | 12 | 10 | 26 | 15 | 19 | 17 | 15 | 10 | 13 | 12 | 21 | 17 | 22 | 22 | 19 | 11 | 19 | 23 | 23 | 15 | 15 | 18 | 14 | 22 | 22 | 23 | 16 | 21 | 7 | 21 | 25 | 16 | 17 | 23 | 17 | 10 | 15 |
Linux | 11 | 13 | 19 | 8 | 16 | 22 | 14 | 17 | 13 | 22 | 16 | 18 | 20 | 18 | 14 | 19 | 11 | 15 | 16 | 12 | 14 | 10 | 12 | 16 | 19 | 24 | 12 | 19 | 17 | 8 | 16 | 7 | 22 | 19 | 18 | 22 | 21 | 32 | 17 | 20 | 18 | 15 | 21 | 10 | 11 | 21 |
Сниппеты
Небольшие куски кода, которые можно вставлять по определенному сочетанию клавиш. Так, в этом примере фраза nav++ по нажатию на Tab превратится в emmet-цепочку для разметки навигации.
Создать свой сниппет невероятно просто
Дополнительные материалы
Color Highlighting modes
Highlight everything
In this mode the plugin parses the whole file and highlights all colors it can find. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text .
This mode can cause pauses when opening big files because the plugin needs to parse the whole file.
Highlight selection
In this mode the plugin highlights colors under the cursor. It supports multiple selections as well. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in selected text .
Highlight when hovering
In this mode the plugin highlights colors when one hovers over them with the mouse cursor. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors when hovering the cursor above them .
Combined
These three modes can be combined in any possible way. The settings for all three modes are completely independent and can be configured all at once. For example, the default settings are to highlight all colors with gutter icons and with colored text, highlight selected colors with blocks to the right of the color and highlight colors one hovers over with inline blocks.
Gutter icons
To enable highlighting colors with gutter icons go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and select Circle or Square . Highlighting colors with gutter icons requires ImageMagick to be installed (see the installation section). Going to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and selecting None will disable it.
This mode can cause pauses when opening big files for the first time with “highlight everything” mode because the plugin needs to create icons for all newly encountered colors.
Color Highlighting modes
Highlight everything
In this mode the plugin parses the whole file and highlights all colors it can find. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text .
This mode can cause pauses when opening big files because the plugin needs to parse the whole file.
Highlight selection
In this mode the plugin highlights colors under the cursor. It supports multiple selections as well. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors in selected text .
Highlight when hovering
In this mode the plugin highlights colors when one hovers over them with the mouse cursor. Highlighting style settings for that mode are in Tools > Color Highlighter > Color Highlighters > Highlight colors when hovering the cursor above them .
Combined
These three modes can be combined in any possible way. The settings for all three modes are completely independent and can be configured all at once. For example, the default settings are to highlight all colors with gutter icons and with colored text, highlight selected colors with underline blocks and highlight colors one hovers over with inline blocks.
Lexer options
SublimeHighlight supports Pygments lexer options. To set an option for a given lexer, eg. PHP :
Статьи
Perfect Workflow in Sublime Text 2
Превосходный двухчасовой скринкаст, до сих пор не потерявший актуальность. Бесплатный после регистрации.
Sublime Text Unofficial Documentation
Тот неловкий момент, когда неофициальная документация лучше официальной.
Gutter icons
To enable highlighting colors with gutter icons go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and select Circle or Square . Highlighting colors with gutter icons requires ImageMagick to be installed (see the installation section). Going to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Gutter icon style and selecting None will disable it.
This mode can cause pauses when opening big files for the first time with "highlihgt everything" mode because the plugin needs to create icons for all newly encountered colors.
Основные возможности
Inline highlighting
Inline color highlighting itself has several styles. All of them require Color Scheme modification, so when this mode is enabled the view's color scheme is changed to a fake one, which is a copy of the real color scheme, but augmented with the plugin-specific definitions. To disable inline highlighting go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select None .
Inline blocks
Highlighting colors with inline blocks will display colored blocks right on top of highlighted colors. To enable highlighting colors with inline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Filled .
Colored text
Highlighting colors with colored text will make colors text be rendered with that color. To enable highlighting colors with colored text go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style and select Text .
Outline and underline styles
If one wants color highlighting to be more subtle that one with inline blocks he can select one of Outlined , Underlined solid , Underlined strippled , Underlined squiggly styles in Tools > Color Highlighter > Color Highlighters > Highlight colors in all text > Inline highlighting style menu.
Settings
You can find a dedicated user settings file in the Preferences > Package Settings > SublimeHighlight menu where you can customize Pygments settings:
Sample Settings - User file:
Check out the available options below.
Color Highlighting styles
There are three color highlighting styles: inline highlighting, underline blocks, and gutter icons.
Underline blocks
Highlighting colors with underline blocks will display colored blocks right under highlighted colors. These blocks cause text reflow. To enable highlighting colors with underline blocks go to Tools > Color Highlighter > Color Highlighters > Highlight colors in all text and click Highlight colors with blocks . Clicking on this setting again will disable it.
Множественные курсоры
ST позволяет редактировать код одновременно в нескольких местах. Создать курсоры можно как из выделенной области, так и по выбору одинаковых фрагментов кода.
Themes
You can choose the Pygments theme to use by setting the theme option:
Here's a screenshot of what some example code looks like with different themes:
Note: You can add your own pygments files by copying the _theme_.py to Packages/Highlight/pygments/styles , and adding your theme to the STYLES_MAP in SublimeHighlight/pygments/styles/__init__.py . Eg.:
Live Reload
В любом обзоре обязательно должны рассказать про live-режим – автообновление браузера без нажатия клавиш.
Это настраивается и для ST, однако я бы советовал не привязываться к редактору, а установить приложение отдельно
Настройки
В ST настройки есть как у самого редактора, так и у всех подключаемых плагинов. Найти их можно по пути
Preferences > Settings .
или
Preferences > Package Settings > .
Обратите внимание, что все настройки разбиты на категории User и Default.
Variables highlighting
THIS FEATURE CURRENTLY DOESN'T WORK.
It was removed because it didn't work very well, was slow and buggy. Right now I'm in the process of searching for ways to implement it nicely, but it's not ready yet. I also plan to include color functions and native CSS variables into the release of this feature. Please be patient.
Donate
Thank you guys for all your support, I couldn't have done it wihout your contributions. Every little bit helps!
Текстовый редактор с широким диапазоном настроек, тем и плагинов, позволяющий увеличить скорость веб-разработки в разы.
Plain Tasks
Планировщик для ST. Удобно вести список задач в одной папке с проектом. Можно отмечать выполненные задания, при этом автоматически фиксируется время окончания.
Сниппеты и клавиатурные сокращения
Cниппеты, плагины и шорткаты в разы ускоряют разработку. И всё это добро можно настроить под себя.
Вот так я верстаю менюшки:
Настройки
Все изменения мы вносим в Settings - User. Если вносить их в Default, они будут перезаписаны при ближайшем обновлении. В дефолтные настройки нужно заглядывать лишь для справки.
Статьи
Русская документация Sublime Text
Удобные справки по горячим клавишам и настройкам редактора, а также лаконичное описание главных функций.
Комментарий к прошлой статье
Про синхронизацию ST между устройствами.
На этом все!
Занудствовал для вас Андрей Алексеев.
Пожелания, предложения: vk / e-mail
Sublime Text editor has built-in syntax highlighting support for too many languages. In case none of the supported highlightings covers your needs you can create your own. The idea of writing custom syntax definitions first came to light (for me) while looking at the log files generated by one of our games (By the way, I am working at PeakGames and we are building awesome mobile games). If the log file contains a lot of information it may be difficult to see the most important parts. Using tools like grep does not really help if you want to see the whole context.
Here is a step by step guide to write your custom syntax highlighting for Sublime Text editor:
Package Control is a package manager for Sublime Text that makes it simple to find, install and keep packages up-to-date.
PackageDev is a Sublime Text package that helps create and edit syntax definitions, snippets, completions files, build systems and other Sublime Text extension files.
After installing PackageDev, create a new syntax definition file through Tools | Packages | Package Development as seen in the screenshot below.
Defining a syntax is simply writing regular expressions to find text in the document. Here is an official documentation about writing syntax definitions for Sublime Text. In this step you need to write regular expressions to match the text in your documents. I have used this online tool to test the regular expressions.
Below is a syntax definition file for our logs. It is good for a starting point because it is simple.
Line Number | Keyword | Description |
---|---|---|
3 | name | Name of your syntax definition. You can select syntax of the document in Sublime Text by View->Syntax as seen in the screenshot below. |
4 | scopeName | This will be used while defining colors in the color theme definition files. |
5 | fileTypes | Sublime text automatically chooses your syntax definition if the file type matches. You can choose the syntax definition explicitly by View->Sytax menu. |
In this step we are going to set colors and text styles (bold, italic vs). Our syntax definition will match the text with the regular expressions and the color theme will change the color and style of the displayed text. Open your favorite color theme. Here is the path to the theme file for Monokai in my computer.
That’s it. Now the log files are looking much more meaningful when opened in the Sublime Text editor.
Package Control
С Package Control установка плагинов займет примерно минуту. Вызовите командную панель, выберите Install Package, в загрузившемся списке плагинов найдите нужный и. готово!
Настройки
Мои любимые настройки для ST. Полный список тут
Installation
- Recommended - Using Sublime Package Control
- Ctrl + Shift + P then select Package Control: Install Package
- install Color Highlighter
Installation
- Recommended - Using Sublime Package Control
- Ctrl + Shift + P then select Package Control: Install Package
- install Color Highlighter
Проекты
Не надо вспоминать, как называется папка вашего проекта, и над чем вы работали в прошлый раз - это дело ST. Создавайте и переключайтесь между проектами, храните специфичные настройки в отдельном файле.
SideBarEnhancements
Перемещайте, копируйте, переименовывайте файлы и папки прямо из ST. На любимые функции, как обычно, можно установить шорткат. Кроме того, есть полезности вроде Data URI.
Сайдбар и дробление на секции
В боковой панели хранятся открытые файлы и папки.
Каждый файл открывается в новом табе, которые можно
распределить в несколько рядов или колонок.AdvancedNewFile
Быстрое создание нового файла.
Why this package?
Mostly for toying around with SublimeText2 plugin API (which is great), but also to ease the process of copying/pasting richly formatted code over softwares like Powerpoint, Word, Keynote and shits like that.
ColorHighlighter is a plugin for the Sublime Text 2 and 3, which unobtrusively previews color values by underlaying the selected hex codes in different styles, coloring text or gutter icons. Also, plugin adds color picker, color format converter to easily modify colors.
Setting up shortcuts
This is a sample key binding for copying RTF highlighted code contents to your clipboard by pressing ctrl + alt + c :
- sublime : new Sublime Text 2 tab
- external : new external file
- clipboard : system clipboard
Читайте также: