Вы здесь: Главная » CSS » Форматирование текста с помощью плагина Emmet

Форматирование текста с помощью плагина Emmet

Для того чтобы отформатировать текст в виде html, обычно используются теги. Причём чаще всего сначала формируют разметку документа в виде тегов, а потом внутрь них вставляют текст. Но бывает ситуации, когда текст уже есть, он хорошо отформатирован, разбит на абзацы, заголовки и другие логические части: списки, блоки с кодом и т.п.

Тогда текст проще "оборачивать" в теги.

Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.

Установка плагина Emmet в Brackets

Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку  Drag zip here или Установить с URL.

Или еще проще - в  поле поиска справа вверху ввести "Emmet" и установить плагин, кликнув на нем.

emmet-brackets

Аббревиатуры в Emmet

Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.

Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h1{Текст заголовка} и нажать Tab.

Чтобы создать заголовок с тексом-"рыбой", которым обычно является lorem ipsum... - псевдо латинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать

Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.
Чтобы создать div с классом block, нужно набрать просто

А для абзаца с классом block обязательно указать тег p:

А код ниже превратиться в абзац, заполненный шаблонным текстом lorem ipsum.

Если вам необходимо добавить элемент div с id="wrap", причем с вложенными в него 2-мя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:

Оборачивание текста в теги

Но пока мы не приблизились к тому, как оборачивать существующий текст в теги.
На самом деле все просто. Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.
В нижней части редактора будет выведено поле для ввода аббревиатуры. И здесь действуют те же правила. Правда, вряд ли в этом случае вам понадобится текст-рыба 🙂

enter abbriviation

Видео по теме

В видео ниже разбирается, как превратить txt-файл в html с разметкой и css-форматированием с помощью плагина Emmet. Вы можете попробовать повторить все действия, скачав txt-файл.

2016 .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *