Как в notepad создать блок
Каждый уважающий себя программист имеет в своем распоряжении множество инструментов для работы. С ними работа становится приятнее, а процесс разработки сокращается в несколько раз.
Возможно, в прошлом уроке, вам показалось, что весь код, который мы поместили в документ превратился в нечитаемую простыню, - это действительно так. Представьте, что в нашем коде будет не 10-15 строк, а, скажем, 1 000, - работать с таким кодом стало бы невозможно.
На прошлой лекции мы создали html -страницу. Давайте скопируем ее в новый каталог Learn 2 и откроем в профессиональном редакторе Notepad++ .
Согласитесь - другое дело!
Если у вас не такой вид текста, проведем небольшую настройку редактора:
Это сильно поможет нам в будущем.
В прошлом уроке я не акцентировал внимание на то, что в программировании каждый символ имеет значение и, соответственно, для чего-то нужен. В нашем случае, это символы / и > . Если они будут находиться не там, где нужно, либо будут отсутствовать там, где нужны, наш код работать не будет.
В таких случаях, как раз, помогает новый текстовый редактор.
Проверка орфографии
Список открытых файлов
Опции → Основные → Панель Списка документов и там нажмите галочку на Отображать :
Как открыть видимость папки AppData
Открываем папку Мой компьютер (проводник), в левом верхнем меню проводника нажимаем Вид.
Далее жмем на Параметры, откроется отдельное окошко, в котором нажимаем на Вид, в Дополнительных параметрах находим графу Скрытые файлы и папки, ставим метку напротив Показывать скрытые файлы, папки и диски, нажимаем Применить и ОК.
Заходим на диск C, пользователи, имя своего профиля (у меня путь: C:\Users\iron1) и видим отобразившуюся папку AppData, которая нам и нужна для дальнейшей настройки плагина Webedit.
Перейдем к делу
Проведем эксперимент, - удалим символ > из тега начала абзаца:
Нотпад моментально показывает нам подсказку ( фиолетовый цвет ): неправильный синтаксис . В нашем случае, это некорректное открытие абзаца.
Вернем абзац в прежнее состояние и посмотрим что еще умеет такой редактор.
Давайте уберем параметр center из абзаца.
Сюда же начнем писать ce . И редактор выдает нам возможные варианты этой комбинации, отталкиваясь от написанного кода:
Редактор будто знал какой нам нужен параметр. Жмем Enter .
Эти подсказки я больше не буду упоминать, так как вы сами будете их видеть постоянно.
Теги жирного шрифта: strong
Вид в редакторе:
Медиа файлы и ссылки вставить в текст статьи можно в визуальном редакторе административной панели сайта.
Некоторые функции в меню
Кодировки → Преобразовать в … — Перекодирование файла.
Кодировки → Кодировать в … — Открыть файл в другой кодировке.
Клик правой кнопки мыши → ПРОПИСНЫЕ — Поменять регистр букв на верхний.
Клик правой кнопки мыши → строчные — Поменять регистр букв на нижний.
Правка → Панель истории файлов — История буфера обмена (Clipboard History):
Клик правой кнопки мыши → Вкл./Выкл. Комментарий строки — Закомментировать код (раскомментировать аналогично).
Клик правой кнопки мыши → Закомментировать выделенное — Закомментировать код (раскомментировать автоматически нельзя).
Клик правой кнопки мыши → ПРОПИСНЫЕ — Поменять регистр букв на большие буквы.
Клик правой кнопки мыши → строчные — Поменять регистр букв на маленькие буквы.
Вид → Операции с документом → Переместить в другое окно — Разделить окно на две части.
Синтаксис → … — Выбор подсветки синтаксиса.
C:\Program Files (x86)\Notepad++ — в Windows 7 находятся все установленные плагины, настройки и так далее.
C:\Program Files (x86)\Notepad++\plugins — папка с плагинами.
%appdata%\Notepad++ — папка с еще файлами Notepad++.
Update 2018. Сейчас есть x64 версия Notepad++, но я до сих пор рекомендую ставить 32-битную версию, так как много плагинов работает только под 32 бита.
Сектор страницы
Сектор страницы ( придумал эту фразу в процессе написания статьи ) - это, например, шапка сайта, меню с левой стороны, подвал и все что только угодно, что может быть на странице.
Базовая возможность notepad++. Настраивается в том числе и через интерфейс самого npp.
Вообще, возможность гибкой настройки определенного пользователем языка в npp существует очень давно, но не все знают, что данная возможность относительно недавно перешла на качественно новый уровень под названием UDL 2.0
Основные возможности: формирование списка ключевых слов, определение синтаксиса блоков, сворачивание этих блоков, определение числовых форматов и, разумеется, настройка стилей оформления для всего этого по отдельности.
Примечание:
Не пробуйте вручную редактировать настройки UDL при запущенном npp, он затрёт все изменения при выходе из программы.
Автодополнение
Умная обработка вывода компилятора
Когда я только начинал реализацию окружения для разработки скриптов FOnline, для синтаксической проверки скриптов я долгое время пользовался обычным вызовом батника с передачей ему пути к скрипту. Однако, потом один из участников нашего сообщества выложил инструкцию по настройке EditPlus для работы с FOnline. Оказалось, что в данном редакторе возможность парсинга вывода компиляторов есть изначально. На тот момент я был уверен, что такие возможности бывают только в IDE и никто не будет возиться с данным функционалом для текстового редактора. Однако, если такой функционал есть в EditPlus, я всё же решил ещё раз пройтись по плагинам N++. К моему удивлению, решение для notepad++ нашлось: плагин NppExec.
Настройки довольно гибкие, не буду описывать процесс, там все довольно просто, просто покажу результат:
Примечание
Плагин не позволяет добавить кнопку для запуска компилятора на тулбар, однако с этой задачей отлично справляется плагин Custom toolbar.
Функция «Go to definition» и отображение списка сущностей
- на основе определенных пользователем регулярных выражений формирует список различных групп сущностей: функции, классы, переменные, да и вообще всё, что угодно
- отображение всего этого в списке
- переход к определению слова по Ctrl+click
- Ctrl+click в пределах одного файла
- группы сущностей чисто формальные и вообще задаются пользователем, таким образом, по крайней мере для UDL , не получится увидеть древовидную структуру классов, переменных и т. п.
- стоит заметить, что ещё не сильно разбирался с SourceCookifier и не могу гарантировать, что вышеперечисленное верно на 100%. Если кто-то заметит ошибки, буду рад информации
- если вам нужна функция «go to definition» для какого-либо более или менее известного языка, стоит посмотреть плагин TagsJump, там уже есть быстрые переходы между файлами
Карта документа
С недавних пор данный модный функционал имеется в n++ прямо из коробки.
Работает.
Быстрый переход к предыдущему положению курсора
Плагин Location Navigate.
Работает в пределах одного файла.
Кроме того, подсвечивает сохраненные и несохраненные изменения файла, произошедшие с момента запуска n++.
Примечание:
Стоит заметить, что основная функция данного плагина реализована в описанном выше плагине SourceCookifier.
Скобки, кавычки.
Расстановка парных кавычек и закрывающих скобок осуществляется плагином XBrackets Lite. Решение далеко не идеальное, но хоть какое-то.
Примечание:
В настройках голого n++ так же можно включить автоматическую подстановку парных символов, но там эта функция реализована совсем топорно и скорее будет раздражать.
Послесловие
На текущий момент это практически всё, что мне удалось выжать из старого доброго Notepad++.
Конечно, можно много жаловаться на то, что Notepad++ существует только под Windows, на то, что sublime во многом превосходит Notepad++. Можно советовать переходить на EditPlus или полноценные IDE (для которых, естественно, придётся своими силами реализовывать большую часть необходимого функционала). Можно вспомнить про Geany с его немалыми возможностями по расширению функционала. Но, исходя из личного опыта, для описанных выше задач notepad++ подходит лучше всего. Возможно, я ошибаюсь, могу даже предположить, что описанное выше уже реализуемо в Sublime без слишком больших затрат. Но, как и в случае с notepad++, весь этот функционал чаще всего разбросан по куче плагинов и по различным документациям. И, если это так, я с удовольствием почитал бы о них подробнее.
Спасибо за внимание, будьте здоровы.
Приветствую вас на Планете Успеха! Тема сегодняшней публикации — текстовый html редактор notepad++, его установка, настройка и использование.
Чем этот редактор интересен и для чего нужен вебмастерам ведущим свои блоги?
Самое главное предназначение notepad++ — это открытие, редактирование готовых и создание новых html файлов, которые необходимы для создания чистого кода сайтов.
Но сайты мы создавать не будем, нам этот редактор пригодится для красивого и читаемого оформления наших статей на блогах. Чтобы посетителям наших онлайн-ресурсов было визуально приятно читать наши публикации.
Как установить notepad++
Левой кнопкой мышки кликаем дважды на установочный файл программы.
В открывшемся окошке смотрим, чтобы язык был русский и жмем Ок.
В следующем окне приветствии нажимаем Далее.
Затем необходимо согласиться с условиями лицензионного соглашения и нажать Принимаю.
Далее необходимо выбрать папку для установки, по умолчанию это C:\Program Files (x86)\Notepad++, если вы хотите произвести установку в другое место на своём компьютере, то нажав на обзор, выбираете нужную вам папку.
Рекомендую по умолчанию. Нажимаем Далее.
В окошке выбора компонентов устанавливаемой программы, жмем Далее.
Далее ставим метку напротив Create Shortcut on Desktop (отображение иконки редактора notepad++ на рабочем столе компьютера), и нажимаем Установить.
После процесса установки, откроется окошко, в котором стоит метка напротив Запустить Notepad++, нажимаем Готово и наш уже установленный редактор откроется. Теперь приступим к его настройке.
Особые выделения
Одной из «киллер-фич» в Sublime Text 2 считается мультивыделение. Оказывается, что оно есть и в Notepad++. Переходите в настройки программы Опции → Настройки → Правка и ставьте галочку:
И теперь, если нажать клавишу Ctrl , то можно выделить сразу несколько текстовых блоков (множественное выделение). При этом, если не снимать выделение, то, когда начнете писать, то текст будет вводиться во всех выделенных местах:
А при зажатом Alt можно делать вертикальное выделение:
Автодополнение
Выше уже отмечалось, что клавиши CTRL + Space вызывают окно автодополнения. Но каждый раз мне нажимать на клавиши не удобно (привет любителям Vim). Было бы проще, чтобы подсказки возникали сами. Это делается так: Опции → Настройки → Автозавершение . Отметьте нужные вам галочки:
Update 2018. Сейчас данные настройки по умолчанию включены.
Синхронизация вертикальной прокрутки
Еще одна важная для меня функция. Когда имеется два файла одного типа часто требуется просмотреть их синхронно. В Notepad++ все реализовано:
Теги заголовков: h1; h2; h3; h4; h5; h6
В редакторе это будет выглядеть так:
А на блоге, после публикации вот так:
Работа с проектами
Если вы работаете с каким-то проектом (сайт, программа и так далее), то вы работаете обычно со множеством файлов в одной папке с подпапками.
Update 2018. Ниже описан способ, который позволит работать с несколькими папками в одном проекте, но с одной папкой сейчас проще всего работать через Файл → Открыть папку как Проект :
Лучше в этом случае работать с функцией проекта Вид → Проект (панель) → Панель проекта 1 :
Щелкаете правой кнопкой мыши по пункту рабочая область и выбираете пункт Добавить Новый проект и как-то его называете:
Теперь правая кнопка мыши по проекту и пункт меню Добавить файлы из директории :
Теперь у нас есть дерево наших файлов, в котором удобно ориентироваться и редактировать. Причем сюда занесены не только тестовые файлы, но и все остальные. Разумеется, проект можно сохранять, добавлять файлы по отдельности. В общем удобная вещь:
Выделение определенного текста
В Notepad++ можно выделить конкретный текст (как будто маркером провели):
Как настроить плагин Webedit для Notepad++
Открываем папку с установленным редактором Notepad++, открываем папку plugins, затем папку WebEdit (у меня путь: C:\Program Files (x86)\Notepad++\plugins\WebEdit), и правой кнопкой мыши нажимаем на папку Config, и нажимаем копировать.
Далее переходим в папку AppData, открываем папку Roaming, затем выбираем Notepad++, plugins (у меня путь: C:\Users\iron1\AppData\Roaming\Notepad++\plugins), и на пустое место внутри папки нажимаем правой кнопкой мыши и выбираем вставить.
Теперь открываем наш редактор, нажав на иконку на рабочем столе дважды левой кнопкой мыши, и видим в редакторе появившуюся панель с html тегами.
Наш html редактор notepad++ полностью настроен и готов к работе по оформлению текста для публикации статей на наших блогах. А вот теперь давайте посмотрим, как расставлять html теги в тексте одним кликом мышки.
Знаки табуляции
Рекомендую использовать вместо знака табуляции 4 или 2 пробела:
Статья обновлена 2018
- Notepad++
- Текстовой редактор
- FAQ
Один из моих любимых текстовых редакторов. В статье будут описаны всякие такие вещи, которые стоит запомнить при работе с ним. Сортировка чисел, клавиатурные сокращения и так далее.
Один из моих любимых текстовых редакторов. В статье будут описаны всякие такие вещи, которые стоит запомнить при работе с ним. Сортировка чисел, клавиатурные сокращения и так далее.
Установка плагинов
Идем Плагины → Plugin Manager → Show Plugin Manager :
И там выбираем нужный нам плагин.
Update 2018. Данный менеджер плагинов был выпилен из Notepad++. Поэтому его нужно устанавливать отдельно. Статью, где описана установка менеджера и остальные плагины, можно найти тут: Плагины Notepad++.
Как удалить каждую вторую строку в Notepad++
Теги списков: ul и ol
Маркированный список
Нумерованный список
Смотрим, как в редакторе:
А теперь посмотрим на блоге:
Сортировка выделенных строк
Update 2018. В Notepad++ сейчас есть встроенные методы всевозможной сортировки:
Теги цитат (высказываний): blockquote
Harrix
Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
Notepad++ поддерживает сворачивание текстовых блоков в документе. Это означает, что некоторые строки текста могут быть скрыты на основании определенных признаков. Это хорошо работает для структурированных языков, таких как C++ или XML. Блоки текста, родительские для других блоков, сворачиваются, оставляя видимой только первую строку - если они уже не внутри свёрнутого родительского блока. Это хорошо работает, если вы хотите быстро осмотреть документ, перемещаясь до соответствующей позиции. Разворачивание блоков показывает текст снова.
Вы можете понять, какой текст можно свернуть, глядя на поле слева, содержащее узлы сворачивания. Это поле показывает иконки и линии для обозначения структуры текста (внешний вид поля могут быть изменены, смотрите Определение стилей. и Настройки). Текущий лексер определяет структуру (смотрите Языки). По умолчанию поле сворачивания отображает квадратики и линии для обозначения структуры. Квадратик со знаком минус () указывает, что текст может быть свернут. И наоборот квадратик со знаком плюс () указывает, что текст может быть развёрнут. Свёрнутый текст дополнительно обозначается горизонтальной линией над первой строкой скрытого текста, которая будет всегда отображаться. Линии на поле сворачивания обозначают, что строки, вдоль которых они находятся могут быть свёрнутыми. Вертикальные линии () обозначают, какие строки могут быть свёрнуты вместе как группа, в конце которой маленькая горизонтальная линия () или квадратик.
Рисунки узлов сворачивания, представленные выше нарисованы со стилем по умолчанию . Кроме того вы можете скрыть поле сворачивания полностью, даже когда язык документа позволяет сворачивание.
Есть много способов свернуть текст.
- Первым способом является клик левой кнопкой мыши на квадратике со знаком минус (). Это свернёт блок текста целиком.
- Та же процедура, но с удерживанием клавиши Ctrl сворачивает в том числе и вложенные блоки текста внутри сворачиваемой. Фактически если вы теперь развернёте блок текста, то все вложенные блоки останутся свёрнутыми.
- Использование меню:
Вид→Все блоки - Свернуть будет сворачивать каждый блок в документе, приводя к минимальному количеству отображаемого текста. Вид→Текущий блок - Свернуть приведёт к сворачиванию только одного текущего блока текста (того блока, в котором находится текстовый курсор). Это не будет сворачивать вложенные блоки. Вид→Свернуть уровень приведёт к сворачиванию блоков только указанного уровня вложения во всём документе (выбор в диапазоне от 1 до 8). Это свернёт все блоки указанного уровня, но не будет сворачивать их вложенные блоки. Это можно использовать для просмотра текста с определенным уровнем подробностей.
- Клик на квадратике со знаком плюс ().
- Клик на квадратике со знаком плюс, удерживая нажатой клавишу Shift или Ctrl . Это развернёт весь блок, включая вложенные свёрнутые блоки.
- Использование меню:
Вид→Все блоки - Развернуть будет разворачивать каждый блок в документе, приводя к максимальному количеству отображаемого текста. Вид→Текущий блок - Развернуть приведёт к разворачиванию только одного текущего блока текста (того блока, в котором находится текстовый курсор). Это не будет разворачивать вложенные блоки. Вид→Развернуть уровень приведёт к разворачиванию блоков только указанного уровня вложения во всём документе, включая все родительские блоки.
Сворачиваемый блок, в котором находится курсор подсвечивается в поле маркеров сворачивания. Вы можете изменить цвет подсвечивания используя Определение стилей. →Global styles→Fold active.
В заключении, напомним, что сессии запоминают состояния свёрнутости блоков. Таким образом, можно закончить работу имея свёрнутые блоки в документе и открыть его в том же состоянии снова.
Миникарта
Одной из главной «киллер-фич» в Sublime Text 2 считается миникарта справа, которую можно использовать как бегунок. Оказывается, что оно есть и в Notepad++.
Идите Вид → Карта документа :
Правда она не такая удобная, как в Sublime.
Логика кода
Так же писать код ( программировать ) очень удобно логическими разделами. Каждый логический раздел должен начинаться с новой строки. Для визуального восприятия кода вставляют пустую строку, но, желательно, не более одной.
В принципе, писать код можно в одну строку. Да, все, что мы написали в прошлом уроке можно поставить в одну строку. Попробуйте сделать это, - сможете ли вы прочитать свой код? Посмотрите на наш готовый код - каждый раздел страницы на отдельной строке.
С блоков в коде прыгнем на секторы страницы.
Html теги для текста в один клик
Мы рассмотрели ручную вставку тегов html в текст (ручная верстка статьи), но в редакторе notepad++ можно проставлять теги в один клик.
Для этого необходимо установить плагин для нашего редактора и настроить.
Настройка notepad++
В открывшейся программе, нажав на крестик, закрываем стандартную вкладку редактора с описанием установленной версии.
В верхнем меню редактора нажимаем Вид и выбираем Перенос строк.
Далее нажимаем Синтаксисы, выбираем H и жмем на HTML.
Теперь нажимаем Опции и выбираем Настройки.
В открывшемся меню настроек выбираем Новый документ:
-
в разделе ”Формат конца строк” ставим метку напротив windows (CR LF)
Наш html редактор notepad++ настроен и готов к использованию. Теперь поговорим об html тегах, которые необходимы нам для форматирования наших текстов для блога.
Основные Html теги для текста
Все существующие html теги, необходимые для оформления текста, мы в этой статье разбирать не будем (в будущих публикациях обязательно будем изучать), сейчас же рассмотрим основные, которые чаще всего используются при оформлении статей.
Как удалить пустые строки в Notepad++ с помощью горячих клавиш
Как скачать бесплатно notepad++
Заходим на официальный сайт notepad++, в левой колонке сайта нажимаем Downloads.
Жмем на последнюю версию редактора.
На открывшейся странице сайта выбираем Download 32-bit x86 и нажимаем левой кнопкой мыши.
Важно: какой бы разрядности не был ваш компьютер или ноутбук, выбираем только 32-bit x86!
После окончания загрузки файла, открываем папку, в которую загрузился наш редактор и приступаем к установке.
Плагин Webedit
На официальном сайте выбираем последнюю версию плагина.
В следующем окошке нажимаем на архив для загрузки на компьютер.
Начнется процесс загрузки, ждем завершения. Далее открываем папку загрузок.
Чтобы распаковать файлы из архива, нажимаем правой кнопкой мышки на сам архив и выбираем извлечь в папку Webedit.v.2.1
Архив плагина, распакован в папку Webedit.v.2.1
Переименовываем ее в Webedit, нажав правой кнопкой мышки и выбрав переименовать.
Далее копируем переименованную папку, нажимаем правой кнопкой мыши и выбираем копировать.
Теперь заходим в папку, в которую установлен сам редактор, по умолчанию она находится по такому пути: C:\Program Files (x86) и открываем папку Notepad++.
В открывшейся папке выбираем plugins.
В этой папке, правой кнопкой мыши нажимаем на пустое место и выбираем вставить.
В появившемся окошке нажимаем продолжить.
В папку plugins скопируется созданная и скопированная нами папка извлеченного архива Webedit
Для дальнейшей настройки плагина Webedit, необходимо войти в специальную папку AppData, в которой хранится разная информация о программах.
Создается эта папка для каждого пользователя профиля Windows отдельно. Изначально эта папка скрыта и ее можно увидеть только после проведения определенных действий.
Горячие клавиши
Ctrl + S — Сохранить файл.
CTRL + D — Дублирование выделенного кода.
Ctrl + F2 — Ставим отметку у строки.
F2 — Переход к следующей отмеченной строке.
Shift + F2 — Переход к предыдущей отмеченной строке.
Ctrl + J — Объединение выделенных строк в одну.
Ctrl + B — Перейти к соответствующей скобке (закрывающейся или открывающейся).
CTRL + Space — Автодополнение кода:
Теги параграф (абзац): p
В редакторе будет отображаться так:
На блоге вот так:
Html теги в один клик
Итак, вы написали статью в любом удобном для вас текстовом редакторе и вам необходимо расставить html теги. Конечно, вы их можете вручную расставить сразу там, где и печатали статью, а можете напечатать ее сразу в редакторе Notepad++ и там вручную расставлять теги.
Кто-то сразу пишет статьи в визуальном редакторе административной панели сайта, соответственно используя его варианты оформления текста (только визуальный редактор может лишних тегов наставить, которые и не нужны вовсе).
В общем, каждый делает так, как ему удобнее и проще. Я пишу статьи в Google документах и сохраняю тексты без тегов на Google диске. Далее я копирую текст и вставляю в редактор Notepad++.
После того, как вставил текст в редактор, теги прописываю уже не вручную, а одним кликом мыши. Выделяю необходимую часть текста и мышкой кликаю на соответствующий тег в панели быстрого доступа и выделенный текст заключается в html теги.
По завершении форматирования всей статьи таким образом, копирую ее и вставляю в редактор административной панели сайта, там вставляю медиа файлы и ссылки, если необходимо, и публикую.
Итак, в этой статье вы узнали о текстовом html редакторе Notepad++, как его скачать, установить и настроить.
Узнали об основных html тегах и как с помощью установленного и настроенного плагина Webedit для Notepad++, расставить теги в тексте в один клик.
Пользоваться этим редактором для оформления ваших публикаций или нет — решать вам.
Один из моих любимых текстовых редакторов. В статье будут описаны всякие такие вещи, которые стоит запомнить при работе с ним. Сортировка чисел, клавиатурные сокращения и так далее.
Как удалить повторяющиеся строки
Перейдем к делу
Проведем эксперимент, - удалим символ > из тега начала абзаца:
Нотпад моментально показывает нам подсказку ( фиолетовый цвет ): неправильный синтаксис . В нашем случае, это некорректное открытие абзаца.
Вернем абзац в прежнее состояние и посмотрим что еще умеет такой редактор.
Давайте уберем параметр center из абзаца.
Сюда же начнем писать ce . И редактор выдает нам возможные варианты этой комбинации, отталкиваясь от написанного кода:
Редактор будто знал какой нам нужен параметр. Жмем Enter .
Эти подсказки я больше не буду упоминать, так как вы сами будете их видеть постоянно.
Читайте также: