Возвышенный текст не работает h1
Обновлено: 04.07.2024
Приветствую землян и кодеров! Вы когда-нибудь задумывались, есть ли новый способ ускорить процесс разработки? Что ж, я знаю, что у большинства из нас есть собственные способы ускорить веб-процессы, а некоторые все еще ищут новые и более быстрые способы выполнения работы за меньшее время.
Ну, это твой счастливый день, мой друг. В этом посте я собираюсь показать вам, как Sublime Text и Emmet могут улучшить ваш процесс разработки. Так что, если вы все еще используете Dreamweaver, вам лучше уже отказаться от этой штуки. Нет, просто шучу.
Сегодня у нас есть множество облегченных текстовых редакторов, которые мы можем использовать для написания кода. Например, теперь у нас есть Textmate, Espresso, Coda, NetBeans и Sublime Text, которыми я сейчас пользуюсь, и многие другие текстовые редакторы.
Так зачем использовать Sublime text? Что ж, я использую Sublime, потому что он бесплатный, очень легкий, он работает как для Mac, так и для Windows, и у него есть несколько плагинов и надстроек, которые вы можете скачать бесплатно с помощью управления пакетами в зависимости от используемого вами языка программирования; будь то HTML, PHP, Symphony, Twigg или просто CSS. Теперь в этом посте я буду обсуждать один конкретный плагин, который я использую для ускорения написания кода, это Emmet для Sublime Text.
Эммет действительно спасает нас, когда дело доходит до написания кода для внешних разработчиков. Использование этого инструмента позволяет нам использовать ярлыки, поэтому вам не нужно вводить весь код или даже целые наборы кода в редакторе. Например, при запуске вашего HTML-документа вместо того, чтобы вводить весь Doctype, HTML, заголовок, мета, заголовок и тело, вы можете просто ввести «html: 5», чтобы сгенерировать весь набор кодов с закрывающими тегами, конечно . Очень удобно, правда?
Итак, давайте начнем с загрузки и установки Sublime text. Если у вас его нет, вы можете просто нажать на эту ссылку для загрузки. После установки Sublime вам необходимо установить «Управление пакетами», чтобы вы могли получить все надстройки, которые вы можете использовать. Чтобы установить Package Control, просто откройте текстовую консоль Sublime через «Просмотр > Показать консоль» или просто нажмите Ctrl + `. Затем просто скопируйте и вставьте код Python по этой ссылке в консоль внизу вашего текстового документа Sublime. После установки перезапустите возвышенный текст.
Когда приложение перезапустится, нажмите Ctrl + Shift + P на клавиатуре. Затем введите «Установить пакет» в текстовое поле и нажмите Enter.
В списке просто найдите Emmet и нажмите Enter, чтобы установить его. Теперь все готово для использования плагина.
Теперь, когда вы успешно установили Sublime и Emmet, пришло время изучить несколько довольно крутых ярлыков. Итак, давайте начнем с создания нового файла и сохранения его как «test.html», или вы можете просто назвать его как угодно.
Совет. Emmet не будет работать, пока вы не сохраните файл.
Урок первый: основы
Чтобы начать работу, введите «html:5» и нажмите клавишу Tab на клавиатуре.
Аааа Валла! Весь HTML-код генерируется для вас в одно мгновение.
Разве это не потрясающе?
Ну, друг мой, мы только начинаем. Тебе предстоит многому научиться. По сути, вы можете попробовать любой HTML-тег и просто нажать Tab, чтобы сгенерировать синтаксис.
Совет. Не забывайте нажимать Tab после ввода каждого сочетания клавиш, чтобы сгенерировать синтаксис.
Теперь, когда вы знаете основы, давайте перейдем к следующему уроку.
Урок второй: операторы
В этой части мы узнаем о синтаксических комбинациях с использованием операторов. Чтобы генерировать ярлыки с комбинациями синтаксиса, мы должны сначала узнать, как работает каждый оператор, который мы собираемся использовать в процессе. Итак, давайте начнем с самых распространенных.
Дочерний оператор " > "
Мы можем использовать дочерний оператор, если у нас есть вложенные элементы.
Напр. Список с якорным текстом. Чтобы сгенерировать это, мы можем сделать следующее:
ul>li>а
Родственный оператор " + "
Мы можем использовать одноуровневый оператор, если два или более элементов одного уровня.
Напр. Элемент Div с элементом H1 и span.
div>h1+p
Как вы можете видеть на этом рисунке, h1 и p являются одноуровневыми и дочерними элементами div.
Да, мы можем использовать комбинации операторов, так что не бойтесь пробовать и экспериментировать.
Следующий оператор умножения " * "
Вы можете просто использовать этот оператор для создания нескольких одинаковых элементов или дубликатов.
Напр. Список из шести элементов.
ul>li*6
И Next — это оператор подъема вверх «^», который я практически не использую.
Вы можете использовать этот оператор, чтобы подняться на один уровень выше вложенного элемента, чтобы сделать его на одном уровне с родительским элементом.
section>div>a>span^a
Итак, здесь произошло то, что «a» после span поднялся на один уровень вверх и стал родственным другому «a» с дочерним элементом span. Это может немного сбивать с толку; следующий урок объяснит, почему я редко использую этот оператор.
А теперь почему бы нам не повеселиться и не попробовать несколько комбинаций этих операторов и посмотреть, что произойдет, когда они сгенерируются?
Урок третий: группировка
Группировка элементов во избежание путаницы.
Теперь, когда мы знакомимся с операторами, иногда наши ярлыки становятся слишком длинными, что иногда мы путаемся или сгенерированный синтаксис отличается от того, что мы ожидали. Позвольте привести пример. Допустим, у вас есть заголовок, навигация, три раздела, и у всех есть h3, span и a; затем нижний колонтитул.
Поэтому без группировки мы могли бы запутаться и ввести ярлык следующим образом:
заголовок+навигация+раздел*3>h3+span+a+нижний колонтитул
Довольно сложно, не так ли? И получилось даже не то, что мы хотели. Таким образом, трюк здесь заключается в том, чтобы сгруппировать некоторые элементы вместе, особенно те, у которых есть кратные элементы, и дочерние элементы.
Чтобы сгруппировать элементы вместе, мы используем круглые скобки ().
И чтобы исправить ярлык, который у нас был некоторое время назад с примененной группировкой, вот как это будет выглядеть:
заголовок+навигация+(раздел*3>h3+span+a)+нижний колонтитул
Итак, ребята, мы можем создавать более сложные ярлыки с правильно сгенерированным синтаксисом, используя операторы и группировку.
Устали вырезать и вставлять шаблон HTML5? Или постоянно вводить один и тот же код? К счастью, Sublime Text позволяет легко и быстро вставлять определенные фрагменты кода.
Как вы, наверное, знаете, когда вы вводите букву p в HTML-документе в Sublime Text и нажимаете Tab, она автоматически расширяется до
<р>. Но что, если вам это не нравится (мне не нравится) и вместо этого вы хотите, чтобы он расширился до этого (с курсором, появляющимся там, где труба)?Давайте создадим для этого фрагмент кода.
Создать
Чтобы создать свой первый фрагмент в Sublime Text, сделайте следующее:
Выберите Инструменты > Новый фрагмент. Откроется новый файл без названия, содержащий следующее:
Содержимое помещается между & ]]> , в результате получается следующее:
Видите этот доллар? Это говорит Sublime Text поместить курсор туда, когда он закончит расширение вашего фрагмента. Sublime Text называет это маркером поля.
Следующим идет tabTrigger, текст, который вы вводите, за которым следует вкладка, которая расширяется для создания содержимого. В нашем случае мы хотим использовать букву p. Избавьтесь от комментария, описывающего tabTrigger, а затем измените фактическую строку для tabTrigger на это:
Наконец, область действия, которая определяет типы файлов (HTML, CSS, PHP, сценарий оболочки и т. д.), в которых происходит расширение. Опять же, избавьтесь от закомментированной строки, описывающей область действия, и измените строку области действия на следующую:
На этом этапе файл должен выглядеть так:
Сохраните файл. Когда вы это сделаете, вам нужно будет определить две вещи: имя файла и место его сохранения.
Имя файла: файл должен заканчиваться на .sublime-snippet , например: foo.sublime-snippet . То, что идет перед .sublime-snippet, зависит от вас. Мне нравится использовать tabTrigger, если это вообще возможно, вместе с основной частью области перед tabTrigger, что дает мне это: html-p.sublime-snippet.
Где сохранить: когда вы нажимаете «Сохранить», Sublime Text автоматически пытается сохранить файл в нужной папке.
- Mac OS X: /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User
- Windows:
- Переносное устройство Windows (USB-накопитель):
- Линукс:
Вам не нужно беспокоиться о местоположении, так как Sublime Text позаботится об этом за вас, но если по какой-то странной причине вы находитесь не в том месте, вам нужно будет перейти вправо местоположение.
Теперь давайте протестируем наш новый фрагмент.Откройте документ HTML (или откройте новую вкладку в Sublime Text и щелкните в правом нижнем углу, чтобы изменить тип документа с обычного текста на HTML), щелкните его и введите p , а затем Tab. Вы должны увидеть следующее, с курсором вместо символа вертикальной черты ( | ):
Введите нужный контент между
, а затем снова нажмите Tab, и Sublime Text автоматически переместит курсор сразу после
, поэтому вы нажимаете Enter и продолжаете печатать. Наш фрагмент сработал. Отлично!
Другие примеры
Вот несколько других примеров, которые также иллюстрируют некоторые другие вещи, которые вы можете делать с помощью фрагментов Sublime Text.
Шаблон HTML5
Если вы создаете веб-сайты на основе HTML5, вы, вероятно, снова и снова используете один и тот же шаблон. Это именно то, что вы должны превратить во фрагмент кода Sublime Text!
Перейдите в Инструменты > Новый фрагмент и введите следующее:
Сохраните его как html-html5skel.sublime-snippet 1 .
Это то же самое, что и предыдущее, но с одним большим отличием. Раньше мы использовали $1, чтобы указать, где должен располагаться курсор после расширения. В нашем шаблоне HTML5 вместо этого вы видите $1 , $2 и $3 . Что происходит?
Используйте $1, если хотите поместить курсор в определенное место и покончить с этим. В моем примере выше с
на самом деле есть только одно место для курсора, так что это все, что мне нужно.
Но при создании более длинного и сложного шаблона вы хотите, чтобы ваш курсор действительно проходил в нескольких местах.
- $1 указывает Sublime Text поместить туда курсор после завершения расширения, чтобы вы могли ввести соответствующий заголовок для веб-страницы.
- Когда вы закончите в этом месте, нажмите Tab, и ваш курсор переместится на $2, чтобы вы могли ввести текст для заголовка страницы, который появится в окне просмотра браузера.
- После этого еще раз нажмите клавишу Tab, и курсор совершит последний переход к $3 внутри первого абзаца.
Вы можете добавить столько прыжков, сколько хотите, и столько прыжков, сколько хотите или считаете нужным. Да, и если вы хотите перейти назад, а не вперед, нажмите Shift-Tab.
3 абзаца
Я использую это все время. Мне часто хочется не одного абзаца, а трех.
Я достаточно умно сохранил это как html-p3.sublime-snippet . Обратите внимание, что я снова использую маркеры полей, чтобы можно было переходить между абзацами после их создания.
Что насчет CSS? Вы можете использовать сниппеты как для CSS, так и для HTML (фактически, вы можете использовать сниппеты с любым языком или текстом, который работает внутри Sublime Text).
Это очень удобно, а также иллюстрирует некоторые дополнительные сведения, которые вам нужно знать о фрагментах кода Sublime Text. Я сохранил его как css-font.sublime-snippet:
Первое, на что следует обратить внимание, — это строка …. Вы можете положить туда что угодно, так как это только для ваших глаз. Когда вы начнете вводить tabTrigger , вы увидите описание в виде небольшой всплывающей подсказки, чтобы напомнить вам, что делает фрагмент. Вы можете использовать любой фрагмент кода, а не только CSS, поэтому не стесняйтесь размещать их везде, где это может вам помочь.
Следующее, что нужно обсудить, это то, что область действия отличается. Для фрагмента HTML нам пришлось использовать text.html, но для CSS вместо этого мы используем source.css. Почему разница? Согласно определениям синтаксиса в Sublime Text Docs:
Область верхнего уровня для этого определения синтаксиса. Он принимает форму источника. или текст. . Для языков программирования используйте исходный код. Для разметки и всего остального используйте текст .
Итак, если вы создаете фрагмент для HTML или других языков разметки (таких как XML, YAML, LaTeX, Textile и Markdown), используйте текст. . Для всего остального — таких языков программирования, как C, C++, Erlang, Python, Perl, Java, JavaScript, PHP, Ruby on Rails и сценариев оболочки bash — используйте исходный код. 2 . CSS обычно не то, что я бы назвал языком программирования, но это точно не язык разметки, поэтому он получает source.css .
Наконец, сосредоточьтесь на содержании фрагмента:
Чтобы понять, что это значит, давайте посмотрим на результаты. Когда вы наберете шрифт и нажмете Tab, вы увидите следующее:
Ваш курсор там не виден; вместо этого выбрано: normal|italic|oblique , что соответствует этому коду в вашем фрагменте: $ <1:normal|italic|oblique>. В Sublime Text $ <1:normal|italic|oblique> — это маркер поля, который также содержит местозаполнитель. $ такой же, как $1: это маркер поля. Обычный|курсив|наклонный создает текст-заполнитель, который выделяется при развертывании фрагмента. Идея состоит в том, что вы увидите три варианта в качестве напоминания, а затем сможете ввести тот, который хотите.
После того, как вы закончите печатать, нажмите Tab, и будет выбран следующий заполнитель — обычный|маленькие заглавные — потому что он соответствует $ .Введите обычные или маленькие заглавные буквы (или что-то еще, заполнитель — это просто предложение, которое вы можете игнорировать), нажмите Tab, и будет выбран текст заполнителя маркера третьего поля: normal|bold|bolder|lighter . И так далее.
Еще одна вещь о заполнителях: если вместо этого вы используете что-то вроде $ , то при раскрытии фрагмента будет выбрано foo. Затем вы можете изменить foo на что-то другое, или вы можете просто нажать Tab и оставить foo там, переходя к следующему маркеру поля. Дело в том, что текст-заполнитель может быть как одним элементом, так и несколькими. Это твой выбор. В любом случае маркеры полей с заполнителями — это мощный и полезный инструмент, который делает Sublime Text великолепным.
Подробнее
Дополнительную информацию о фрагментах Sublime Text см. в каноническом источнике: Sublime Text Docs: Snippets.
"скел" – это сокращение от "скелет". Вы также можете использовать «шаблон» в имени tabTrigger и файла; Я предпочитаю "скел", потому что он короче. ↩
Sublime Text — один из самых популярных текстовых редакторов в мире. Он наполнен мощными функциями, такими как многострочное редактирование, системы сборки для десятков языков программирования, поиск и замена регулярных выражений, Python API для разработки подключаемых модулей и многое другое.
Лучше всего то, что он кроссплатформенный (Mac, Windows и Linux) и распространяется как «условно-бесплатное ПО», что означает, что его можно использовать бесплатно со всплывающим окном о покупке.
В этой статье вы узнаете, как использовать Sublime Text для удовлетворения всех ваших потребностей в редактировании текста и кода!
Что такое возвышенный текст?
Sublime Text позиционирует себя как «сложный текстовый редактор для кода, разметки и прозы». Первоначально выпущенный более десяти лет назад, в январе 2008 года, Sublime Text сейчас находится в четвертой основной версии и поддерживает Mac, Windows и Linux.
По своей сути Sublime Text похож на швейцарский армейский нож, который можно применить к любому варианту использования или проблеме, связанной с манипулированием текстом.
На первый взгляд Sublime Text может показаться текстовым редактором, который полезен только разработчикам. Хотя это отличный инструмент для разработчиков, это также мощное приложение для писателей и блоггеров.
Прежде чем мы углубимся во все функции и возможности Sublime Text, давайте быстро рассмотрим несколько сценариев, в которых Sublime Text может быть полезен.
Найти и заменить регулярное выражение
Regex, сокращение от регулярного выражения, представляет собой синтаксис для указания шаблонов поиска. Регулярное выражение часто используется для поиска похожих (но разных) текстовых строк для редактирования текста.
Например, если вы хотите удалить все теги HTML из документа, поиск каждого тега для удаления займет очень много времени (например,
Вместо этого вы можете выполнять поиск с помощью одного шаблона регулярного выражения. В этом случае для поиска всех тегов HTML в документе можно использовать шаблон регулярного выражения [a-zA-Z0-9].
Поиск и замена текста в Sublime Text.
Выполнить поиск и замену регулярных выражений в Sublime Text очень просто. В строке меню нажмите «Найти» > «Найти в файлах». Затем включите режим регулярного выражения в меню поиска и замены, укажите шаблон регулярного выражения в поле «Найти», выберите и нажмите «Найти» или «Заменить» в зависимости от того, что вам нужно сделать.
Быстрый запуск кода
В отличие от традиционных текстовых редакторов, Sublime Text позволяет запускать код непосредственно в приложении. Это особенно полезно для более простых проектов, таких как небольшие сценарии Bash или Python.
Например, если вы пишете простой скрипт Python для извлечения данных из списка URL-адресов, настройка отдельного терминала для отладки кода менее удобна, чем запуск скрипта непосредственно в Sublime Text.
Запустить код в Sublime Text.
Чтобы запустить код в Sublime Text, выберите «Инструменты» > «Система сборки» и выберите язык для своего кода (Sublime поставляется с поддержкой различных языков, таких как Python, Ruby, Bash и других). Затем нажмите Cmd+B на Mac или Ctrl+B на Windows, чтобы запустить код.
Многострочное редактирование
Многострочное редактирование в Sublime Text
С помощью Sublime Text вы можете выбрать все строки, которые хотите отредактировать, нажать Shift+Cmd+L и редактировать каждую строку одновременно!
Как видите, хотя Sublime Text имеет расширенные встроенные функции, ориентированные на разработчиков, существует также множество мощных инструментов, таких как поддержка регулярных выражений и многострочное редактирование, которые, несомненно, полезны и для не-разработчиков.
Теперь, когда у вас есть общее представление о том, что может делать Sublime Text, давайте углубимся и узнаем больше о приложении.
Отрывки текста
Возможно, самая мощная функция Sublime Text (особенно для программистов) — это текстовые фрагменты.
Все мы знаем, что написание кода иногда может быть утомительным. Sublime Text Snippets — это быстрый и простой способ вставки блоков текста, которые будут постоянно появляться в любом проекте.
Что делает эти текстовые фрагменты еще лучше, так это то, что их легко понять и довольно просто написать. Этот инструмент помогает разработчикам сэкономить время и устранить множество ошибок при разработке.
Введите слово «триггер» и нажмите кнопку табуляции, чтобы запустить фрагмент.
Как скачать Sublime Text
Sublime Text доступен для бесплатной загрузки на официальном веб-сайте Sublime Text. При этом Sublime Text технически не является «бесплатным ПО». Вместо этого Sublime Text является «условно-бесплатным» приложением, что означает, что его можно загрузить бесплатно, но по прошествии некоторого времени могут быть некоторые ограничения функций.
В случае с Sublime Text приложение будет продолжать работать неограниченное время, но время от времени вы будете видеть всплывающее окно с подробной информацией о том, как приобрести приложение.
Если вы заинтересованы в приобретении Sublime Text, вы можете получить личную лицензию за 99 долларов США или бизнес-лицензию по цене от 65 долларов США за рабочее место в год. Хотя платная лицензия не открывает никаких дополнительных основных функций, вы получаете доступ к следующим преимуществам:
- Нет всплывающих окон с напоминанием о покупке.
- Доступ к разрабатываемым версиям Sublime Text
- Уведомления об обновлениях в приложении
Sublime Text 101 — Основы
Поскольку Sublime Text — приложение, насыщенное функциональностью, мы обсудим основные функции и рабочие процессы для двух групп пользователей — писателей и разработчиков. Но сначала давайте разберемся с Sublime Text, прежде чем переходить к пользовательским элементам.
Как настроить параметры Sublime Text
В отличие от других приложений с графическими меню настроек, настройки Sublime Text полностью текстовые. Чтобы просмотреть настройки Sublime Text, перейдите в Sublime Text > «Настройки» и нажмите «Настройки». Вы должны увидеть такой документ:
Настройки Sublime Text.
Поначалу этот документ с настройками может показаться сложным (особенно если вы не привыкли работать с инструментами, ориентированными на разработчиков), но теперь мы поможем вам разобраться во всем!
Настройки Sublime Text хранятся в формате JSON. JSON — это стандартный отраслевой формат для хранения информации о ключах и значениях, поэтому вы, возможно, где-то уже видели его использование. JSON хранит информацию в массивах ключ-значение следующим образом:
Приведенный выше массив можно использовать для описания свойств автомобиля, в данном случае синего седана с пятью сиденьями. Точно так же массив JSON может указывать настройки для приложения, что и делает Sublime Text.
Подпишитесь на рассылку новостей
Хотите узнать, как мы увеличили трафик более чем на 1000 %?
Присоединяйтесь к более чем 20 000 человек, которые получают нашу еженедельную рассылку с полезными советами по WordPress!
Вернемся к файлу настроек Sublime Text. Как видно на скриншоте выше, файл настроек представлен в виде двух JSON-массивов. Массив слева содержит настройки Sublime Text по умолчанию, а массив справа включает пользовательские настройки.
Как правило, никогда не следует напрямую изменять настройки по умолчанию. Вместо этого вы можете переопределить настройки по умолчанию с помощью пользовательских настроек — это позволит вам вернуться к настройкам по умолчанию, если что-то пойдет не так.
Итак, как бы вы изменили некоторые настройки по умолчанию? Допустим, вы хотите внести следующие изменения:
Чтобы внести эти изменения, добавьте каждый элемент в документ пользовательских настроек в допустимом формате JSON, например, так (если у вас уже есть пользовательские настройки, добавьте каждый параметр, не создавая новый массив):
Если вы не уверены, правильно ли отформатировали параметры, вы можете использовать онлайн-инструмент, например JSONLint, для проверки массива JSON. После того, как вы указали настройки, сохраните файл, и все готово!
Управление проектами и файлами в Sublime Text
При работе над проектом, будь то серия сообщений в блоге или исходный код веб-приложения, ваши файлы обычно располагаются в папке проекта. Sublime Text учитывает и предоставляет функциональный графический интерфейс для управления файлами и каталогами.
Допустим, у вас есть папка с именем «my-sublime-text-project», как показано на скриншоте ниже.Если вы перетащите эту папку в Sublime Text, вы сможете создавать новые файлы и папки непосредственно в Sublime Text.
Проект Sublime Text.
Как видите, папку «my-sublime-text-project» можно увидеть в левой части окна Sublime Text в разделе «Папки».
Управление файлами и папками в Sublime Text.
Щелкнув правой кнопкой мыши папку проекта, вы откроете подменю, позволяющее создавать новые файлы, переименовывать файлы, создавать и удалять папки и т. д. Встроенные функции управления файлами Sublime Text устраняют необходимость во внешнем инструменте, таком как Finder, для выполнения основных задач управления файлами.
Устали от некачественной поддержки хостинга WordPress уровня 1 без ответов? Попробуйте нашу службу поддержки мирового уровня! Ознакомьтесь с нашими планами
Создавать файлы и папки.
В Sublime Text под проектом понимается набор импортированных файлов и папок (например, папка «my-sublime-text-project», которую мы импортировали ранее. Если вы нажмете «Проект» в строке меню, вы увидите таких как «Открыть проект», «Переключить проект» и «Сохранить проект как». Однако возможности создать новый проект нет.
Это связано с тем, что проекты Sublime Text неявно создаются при создании нового файла и импорте папки. В приведенном выше примере мы можем нажать «Проект» в строке меню и нажать «Сохранить проект как», чтобы сохранить проект.
Возвышенный текст для писателей
Выделить управление файлами
Подчеркните, как функции управления файлами и проектами могут упорядочивать содержимое. Например, автор может создать файл для каждой главы книги, а блоггер может создать разные папки для разных категорий сообщений.
Мощная поисковая система и замена
В Sublime Text реализована мощная функция поиска и замены. Он не только поддерживает регулярное выражение, но вы также можете указать файлы и папки для поиска. Например, если автор хотел изменить имя персонажа в рассказе, он мог указать папку поиска и выполнить поиск по всему содержимому папки.
Очень расширяемый
Sublime Text расширяем, а его пакет MarkdownEditing — отличный инструмент для писателей, использующих синтаксис Markdown.
Sublime Text для разработчиков
Богатая экосистема плагинов
Sublime Text имеет богатую экосистему плагинов, доступ к которой можно получить через встроенный менеджер пакетов. Разработчики могут устанавливать плагины для улучшения своего рабочего процесса. Например, подключаемый модуль Formatter включает правила форматирования для HTML, CSS, JS, Python и других языков.
Подключаемый модуль можно настроить на автоматическое форматирование файлов исходного кода, что помогает сохранять код аккуратным и стандартизированным с точки зрения форматирования.
Еще несколько обязательных плагинов, которые стоит рассмотреть, включают Package Control (необходим для установки плагинов) и Emmet.
Многострочное редактирование
Sublime Text предлагает многострочное редактирование, доступ к которому можно получить, удерживая Command на Mac (Ctrl в Windows) и используя мышь для выбора нескольких строк. После выбора нескольких строк вы можете редактировать все строки одновременно, и даже поддерживается многострочное копирование/вставка.
Поддержка разделенного окна
Sublime Text поддерживает разделение окон для одновременного просмотра и редактирования нескольких файлов. Это может быть полезно при обращении к другому файлу во время работы над проектом.
Поддержка систем сборки
Sublime Text поставляется с поддержкой систем сборки. Системы сборки позволяют запускать код непосредственно в терминале редактора Sublime Text без необходимости использования внешнего терминала.
Например, вы можете создать систему сборки для запуска программы Python и другую систему сборки для запуска программы Go. При разработке приложения вы можете выбрать систему сборки и использовать ярлык для запуска программы непосредственно из Sublime Text.
Больше возможностей настройки тем
Вы можете еще больше улучшить свои навыки кодирования, загрузив тему Sublime Text. Большинство из них уже поставляются в комплекте с различными цветовыми схемами.
Разница между темами и цветовыми схемами для Sublime Text заключается в том, что тема украшает основные элементы пользовательского интерфейса, такие как боковая панель, вкладки, меню и т. д., а цветовые схемы отвечают за подсветку синтаксиса.
Некоторые из лучших тем для проверки включают:
Обзор
Sublime Text — один из самых популярных редакторов кода на сегодняшний день. По праву, он предоставляет как писателям, так и разработчикам массу инструментов для использования.
Нет ничего более приятного, чем найти идеальный редактор кода. Если вы никогда не пробовали Sublime Text, стоит посмотреть.
Используете ли вы сейчас Sublime Text? Вы предпочитаете его другим редакторам кода? Дайте нам знать в разделе комментариев ниже.
Экономьте время, деньги и повышайте эффективность сайта с помощью:
- Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
- Интеграция с Cloudflare Enterprise.
- Глобальный охват аудитории благодаря 29 центрам обработки данных по всему миру.
- Оптимизация с помощью нашего встроенного мониторинга производительности приложений.
Все это и многое другое в одном плане без долгосрочных контрактов, помощи при миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам.
Отобранные статьи по теме
Блог
10 бесплатных HTML-редакторов на рынке для разработчиков WordPress и опытных пользователей
Хотите эффективно писать HTML и код? Вам нужен мощный редактор кода! Ознакомьтесь с этими бесплатными HTML-редакторами и выберите тот, который подходит для вашего кода…
Блог
13 лучших текстовых редакторов для ускорения рабочего процесса
Познакомьтесь с нашими любимыми текстовыми редакторами, многие из которых позволяют делать гораздо больше, чем просто писать код, и найдите лучший редактор для своего рабочего процесса.
Блог
Погружение в новейший редактор Gutenberg WordPress (2022 г.)
Узнайте все о последнем редакторе Gutenberg для WordPress, также известном как редактор блоков. Узнайте, почему его полное редактирование сайта — это будущее WordPress.
Обзор проекта, его содержание и начало работы с простым шаблоном.
Внимание! Эти документы относятся к версии 2.3.2, которая официально больше не поддерживается. Проверьте последнюю версию Bootstrap!
Перед загрузкой убедитесь, что у вас есть редактор кода (мы рекомендуем Sublime Text 2) и некоторые практические знания HTML и CSS. Мы не будем рассматривать здесь исходные файлы, но они доступны для скачивания. Мы сосредоточимся на начале работы с скомпилированными файлами Bootstrap.
Скачать скомпилированный
Самый быстрый способ начать работу: получить скомпилированные и минимизированные версии наших CSS, JS и изображений. Нет документов или исходных файлов.
Скачать исходный код
Получите исходные файлы для всех CSS и JavaScript, а также локальную копию документации, загрузив последнюю версию непосредственно с GitHub.
В загружаемом файле вы найдете следующую структуру файла и содержимое, логически сгруппированные общие ресурсы и предоставляющие как скомпилированные, так и минимизированные варианты.
После загрузки разархивируйте сжатую папку, чтобы увидеть структуру (скомпилированного) Bootstrap. Вы увидите что-то вроде этого:
Это самая простая форма Bootstrap: скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min.* ). Файлы изображений сжимаются с помощью ImageOptim, приложения Mac для сжатия файлов PNG.
Обратите внимание, что все подключаемые модули JavaScript требуют включения jQuery.
Bootstrap оснащен HTML, CSS и JS для самых разных целей, но их можно обобщить с помощью нескольких категорий, отображаемых в верхней части документации Bootstrap.
Разделы документов
Строительные леса
Глобальные стили для тела для сброса шрифта и фона, стилей ссылок, системы сетки и двух простых макетов.
Базовый CSS
Стили для общих элементов HTML, таких как типографика, код, таблицы, формы и кнопки. Также включает в себя Glyphicons, отличный небольшой набор значков.
Компоненты
Основные стили для общих компонентов интерфейса, таких как вкладки и кнопки, панель навигации, оповещения, заголовки страниц и т. д.
Подключаемые модули JavaScript
Как и компоненты, эти плагины JavaScript являются интерактивными компонентами для таких вещей, как всплывающие подсказки, всплывающие окна, модальные окна и многое другое.
Список компонентов
Вместе разделы "Компоненты" и "Плагины JavaScript" предоставляют следующие элементы интерфейса:
- Группы кнопок
- Раскрывающиеся списки кнопок
- Навигационные вкладки, панели и списки
- Панель навигации
- Ярлыки
- Значки
- Заголовки страниц и главный блок
- Миниатюры
- Оповещения
- Индикаторы выполнения
- Модали
- Раскрывающиеся списки
- Подсказки
- Поповеры
- Аккордеон
- Карусель
- Ввод текста
В будущих руководствах мы можем более подробно рассмотреть эти компоненты по отдельности. А пока поищите информацию о каждом из них в документации, чтобы узнать, как их использовать и настраивать.
После краткого введения в содержание мы можем сосредоточиться на использовании Bootstrap. Для этого мы будем использовать базовый HTML-шаблон, который включает в себя все, что мы упомянули в файловой структуре.
А теперь взглянем на типичный HTML-файл:
Чтобы сделать этот шаблон загрузочным, просто включите соответствующие файлы CSS и JS:
И готово! После добавления этих двух файлов вы можете приступить к разработке любого сайта или приложения с помощью Bootstrap.
Выходите за пределы базового шаблона с помощью нескольких примеров макетов. Мы призываем людей повторять эти примеры, а не просто использовать их в качестве конечного результата.
Стартовый шаблон
Самый простой HTML-документ со всеми включенными Bootstrap CSS и JavaScript.
Базовый маркетинговый сайт
Включает главный блок для основного сообщения и три вспомогательных элемента.
Гибкий макет
Использует нашу новую гибкую систему сеток для создания плавного плавного макета.
Узкий маркетинг
Тонкий и легкий маркетинговый шаблон для небольших проектов или команд.
Обоснованная навигация
Маркетинговая страница с навигационными ссылками одинаковой ширины в измененной панели навигации.
Войти
Базовая форма входа в систему с пользовательскими, более крупными элементами управления формы и гибким макетом.
Прилепленный нижний колонтитул
Прикрепите нижний колонтитул фиксированной высоты к нижней части области просмотра пользователя.
Джамботрон-карусель
Более интерактивная версия базового маркетингового сайта с заметной каруселью.
Ознакомьтесь с документацией, чтобы получить информацию, примеры и фрагменты кода, или сделайте следующий шаг и настройте Bootstrap для любого предстоящего проекта.
Читайте также: