HTML-сниппеты для ЖЖ
Создавать посты в ЖЖ можно десятками способов с разных устройств, об этом есть статья « Вопрос № 222. Как написать в свой журнал?» в справке ЖЖ. Здесь же речь пойдет о написании и публикации постов с настольного компьютера.
С настольного компьютера можно публиковать посты в ЖЖ и со сторонних клиентов, но лично я через обычный браузер пользуюсь редактором постов, предоставляемым ЖЖ.
Тут еще нужно уточнить, что на данный момент ЖЖ предоставляет два редактора постов: так называемый «актуальный (новый) редактор» (появился в 2017 году) и так называемый «старый редактор».
Я пользуюсь «старым редактором». В старом редакторе есть две вкладки: «визуальный редактор» и «HTML». Я пользуюсь вкладкой «HTML». На вкладке «HTML» есть галка «Отключить автоформат», она у меня снята ( тут подробнее про эту настройку). Ну то есть я автоформат не отключаю. Это значит, что ЖЖ автоматически добавит HTML-элемент
после каждого символа создания новой строки и преобразует адреса URL в активные гиперссылки с помощью HTML-элемента .
В программировании при написании кода есть такое понятие, как «сниппеты». Это небольшие фрагменты кода, которые программист часто использует. Из-за того, что программист постоянно использует эти фрагменты, создатели редакторов кода решили облегчить ему работу и придумали функцию работы со сниппетами, с помощью которой сниппеты можно записывать в библиотеку сниппетов, а при необходимости мгновенно вызывать их из этой библиотеки и вставлять в код.
В этом посте я хочу создать что-то вроде такой библиотеки HTML-сниппетов, которые я использую при написании постов (надоело постоянно вспоминать, как я делал то же самое в прошлых постах, рыть в поисках предыдущие посты и тому подобное). Пока что список небольшой, но я буду его пополнять.
Встроенные в ЖЖ HTML-сниппеты
Не стоит забывать, что в старом редакторе ЖЖ есть встроенные HTML-сниппеты (на иллюстрациях ниже они обведены красным маркером):
С помощью этих встроенных HTML-сниппетов текст можно сделать (кнопки на иллюстрациях слева направо) жирным, курсивом, подчеркнутым, зачеркнутым, отрегулировать размер шрифта, указать цвет шрифта, добавить гиперссылку, добавить ссылку на пользователя (сообщество) ЖЖ, добавить картинку, добавить медиа (видео, аудио и так далее), добавить кат, добавить спойлер, добавить ссылку на карту, добавить кнопки для лайков, добавить опрос.
Во вкладке «визуальный редактор» дополнительно можно вставить нумерованный список, ненумерованный список, выровнять текст по левому краю, по центру и по правому краю.
Пояснение по стилям на языке CSS в HTML-сниппетах
Вообще, при создании веб-сайтов такое использование стилей на языке CSS, как в HTML-сниппетах ниже, не приветствуется. Стили обычно выносятся в заголовочную часть HTML-страницы или вообще в отдельный файл, чтобы избежать дублирования стилей. Прописывание стиля прямо в конкретном HTML-элементе HTML-страницы используется редко, в исключительных случаях. Но «Живой Журнал» - это не отдельный веб-сайт, а, скорее, система управления контентом. Когда вы создаете свой веб-сайт в классическом понимании, вам доступно гораздо больше возможностей по управлению HTML-страницами, чем в системе управления контентом «Живой Журнал». В ЖЖ в большинстве случаев у пользователя (особенно у пользователя с бесплатным аккаунтом) нет доступа к заголовочной части HTML-страницы или возможности разместить файлы на языке CSS.
Хотя кое-какие возможности в ЖЖ есть, но я в них не до конца разобрался. Если начнете копать в этом направлении, то в первую очередь вам попадется упоминание параметра «Custom CSS» (по-русски «Свой CSS»). Однако, этот параметр доступен не для всех стилей журнала. Например, я использую стиль «Air» (умолчательный стиль для ЖЖ) и в нем этот параметр недоступен. Настройка стиля журнала производится по следующему адресу:
https://www.livejournal.com/customize/options.bml
Если копать дальше, то вот полезные ссылки по этой теме (я в них еще не разбирался):
Расширенные возможности оформления (уголок разработчика)
https://www.livejournal.com/customize/advanced/
Вопрос № 176. Какие виды слоёв в системе стилей S2?
https://www.livejournal.com/support/faq/176.html
Вопрос № 177. Как мне создать новый стиль S2?
https://www.livejournal.com/support/faq/177.html
Так что в итоге при написании постов в ЖЖ мне легче прописать стили на языке CSS в каждом HTML-элементе на странице. Важно учесть следующее. В ЖЖ возможности вставки HTML-тегов урезаны в комментариях по сравнению с возможностями вставки HTML-тегов в посты. Так что многие из приведенных ниже сниппетов могут не работать (или работать частично) при вставке их в комментарии.
Мои HTML-сниппеты
Блочные
Оформление прямоугольного блока с кодом программы:
/* код программы */
Текстовая цитата (не код программы, а обычный параграф текста, вот пример):
параграф текста
Спрятать часть записи под ссылкой («кат», тут подробнее):
скрываемый текст
Спойлером [Spoiler (click to open)] не пользуюсь, так как после открытия этого «спойлера» на странице его нельзя свернуть обратно, ссылка для свертывания пропадает, в отличие от «ката».
Строчные
Цитирование кода программы в строке:
код программы
Выделение текста измененным цветом фона и отступами в строке:
текст
Заголовки разделов (или просто текст) курсивом и с бледным подчеркиванием:
Заголовок
Коды символов в Юникоде (7):
# - символ решётки #, для экранирования ненужных хештегов;
& или & - символ амперсанда & для его экранирования в HTML-мнемониках;
/ - символ косой черты /, он же «слэш» - для экранирования активности гиперссылок;
< или < - символ «меньше чем» < - для экранирования HTML-тегов;
> или > - символ «больше чем» > - для экранирования HTML-тегов;
- символ горизонтальной табуляции (отображается браузером только в содержимом HTML-элемента pre, поэтому не имеет смысла использовать этот символ вне этого HTML-элемента). Пример:
Две строки с символом горизонтальной табуляции:
Тут: этот символ внутри строки.
этот символ в начале строки (первый в строке).
Видно, что слово «этот» во второй и третьей строке начинаются с одной и той же позиции, если считать слева. Так работает горизонтальная табуляция. Обычно браузеры отображают горизонтальную табуляцию шириной в 8 символов, это можно проверить в примере выше.
́ - символ знака ударения. Этот символ можно прописать в тексте поста (в «старом редакторе», во вкладке «HTML») после гласной буквы, на которую требуется указать ударение. Это отдельный символ, но браузер объединит гласную букву и символ ударения в одну позицию. Например, в «старом редакторе», во вкладке «HTML», пишем:
бо́льшую или большу́ю
получаем в посте: «бо́льшую или большу́ю». Есть другой способ ввода знака ударения, который подходит для любого редактора, работающего с Юникодом (см. ниже, в разделе Alt-кодов).
Коды символов в Юникоде для математиков (2):
× или × - знак умножения ×;
− или − - знак минуса − (отличается от среднего тире U+2013 и знака дефиса-минуса U+002D).
Запрет переносов в тексте (3):
или - неразрывный пробел;
‑ - неразрывный дефис;
текст
Эмодзи в Юникоде (3):
😂🤣 - 😂🤣 - очень смешно (по-доброму);
😡 - 😡 - возмущен, взбешен, раздражен;
🎉 - 🎉 - хлопушка (поздравление).
Alt-коды (7):
Alt+0151 - обычное тире (оно же «длинное тире»), выглядит так: -;
Alt+0150 - среднее тире, выглядит так: - (короче обычного тире, но длиннее дефиса);
Alt+0171 - открывающая (левая) кавычка-«ёлочка», выглядит так: «;
Alt+0187 - закрывающая (правая) кавычка-«ёлочка», выглядит так: »;
Alt+0132 - открывающая (левая) кавычка-«лапка», выглядит так: „;
Alt+0147 - закрывающая (правая) кавычка-«лапка», выглядит так: “;
Два вида кавычек нужны, когда используются вложенные кавычки. На верхнем уровне используются кавычки-«ёлочки», внутри - кавычки-«лапки». Например: «Мне нравится роман „Оно“ Стивена Кинга», - сказал Илья.
Alt+0769 - знак ударения. Этот Alt-код не срабатывает в редакторе ЖЖ и вообще в браузере, но работает, например, в редакторе «WordPad», который есть по умолчанию в операционных системах «Windows». В принципе, в русском языке всего десять гласных букв, на которые можно ставить ударение, я их пропишу тут. Можно копировать прямо отсюда: А́а́, Е́е́, И́и́, О́о́, У́у́, Ы́ы́, Э́э́, Ю́ю́, Я́я́. Над буквой «ё» тоже можно поставить знак ударения: Ё́ё́, но это не имеет смысла (не нужно так делать), так как на эту букву ударение падает всегда.
С настольного компьютера можно публиковать посты в ЖЖ и со сторонних клиентов, но лично я через обычный браузер пользуюсь редактором постов, предоставляемым ЖЖ.
Тут еще нужно уточнить, что на данный момент ЖЖ предоставляет два редактора постов: так называемый «актуальный (новый) редактор» (появился в 2017 году) и так называемый «старый редактор».
Я пользуюсь «старым редактором». В старом редакторе есть две вкладки: «визуальный редактор» и «HTML». Я пользуюсь вкладкой «HTML». На вкладке «HTML» есть галка «Отключить автоформат», она у меня снята ( тут подробнее про эту настройку). Ну то есть я автоформат не отключаю. Это значит, что ЖЖ автоматически добавит HTML-элемент
после каждого символа создания новой строки и преобразует адреса URL в активные гиперссылки с помощью HTML-элемента .
В программировании при написании кода есть такое понятие, как «сниппеты». Это небольшие фрагменты кода, которые программист часто использует. Из-за того, что программист постоянно использует эти фрагменты, создатели редакторов кода решили облегчить ему работу и придумали функцию работы со сниппетами, с помощью которой сниппеты можно записывать в библиотеку сниппетов, а при необходимости мгновенно вызывать их из этой библиотеки и вставлять в код.
В этом посте я хочу создать что-то вроде такой библиотеки HTML-сниппетов, которые я использую при написании постов (надоело постоянно вспоминать, как я делал то же самое в прошлых постах, рыть в поисках предыдущие посты и тому подобное). Пока что список небольшой, но я буду его пополнять.
Встроенные в ЖЖ HTML-сниппеты
Не стоит забывать, что в старом редакторе ЖЖ есть встроенные HTML-сниппеты (на иллюстрациях ниже они обведены красным маркером):
С помощью этих встроенных HTML-сниппетов текст можно сделать (кнопки на иллюстрациях слева направо) жирным, курсивом, подчеркнутым, зачеркнутым, отрегулировать размер шрифта, указать цвет шрифта, добавить гиперссылку, добавить ссылку на пользователя (сообщество) ЖЖ, добавить картинку, добавить медиа (видео, аудио и так далее), добавить кат, добавить спойлер, добавить ссылку на карту, добавить кнопки для лайков, добавить опрос.
Во вкладке «визуальный редактор» дополнительно можно вставить нумерованный список, ненумерованный список, выровнять текст по левому краю, по центру и по правому краю.
Пояснение по стилям на языке CSS в HTML-сниппетах
Вообще, при создании веб-сайтов такое использование стилей на языке CSS, как в HTML-сниппетах ниже, не приветствуется. Стили обычно выносятся в заголовочную часть HTML-страницы или вообще в отдельный файл, чтобы избежать дублирования стилей. Прописывание стиля прямо в конкретном HTML-элементе HTML-страницы используется редко, в исключительных случаях. Но «Живой Журнал» - это не отдельный веб-сайт, а, скорее, система управления контентом. Когда вы создаете свой веб-сайт в классическом понимании, вам доступно гораздо больше возможностей по управлению HTML-страницами, чем в системе управления контентом «Живой Журнал». В ЖЖ в большинстве случаев у пользователя (особенно у пользователя с бесплатным аккаунтом) нет доступа к заголовочной части HTML-страницы или возможности разместить файлы на языке CSS.
Хотя кое-какие возможности в ЖЖ есть, но я в них не до конца разобрался. Если начнете копать в этом направлении, то в первую очередь вам попадется упоминание параметра «Custom CSS» (по-русски «Свой CSS»). Однако, этот параметр доступен не для всех стилей журнала. Например, я использую стиль «Air» (умолчательный стиль для ЖЖ) и в нем этот параметр недоступен. Настройка стиля журнала производится по следующему адресу:
https://www.livejournal.com/customize/options.bml
Если копать дальше, то вот полезные ссылки по этой теме (я в них еще не разбирался):
Расширенные возможности оформления (уголок разработчика)
https://www.livejournal.com/customize/advanced/
Вопрос № 176. Какие виды слоёв в системе стилей S2?
https://www.livejournal.com/support/faq/176.html
Вопрос № 177. Как мне создать новый стиль S2?
https://www.livejournal.com/support/faq/177.html
Так что в итоге при написании постов в ЖЖ мне легче прописать стили на языке CSS в каждом HTML-элементе на странице. Важно учесть следующее. В ЖЖ возможности вставки HTML-тегов урезаны в комментариях по сравнению с возможностями вставки HTML-тегов в посты. Так что многие из приведенных ниже сниппетов могут не работать (или работать частично) при вставке их в комментарии.
Мои HTML-сниппеты
Блочные
Оформление прямоугольного блока с кодом программы:
/* код программы */
Текстовая цитата (не код программы, а обычный параграф текста, вот пример):
параграф текста
Спрятать часть записи под ссылкой («кат», тут подробнее):
скрываемый текст
Спойлером [Spoiler (click to open)] не пользуюсь, так как после открытия этого «спойлера» на странице его нельзя свернуть обратно, ссылка для свертывания пропадает, в отличие от «ката».
Строчные
Цитирование кода программы в строке:
код программы
Выделение текста измененным цветом фона и отступами в строке:
текст
Заголовки разделов (или просто текст) курсивом и с бледным подчеркиванием:
Заголовок
Коды символов в Юникоде (7):
# - символ решётки #, для экранирования ненужных хештегов;
& или & - символ амперсанда & для его экранирования в HTML-мнемониках;
/ - символ косой черты /, он же «слэш» - для экранирования активности гиперссылок;
< или < - символ «меньше чем» < - для экранирования HTML-тегов;
> или > - символ «больше чем» > - для экранирования HTML-тегов;
- символ горизонтальной табуляции (отображается браузером только в содержимом HTML-элемента pre, поэтому не имеет смысла использовать этот символ вне этого HTML-элемента). Пример:
Две строки с символом горизонтальной табуляции:
Тут: этот символ внутри строки.
этот символ в начале строки (первый в строке).
Видно, что слово «этот» во второй и третьей строке начинаются с одной и той же позиции, если считать слева. Так работает горизонтальная табуляция. Обычно браузеры отображают горизонтальную табуляцию шириной в 8 символов, это можно проверить в примере выше.
́ - символ знака ударения. Этот символ можно прописать в тексте поста (в «старом редакторе», во вкладке «HTML») после гласной буквы, на которую требуется указать ударение. Это отдельный символ, но браузер объединит гласную букву и символ ударения в одну позицию. Например, в «старом редакторе», во вкладке «HTML», пишем:
бо́льшую или большу́ю
получаем в посте: «бо́льшую или большу́ю». Есть другой способ ввода знака ударения, который подходит для любого редактора, работающего с Юникодом (см. ниже, в разделе Alt-кодов).
Коды символов в Юникоде для математиков (2):
× или × - знак умножения ×;
− или − - знак минуса − (отличается от среднего тире U+2013 и знака дефиса-минуса U+002D).
Запрет переносов в тексте (3):
или - неразрывный пробел;
‑ - неразрывный дефис;
текст
Эмодзи в Юникоде (3):
😂🤣 - 😂🤣 - очень смешно (по-доброму);
😡 - 😡 - возмущен, взбешен, раздражен;
🎉 - 🎉 - хлопушка (поздравление).
Alt-коды (7):
Alt+0151 - обычное тире (оно же «длинное тире»), выглядит так: -;
Alt+0150 - среднее тире, выглядит так: - (короче обычного тире, но длиннее дефиса);
Alt+0171 - открывающая (левая) кавычка-«ёлочка», выглядит так: «;
Alt+0187 - закрывающая (правая) кавычка-«ёлочка», выглядит так: »;
Alt+0132 - открывающая (левая) кавычка-«лапка», выглядит так: „;
Alt+0147 - закрывающая (правая) кавычка-«лапка», выглядит так: “;
Два вида кавычек нужны, когда используются вложенные кавычки. На верхнем уровне используются кавычки-«ёлочки», внутри - кавычки-«лапки». Например: «Мне нравится роман „Оно“ Стивена Кинга», - сказал Илья.
Alt+0769 - знак ударения. Этот Alt-код не срабатывает в редакторе ЖЖ и вообще в браузере, но работает, например, в редакторе «WordPad», который есть по умолчанию в операционных системах «Windows». В принципе, в русском языке всего десять гласных букв, на которые можно ставить ударение, я их пропишу тут. Можно копировать прямо отсюда: А́а́, Е́е́, И́и́, О́о́, У́у́, Ы́ы́, Э́э́, Ю́ю́, Я́я́. Над буквой «ё» тоже можно поставить знак ударения: Ё́ё́, но это не имеет смысла (не нужно так делать), так как на эту букву ударение падает всегда.