Для того чтобы отформатировать текст в виде html, обычно используются теги. Причём чаще всего сначала формируют разметку документа в виде тегов, а потом внутрь них вставляют текст. Но бывает ситуации, когда текст уже есть, он хорошо отформатирован, разбит на абзацы, заголовки и другие логические части: списки, блоки с кодом и т.п.
Тогда текст проще "оборачивать" в теги.
Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.
Установка плагина Emmet в Brackets
Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку Drag zip here или Установить с URL.
Или еще проще - в поле поиска справа вверху ввести "Emmet" и установить плагин, кликнув на нем.
Аббревиатуры в Emmet
Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.
|
1 |
div превратится в <div></div> |
Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h1{Текст заголовка} и нажать Tab.
|
1 |
<h1>Текст заголовка</h1> |
Чтобы создать заголовок с тексом-"рыбой", которым обычно является lorem ipsum... - псевдо латинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать
|
1 |
h2>lorem3 |
Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.
Чтобы создать div с классом block, нужно набрать просто
|
1 |
.block |
А для абзаца с классом block обязательно указать тег p:
|
1 |
p.block |
А код ниже превратиться в абзац, заполненный шаблонным текстом lorem ipsum.
|
1 |
p.block>lorem |
Если вам необходимо добавить элемент div с id="wrap", причем с вложенными в него 2-мя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:
|
1 |
#wrap>p*2>lorem |
Оборачивание текста в теги
Но пока мы не приблизились к тому, как оборачивать существующий текст в теги.
На самом деле все просто. Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.
В нижней части редактора будет выведено поле для ввода аббревиатуры. И здесь действуют те же правила. Правда, вряд ли в этом случае вам понадобится текст-рыба 🙂
Видео по теме
В видео ниже разбирается, как превратить txt-файл в html с разметкой и css-форматированием с помощью плагина Emmet. Вы можете попробовать повторить все действия, скачав txt-файл.
