Sublime text 3

Colors

Colors in color schemes may be specified using one of seven formats:

  • Hex RGB: A followed by six hex characters, with the first two specifying the red channel, second tow the green channel and the final two the blue channel. Red is written as . An abbreviated form is available when each of the three pairs use the same value for both characters. Red is written as .
  • Hex RGBA: Same as Hex RGBA, but with an extra pair of hex characters at the end to specify the alpha channel. Red with 67% opacity is written as . The abbreviated form would be .
  • RGB functional notation: A function named that accepts three integers in the range 0 to 255. The first integer specifies the red channel, the second the green channel and the third the blue channel. Red is written as .
  • RGBA functional notation: Identical to the RGB function format, except the name of the function is and a fourth parameter is added accepting a value from to specifying the alpha channel. Red with 50% opacity is written as .
  • HSL functional notation: A function named that accepts three values. The first is an integer in the range 0 to 360 specifying the hue. The second is a percentage specifying the saturation. The third is a percentage specifying the lightness. Red is written as .
  • HSLA functional notation: Identical to the HSL function format, except the name of the function is and a fourth parameter is added accepting a value from to specifying the alpha channel. Red with 50% opacity is written as .
  • Named: . Please note that while some share names with X11 named colors used in .tmTheme files, the actual colors tend to differ.

Additionally, colors may be specified as a , and then referenced via the syntax . Variable references are particularly useful when combined with the and the supported , , , and adjusters.

Горячие клавиши Sublime Text

Несколько часто используемых в Sublime Text 3 горячих клавиш:


Alt+Shift+f — выравнивание кода (reindent);Ctrl+f Alt+enter — выделить все найденные слова;Super+Alt+. — переход к выбранному классу в CSS в Sublime Text 3;Ctrl+/ — закомментировать / раскомментировать HTML;Ctrl+Shift + D — дублировать строку или выделение;Ctrl+K+U — преобразовать в прописные буквы (выделен фрагмент текста);Ctrl+K+L — преобразовать в строчные буквы (выделен фрагмент текста);Shift+Ctrl+g — обернуть выделение в div;Ctrl+ — передвигаем выделенный код влево или вправо;Ctrl+Shift+p — открываем меню команд;Ctrl+` — открывает в Sublime Text консоль.

Поделиться

Build 3013

21 February 2013

  • Faster loading of large, plain text files
  • Improved console scrolling performance on high resolution displays
  • Further protection against degenerate syntax definitions
  • Added atomic_save setting
  • Fixed Reveal in Side Bar
  • Fixed C++ syntax highlighting for nested class forward declarations
  • Exec panel scrolls again
  • Windows: ok_cancel_dialog uses new visual styles
  • OSX: Added experimental support for line numbers in the ODB protocol
  • API: Added on_text_command() and on_window_command()
  • API: Added load_resource(), load_binary_resource() and find_resources()
  • API: Added encode_value() and decode_value()
  • API: view.sel() supports negative indices
  • API: Implemented settings.add_on_change() and settings.clear_on_change()

Usage

Themr: List themes displays all the available themes in alphabetical order.

Default binding: Ctrl+F5 (Windows/Linux) Cmd+F5 (OSX)

Themr: Next theme switches immediately to the alphabetically next theme.

Default binding: Ctrl+F7 (Windows/Linux) Cmd+F7 (OSX)

Themr: Previous theme switches immediately to the alphabetically previous theme.

Default binding: Ctrl+F8 (Windows/Linux) Cmd+F8 (OSX)

Themr: Random theme switches immediately to a random theme that you have installed.

Default binding: Ctrl+F10 (Windows/Linux) Cmd+F10 (OSX)

Themr: Toggle Theme Settings displays a list of toggleable settings supported by your current theme.

Favorites

Themr: Add current theme to favorites and Themr: Remove current theme from favorites add and remove the currently selected theme to your favorites list.

You can also edit your favorites list manually through Preferences > Package Settings > Themr.

Themr: List favorite themes displays your favorite themes in alphabetical order.

Default binding: Ctrl+Shift+F5 (Windows/Linux) Cmd+Shift+F5 (OSX)


Themr: Next favorite theme switches immediately to the alphabetically next theme in your favorites.

Default binding: Ctrl+Shift+F7 (Windows/Linux) Cmd+Shift+F7 (OSX)

Themr: Previous favorite theme switches immediately to the alphabetically previous theme in your favorites.

Default binding: Ctrl+Shift+F8 (Windows/Linux) Cmd+Shift+F8 (OSX)

Themr: Random favorite theme switches immediately to a random theme in your favorites.

Default binding: Ctrl+Shift+F10 (Windows/Linux) Cmd+Shift+F10 (OSX)

Other Notes

When changing between themes, Sublime Text may need be restarted to fully clear the old theme settings and apply the new theme settings. Switching themes within the same family (e.g. Soda Light <-> Soda Dark) usually doesn’t cause any issues.

Properties

The key of a file is a JSON array of of objects describing how UI elements should be styled. Every element in the UI supports the following keys:

layer0.*
the bottom-most texture for the element
layer1.*
the second texture for the element
layer2.*
the third texture for the element
layer3.*
the fourth texture for the element
hit_test_level
a float value setting the required opacity of a pixel for a click to be considering a «hit»

Layer Properties

Every element in the UI supports up to four texture layers for displaying fill colors and raster graphics. Each layer has dotted sub-keys in the format . Valid sub-keys include:

layer#.opacity

a float value from to that controls the master opacity of the layer.

Example:
layer#.tint

a of a fill color to apply to the layer.

Example:
layer#.texture

a string of the file path to a PNG image, relative to the folder.

Example:
layer#.inner_margin

texture images are stretched to fit the element by slicing into a grid of 9 using four lines. See for valid formats with which to specify the margin used to make the slices.

Example:
layer#.draw_center

a boolean that controls if the center rectangle of the 9-grid created via should be drawn. This is an optimization that allows skipping an unused section of texture.

Example:
layer#.repeat

a boolean that controls if the texture should be repeated instead of stretched.

Example:

Value Animation

Properties specified by floats may be animated over time. Instead of providing a single numeric value, the animation is specified with an object including details of the animation. Value animation is primarily useful for changing opacity over time. The object keys are:

target

a float value from to that controls the destination value

Example:
speed

a float value of or greater that controls the relative length of time the animation takes

Example:
interpolation

an optional string that allow specifying the use of function instead of the default linear function.

Default: Example:

Texture Animation

The sub-key may be an object to specify an animation based on two or more PNG images. The object keys are:

keyframes

an array of strings of the paths to PNG images, in order

Example:
loop

an optional boolean that controls if the animation should repeat

Default: Example:
frame_time

an optional float specifying how long each frame should be displayed. represents 1 second.

Default: (30 fps) Example: (60 fps)

Texture Tinting Properties

Certain elements have an available tint value set by the background of current color scheme. The tint can be modified and applied to a image.

tint_index

Controls which layer the tint is applied to. Must be an integer from to .

tint_modifier

An array of four integers in the range to . The first three are blended into the RGB values from the tint color with the fourth value specifying how much of these RGB modifier values to apply.

Font Properties

Certain textual elements allow setting the following font properties:

font.face
the name of the font face
font.size
an integer point size
font.bold
a boolean, if the font should be bold
font.italic
a boolean, if the font should be italic

Shadow Properties

Some text elements allow setting the following properties:

shadow_color
a to use for the text shadow
shadow_offset
a 2-element array containing the X and Y offsets of the shadow

Filter Label Properties

Labels used in the quick panel have color control based on selection and matching

fg
a for unselected, unmatched text
match_fg
a for unselected, matched text
bg
a for the background of an unselected row
selected_fg
a for selected, unmatched text
selected_match_fg
a for selected, matched text
bg
a for the background of a selected row
font.face
the name of the font face
font.size
an integer point size

Data Table Properties

Row-based tables of data provide the following properties:

dark_content
if the background is dark – used to set the attribute for scrollbars
row_padding
padding added to each row, in one of the formats described in

Certain labels allow for additional control over their appearance. They support the properties:

If Things Aren’t Getting Highlighted

It’s very possible that your favorite theme doesn’t define styles for , , or even (although most themes catch that one, because it has in it.) If this is the case you can edit your theme file pretty easily, and I’ve included a snippet to make it even easier.

All themes are stored as files, which are really just files that have been renamed, which are really just files.

ANYWAY

To add style rules for bold and italic wiki text to your favorite theme simply follow these steps:

  1. Open in Sublime Text 2.
  2. Do a quick search for or and make sure it’s not there.
  3. Inside the element place your cursor between the closing tag of one element and the opening tag of the next.
  4. Type and the snippet should pop up.
  5. Type “bold” (or italic) into the first completion slot. Watch the fancy joy of snippets that re-use one variable.

  6. Hit tab to go to the color slot. This is where you decide what color works for you, and it has to be in hex.
  7. Save the file and restart ST2.

Now all your (or ) text should be bold and all your (or ) text should be slanty. It’s just that easy.

Including Other Files

Sublime Syntax files support the notion of one syntax definition embedding another. For example, HTML can contain embedded JavaScript. Here’s an example of a basic syntax defintion for HTML that does so:

Note the first rule above. It indicates that when we encounter a <script> tag, the main context within JavaScript.sublime-syntax should be pushed onto the context stack. It also defines another key, with_prototype. This contains a list of patterns that will be inserted into every context defined within JavaScript.sublime-syntax. Note that with_prototype is conceptually similar to the prototype context, however it will be always be inserted into every referenced context irrespective of their meta_include_prototype setting.

In this case, the pattern that’s inserted will pop off the current context while the next text is a </script> tag. Note that it doesn’t actually match the </script> tag, it’s just using a lookahead assertion, which plays two key roles here: It both allows the HTML rules to match against the end tag, highlighting it as-per normal, and it will ensure that all the JavaScript contexts will get popped off. The context stack may be in the middle of a JavaScript string, for example, but when the </script> is encountered, both the JavaScript string and main contexts will get popped off.

Note that while Sublime Text supports both .sublime-syntax and .tmLanguage files, it’s not possible to include a .tmLanguage file within a .sublime-syntax one.

Another common scenario is a templating language including HTML. Here’s an example of that, this time with a subset of Jinja:

This is quite different from the HTML-embedding-JavaScript example, because templating languages tend to operate from the inside out: by default, it needs to act as HTML, only escaping to the underlying templating language on certain expressions.

In the example above, we can see it operates in HTML mode by default: the main context includes a single pattern that always matches, consuming no text, just including the HTML syntax.

Settings

tab_size Integer. The number of spaces a tab is considered equal to
translate_tabs_to_spaces Boolean, if true, spaces will be inserted up to the next tab stop when tab is pressed, rather than inserting a tab character
detect_indentation Boolean, if true (the default), tab_size and translate_tabs_to_spaces will be calculated automatically when loading a file
use_tab_stops Boolean, If translate_tabs_to_spaces is true, use_tab_stops will make tab and backspace insert/delete up to the next tab stop

Settings Files

Settings files are consulted in this order:

  1. Packages/Default/Preferences.sublime-settings
  2. Packages/Default/Preferences (<platform>).sublime-settings
  3. Packages/User/Preferences.sublime-settings
  4. Packages/<syntax>/<syntax>.sublime-settings
  5. Packages/User/<syntax>.sublime-settings

In general, you should place your settings in Packages/User/Preferences.sublime-settings. If you want to specify settings for a certain file type, for example, Python, you should place them in Packages/User/Python.sublime-settings.

Per-syntax Settings

Settings may be specified on a per-syntax basis. You can edit the settings for the current syntax using the Preferences Settings – Syntax Specific menu.

Changelog:

v1.4

  • Fixed opening default settings and help menu
  • Improved window listing on ST3
  • Fixed issue #3 thanks to @rexdf
  • Only call external executable if ST2/3 window is not already WS_EX_LAYERED

v1.3

Modified SetSublimeLayered.asm to make it smaller and to avoid false positives (tested on VirusTotal)

These are hashes:

- SHA-256    66b72c28f54728c6df3995b0ae026aa1aeeca96911d5b484673a502ec6592f2a
- CRC32        54612762
- MD5         E113BDC6FA08BC054F7A89E7B24411BD
- SHA-1     376707D5579384B42586D0616BB03BBB993C6050

v1.2

  • Onload transparency (95% working due to ST API limitations)
  • Remember chosen transparency level
  • Support for user settings

v1.0

Added support for Sublime Text 3

Global Settings

The following global settings go in the object with the key.

background
The default background color
foreground
The default color for text
invisibles
The color for whitespace, when rendered. When not specified, defaults to with an opacity of .
caret
The color of the caret
block_caret
The color of the caret when using a block caret
line_highlight
The background color of the line containing the caret. Only used when the setting is enabled.

Accents

misspelling
The color to use for the squiggly underline drawn under misspelled words.
fold_marker
The color to use for the marker that indicates content has been folded.
minimap_border
The color of the border drawn around the viewport area of the minimap when the setting is enabled. Note that the viewport is normally only visible on hover, unless the setting is enabled.
accent
A color made available for use by the theme. The Default theme uses this to highlight modified tabs when the setting is enabled.

CSS

CSS is applied to minihtml content created via the popups and phantoms functionality that is exposed through the API. Supported CSS properties are discussed in the .

Plugins that use minihtml are encouraged to set a unique attribute on the tag of generated HTML to allow color schemes to override default plugin styles.

popup_css
CSS passed to popups.
phantom_css
CSS passed to phantoms. If not specified, uses .

Diff

The diff functionality is displayed in the gutter as colored lines for added and modified lines, and a triangle where lines were deleted.

line_diff_width
The width of the diff lines, between 1 and 8
line_diff_added
The color of diff markers for added lines
line_diff_modified
The color of diff markers for modified lines
line_diff_deleted
The color of diff markers for deleted lines

Selection

selection
The background color of selected text
selection_foreground
A color that will override the scope-based text color of the selection
selection_border
The color for the border of the selection
selection_border_width
The width of the selection border, from to .
inactive_selection
The background color of a selection in a view that is not currently focused
inactive_selection_foreground
A color that will override the scope-based text color of the selection in a view that is not currently focused
selection_corner_style
The style of corners to use on selections. Options include: (the default), or .
selection_corner_radius
The radius to use when the is or .

Find

highlight
The border color for «other» matches when the Highlight matches option is selected in the Find panel. Also used to highlight matches in Find in Files results.
find_highlight
The background color of text matched by the Find panel
find_highlight_foreground
A color that will override the scope-based text color of text matched by the Find panel

Guides

Guides are controlled globally by the setting.

guide
The color used to draw indent guides. Only used if the option is present in the setting .
active_guide
The color used to draw the indent guides for the indentation levels containing the caret. Only used if the option is present in the setting .
stack_guide
The color used to draw the indent guides for the parent indentation levels of the indentation level containing the caret. Only used if the option is present in the setting .

Brackets

Bracket matching is controlled globally by the setting.

brackets_options

How brackets are highlighted when the caret is next to one. Accepts a space-separated list from the following:

brackets_foreground
The color to use when drawing the style specified by .
bracket_contents_options

How brackets are highlighted when the caret is positioned in between a pair of brackets. Accepts a space-separated list from the following:

bracket_contents_foreground
The color to use when drawing the style specified by .

Tags

Tag matching is controlled globally by the setting.

tags_options

How tags are highlighted when the caret is inside of one. Accepts a space-separated list from the following:

tags_foreground
The color to use when drawing the style specified by .

Global Settings

The following global settings go in the first , and are specified using / pairs.

background
The default background color
foreground
The default color for text
caret
The color of the caret
lineHighlight
The background color of the line containing the caret. Only used when the setting is enabled.

Accents

misspelling
The color to use for the squiggly underline drawn under misspelled words.
minimapBorder
The color of the border drawn around the viewport area of the minimap when the setting is enabled. Note that the viewport is normally only visible on hover, unless the setting is enabled.
accent
A color made available for use by the theme. The Default theme uses this to highlight modified tabs when the setting is enabled.

CSS

CSS is applied to minihtml content created via the popups and phantoms functionality that is exposed through the API. Supported CSS properties are discussed in the .

Plugins that use minihtml are encouraged to set a unique attribute on the tag of generated HTML to allow color schemes to override default plugin styles.

popupCss
CSS passed to popups.
phantomCss
CSS passed to phantoms. If not specified, uses .

Selection

selection
The background color of selected text
selectionForeground
A color that will override the scope-based text color of the selection
selectionBorder
The color for the border of the selection
inactiveSelection
The background color of a selection in a view that is not currently focused
inactiveSelectionForeground
A color that will override the scope-based text color of the selection in a view that is not currently focused

Find

highlight
The border color for «other» matches when the Highlight matches option is selected in the Find panel. Also used to highlight matches in Find in Files results.
findHighlight
The background color of text matched by the Find panel
findHighlightForeground
A color that will override the scope-based text color of text matched by the Find panel

Guides

Guides are controlled globally by the setting.

guide
The color used to draw indent guides. Only used if the option is present in the setting .
activeGuide
The color used to draw the indent guides for the indentation levels containing the caret. Only used if the option is present in the setting .
stackGuide
The color used to draw the indent guides for the parent indentation levels of the indentation level containing the caret. Only used if the option is present in the setting .

Brackets

Bracket matching is controlled globally by the setting.

bracketsOptions

How brackets are highlighted when the caret is next to one. Accepts a space-separated list from the following:

bracketsForeground
The color to use when drawing the style specified by .
bracketContentsOptions

How brackets are highlighted when the caret is positioned in between a pair of brackets. Accepts a space-separated list from the following:

bracketContentsForeground
The color to use when drawing the style specified by .

Tags

Tag matching is controlled globally by the setting.

tagsOptions

How tags are highlighted when the caret is inside of one. Accepts a space-separated list from the following:

tagsForeground
The color to use when drawing the style specified by .

HTML

The following tags are styled by the default style sheet:

  • ,
  • , , , , ,
  • , ,
  • ,
  • ,
  • ,
  • , ,

Special behavior is implemented for a few tags:

  • – a callback can be specified via the API to handle clicks on anchor tags
  • – supports PNG, JPG and GIF images from , and URLs
  • – bullets are displayed for tags

Other HTML tags with special behavior are not implemented. This includes tags such as , , , etc.

Best Practices

To allow color scheme authors to tweak the look of popups and phantoms, it is best to add a unique attribute to the tag of your plugin’s HTML.

Within the tag, add a tag containing selectors that do not use the . Leave that for selectors in color schemes to be able to override the plugin.

Predefined Classes

When minihtml processes the HTML markup, it will automatically add a single class name to the tag. The class name will be or , and is designed to allow for advanced use of CSS in styling phantoms and popups.

Работа с темой оформления

После того как необходимые расширения установлены можно перейти к работе.

Но внесем еще несколько штрихов в тему оформления. Не всем нравится тема установленная по умолчанию в Sublime Text 3, поэтому установим другую. Для этого снова нажмите ctrl+shift+P, перейдите в раздел Install-Package, как будто хотите установить новый плагин, но впишите название темы которая называется «Afterglow».

Теперь необходимо перейти в раздел “Preference Color — Scheme“.

Выбираем цветовую схему, которая теперь называется “Afterglow-monokai”.

Цветовая схема Sublime Text немного изменилась.

Но вкладки выглядят по-прежнему. Поэтому сменим еще и саму тему. Не цветовую схему для нашего кода, а тему. Для этого выбираем Theme и выбираю здесь Afterglow Orange.

Это оранжевая тема. Вкладки изменились, внешний вид в целом изменился, но размер вкладок великоват, поэтому настроим еще тоньше. Переходим в Sublime Text 3 раздел Preference и выбираем Settings.

У нас появляется два вкладки. Это вкладка со стандартными настройками Sublime Text и вкладка с нестандартными — нашими настройками.

Пропишем сюда еще кое-что, что относится к размеру табов. Для того чтобы это сделать необходимо найти тему Afterglow в интернете.

Скопируйте название темы Sublime Text 3 из настроек или просто напишите слово Afterglow в поиске. Откройте страницу на GitHub.

Воспользуемся поиском по странице, чтобы найти информацию по табам. Нажмем Ctrl+F и введем в поиске “tab”.


Сохраните внесенные изменения через ctrl+S и вы увидите, что размеры табов Sublime Text изменились.

Скачивание и установка

Рассмотрим самую последнюю версию Sublime Text 3, поэтому наша инструкция может отличаться от того что вы видели ранее в интернете.

Чтобы скачать Sublime Text 3 откройте сайт sublimetext.com/3. Откроется страница — Download Sublime Text 3. Здесь вы можете выбрать необходимую версию под вашу операционную систему. Выбираю для windows Sublime Text 3 64 bit. Если у вас тоже windows 64 bit, можете выбрать соответствующий файл Sublime Text или его портативную версию. Скачайте загрузчик. После того как загрузчик будет скачан можно приступить к установке.

Рассмотрим как установить Sublime Text 3.

Запускаем скачанный файл от имени администратора.

Подтверждаем установку Sublime Text.

Выбираем путь для установки или оставляем тот, что выбрала программа по умолчанию.

На следующем шаге Sublime Text предложит добавить себя в контекстное меню. Отметьте галочку, чтобы разрешить это.

Далее устанавливаем и финишируем установку.

Установленный Sublime Text вы можете найти через меню “Пуск” — “Все программы”.

Testing

When building a syntax definition, rather than manually checking scopes with the show_scope_name command, you can define a syntax test file that will do the checking for you:

To make one, follow these rules

  1. Ensure the file name starts with syntax_test_.
  2. Ensure the file is saved somewhere within the Packages directory: next to the corresponding .sublime-syntax file is a good choice.
  3. Ensure the first line of the file starts with: <comment_token> SYNTAX TEST "<syntax_file>". Note that the syntax file can either be a .sublime-syntax or .tmLanguage file.

Once the above conditions are met, running the build command with a syntax test or syntax definition file selected will run all the Syntax Tests, and show the results in an output panel. Next Result (F4) can be used to navigate to the first failing test.

Each test in the syntax test file must first start the comment token (established on the first line, it doesn’t actually have to be a comment according to the syntax), and then either a ^ or <- token.

The two types of tests are:

  • Caret: ^ this will test the following selector against the scope on the most recent non-test line. It will test it at the same column the ^ is in. Consecutive ^s will test each column against the selector.
  • Arrow: <- this will test the following selector against the scope on the most recent non-test line. It will test it at the same column as the comment character is in.

С этим читают