Brackets как изменить шрифт

Like previously mentioned, you can achieve this with the ui-too-small plugin.

Personally I don’t like the default settings of this plugin either but you can change the setting by editing the main.js file which you can find by navigating to:

Help > Show Extensions Folder > Navigate to user > Navigate to ui too small > open main.js

I personally like the following settings (Material Design):

    define(function (require, exports, module) {
        "use strict";

        var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");

    ExtensionUtils.addEmbeddedStyleSheet("#sidebar *, #main-toolbar *, #titlebar *, #problems-panel *,"+
    "#find-in-files-results *, #e4b-main-panel *, #status-bar *,"+
    "#main-toolbar *, #context-menu-bar *, #codehint-menu-bar *,"+
    "#quick-view-container *, #function-hint-container *  { font-size: 16px !important;"+
    " line-height: 30px !important; }"+
    ".sidebar li { min-height: 30px !important;}"+
    ".sidebar-selection, .filetree-selection { min-height: 30px !important; margin-top: 5px;}"+
    ""+".jstree-icon{margin-top:10px !important} .filetree-selection-extension{margin-top: 5px; height: 30px !important;} .jstree-rename-input{ margin-top: 2px !important; height: 30px !important;   padding-bottom: 0px !important;} "
    );
    });

Brackets 0.42 and newer

To change the code editor font, choose View > Themes…, then change the «Font Family» setting.

• Use the same syntax as you would font-family in CSS
• The font must be installed on your OS (there’s no way to load a web font)
• One exception: 'SourceCodePro-Medium', the default code editor font, is a web font that’s loaded automatically by Brackets (installing Brackets doesn’t install any fonts globally on your system)

Changing your font can be useful as a workaround for certain international text-display issues, such as lack of Russian/Cyrillic support.

Older Brackets & Adobe Edge Code

Here’s a quick hack you can use to change your font in earlier releases:

Approach A: Write an extension

Write a Brackets extension using this code as the basis for your main.js:

define(function (require, exports, module) {
    "use strict";

    var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");

    ExtensionUtils.addEmbeddedStyleSheet(".CodeMirror { font-family: 'Comic Sans MS'; }");
});

…except pick a less horrible font!

Note: There’s no need to write a package.json file since this extension is just for yourself; package.json is only needed if you want to publish the extension for others to use.

If you store this extension in the location given by Help > Show Extensions Folder, then you can freely upgrade to newer Brackets versions and your extension will remain in place.

Caveat: This approach only works for fonts installed on your OS. If you want to use a web font (loaded via @font-face), you need to edit the Brackets core source code.

Approach B: Edit Brackets source

1. Set up a Brackets dev environment (you can omit the fork step and clone the official repo directly, however)
2. In the cloned source, edit the file src/styles/brackets_theme_default.less
3. Add your @font-face import directive if needed
4. Find the .code-font() rule and change the font-family as desired
5. Restart Brackets

Caveats: In order to keep up to date with Brackets updates, you’ll need to to manually pull down source code updates (this can be tricky if you’re not familiar with Git). Brackets loads slightly slower in a dev environment because the source isn’t minified.

The customization workspace is helpful for setting up and make the modifications in the work area. The workspace modifications like font size, sidebar, error warnings, quick view, themes, etc., according to the developer’s convenience.

The modifications in the workspace or work area are —

• Theme Change
• Change Font Family
• Changing Font Size
• Word Wrap
• Line Numbers
• Space or Tab preference
• File type
• Insert/Overwrite mode
• Cursor/File info

Theme Change —

The themes option is present in the view menu. The Brackets light theme was applied to the tool by default. There are a lot of other themes in the extensions manager. If someone wants to use a new theme, then select the theme from the list and install it.

When the themes are installed, they cannot be applied to the editor. If you plan to change the theme for the editor, then click on the view menu and then click on the themes button. Then a dialogue box is opened. In that box, under the option «current theme», select the required theme.

The installed theme is present in the current theme option.

View -> Themes -> Current Theme 

Change Font Family —

The next one is how to change the font in the bracket editor. First, click on the view menu and then click on the themes. By clicking on the themes, a dialogue box is opened. In that dialogue box, there is an option for changing the font. If you want to change the font, change it and then click on done.

View -> Themes -> Font Family 

This method can only change the font of the text in the editor, not the font on the website.

Changing Font Size —

Options for changing of the font size are present in the view menu. There are three ways to change the font size. They are —

Word Wrap —

The word-wrap button is present in the view menu. If the word wrap button is on, then the new words after specified length can automatically start in the new line. If the word wrap button is off, then the new words are displayed horizontally. So, every time scrolling horizontally is difficult. By default, the word-wrap button is set to ‘on’.

 View -> Word Wrap

Line Numbers —

The line numbers button is present in the view menu. If the line numbers button is on, then the line numbers in the editor can be visible. If the word wrap button is off, then the line numbers in the editor cannot be visible. By default, the line numbers button is ‘on’.

 View -> Line Numbers

Space or Tab preference —

Space and tab preferences can be set using the bottom status line. For example, if the space value is given as four and presses the tab on the keyboard, it provides the four spaces every time.

Space -> Value 
	or 
Tab Space -> Value 

File type —

The file type button is present on the right side of the status bar. Brackets use the file type to determine the syntax used to highlight the code based on the extension. On the bottom right, there is an option for the type of file being edited. Click on that to get a pop-up menu of all possible file types. Select any one of the file types, and start coding the corresponding type. By default, HTML is the file type.

Change File Type -> Select File Type

Insert/Overwrite mode —

The insert/overwrite mode is present on the right side of the status bar. This button is used to change the mode between the insert and overwrite. The insert mode is used to insert the text, and the overwrite mode is used to overwrite the text.

Insert/Overwrite Mode -> Insert  
	or
Insert/Overwrite Mode -> Overwrite 

Cursor/File info —

The cursor or file information is present on the left side of the status bar. It specifies the cursor position that includes the current line number, column number, and the total number of lines in the file.

В данной записи мы с вами рассмотрим новый редактор кода Brackets. Это очень удобный и компактный редактор кода, который подойдет как новичкам так и опытным программистам. Данный редактор легкий и простой как Sublime Text и многофункциональный как PHP Storme.

Ссылка на редактор — http://brackets.io

Первым большим плюсом является его доступность. Данный редактор бесплатный, поэтому вы легко можете его скачать с официального сайта.

Давайте я вам покажу основные моменты настройки редактора, а так же посмотрим его функционал.

Оформление

Во вкладке «Вид->Themes» вы можете изменить основные настройки оформления. По стандарту имеются две темы — Brackets Dark и Brackets Light, но в дальнейшем вы сможете установить тему из библиотеки.

Вы можете также изменить размер и семейство шрифта. Вы можете использовать любой шрифт который имеется в вашей системе.

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

• вы можете разделить экран и открыть одновременно 2 файла. Для этого нужно выбрать Vertical Split или Horizontal Split.
• можно скрыть боковую панель нажав на соответствующий пункт меню
• увеличить или уменьшить размер шрифта
• нажмите на «Подсвечивать активную область» и редактор будет подсвечивать строку на которой находится курсов
• вы можете отключить или включить нумерацию строк
• «Заворачивать строки» данный параметр позволяет заворачивать длинные строки кода, которые вылазят за размеры окна редактора.

Добавление новых плагинов и тем

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

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

Навигация

Это первый редактор который так подробно описывает файл в котором вы работаете. Здесь вы можете узнать количество строк и столбцов в файле, указать тип файла из списка, без труда поменять кодировку, а так же поменять тип курсора.

Быстрый просмотр и замена стилей элемента.

Выбираете элемент, нажимаете Ctrl + E и появляется окно со всеми стилями, которые применены к данному элементу. Вы можете их переписать или добавить новые и они сохраняться в том файле в котором они были прописаны.

Так же вы можете применять быстрое редактирования для CSS свойств. Здесь несколько видов окон быстрого редактирования, для каждого свойства представлено свое окно.

1)Нажав на кодировку цвета у таких свойств как background, color, border и так далее, и нажав клавиши Ctrl + E, у вас появляется окно с палитрой, где вы сможете выбрать нужный вам цвет

2) Вы можете нажать тоже сочетание клавиш выбрав значение свойства animate и тогда у вас выведется окно с графиком анимации.

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

Быстрый доступ к редактированию функции JavaScript

Данный редактор позволяет быстро править JS функции, аналогично правкам CSS.

Встроенная документация

Аналогично предыдущему правилу вы можете увидеть справку по CSS свойствам и по HTML тегам. Для этого нужно выбрать нужное свойство или тег и нажать клавиши Ctrl + K? после чего у вас появится окно в котором будет информация о данном элементе.

Возможность просмотра изменений после редактирования без перезагрузки страницы.

С помощью данной функции вы можете открывать файл и браузер на разных мониторах и просматривать изменения без перезагрузки страницы.

К сожалению на тот момент, когда я пишу эту запись, эта функция работает только для браузера Chrome.

4 ответа

Лучший ответ