- Стилизация текста в telegram. Разметка markdown и html
- Styled text with message entities
- Entity length
- Unicode codepoints and encoding
- UTF-8
- UTF-16
- Computing entity length
- Allowed entities
- Html теги для телеграм
- Какие теги поддерживает telegram?
- Быстрый выбор нужного тэга и как это выглядит в телеграм?
- Особенности html в tg
- Markdown (v1 и v2) в телеграм
- Стилизация текста в telegram. Разметка markdown и html
- Markdown в телеграм
- Как там HTML?
- Горячие клавиши
Стилизация текста в telegram. Разметка markdown и html
Небольшой обзор того, как работает разметка в telegram, как в нем стилизовать текст при помощи markdown и html.
Сразу оговорюсь: в интернете множество статей про то, как делать отложенные посты, добавлять к ним кнопки и оформлять их с помощью @controllerbot и аналогов. Эта статья совсем о другом.
Разметку с помощью контекстного меню рассматривать тоже не буду. О ней вы скорее всего все знаете и пользуетесь постоянно. На всякий случай оставлю скриншот как пример:
В конце статьи также приведен список горячих клавиш.
Почти все тоже самое можно сделать быстрее с помощью специальных символов. Если вы такой же заядлый текстер, как я, или просто любите быстро печатать, то вам будет интересно.
Markdown довольно обширный язык и в телеграм представлена лишь малая часть его возможностей. На самом деле, с его помощью вы можете писать целые статьи. Ознакомиться с синтаксисом можно по ссылке
Итак, заходим на официальный сайт телеграм, идем в стилизацию текста и видим поддерживаемую разметку:
Однако, если просто вставить всю указанную markdown разметку в телеграм, то мы получим следующее:
Не работает курсивное начертание. Вероятно, в telegram давно не обновляли эту страницу и некоторые правила поменялись, а некоторые добавились. В стандартной разметке markdown действительно для курсива используется одна «звездочка», однако, в телеграм работает двойное подчеркивание. А с помощью || можно сделать скрытый текст, который появился относительно недавно. И вот мы получаем полный список полноценно работающих «команд»:
Но что со ссылками? Ссылки в разметке markdown выглядят вот так:
Однако, по умолчанию они не работают (только в telegram x для android)
На официальном сайте указан инлайн-бот @bold — с помощью него можно вдохнуть жизнь в ссылку, однако, при этом, бот оставит свой след на нашем сообщении:
Можно использовать его и для оформления текста, чтобы потом скопировать и отправить куда нам нужно уже без подписи бота.
В этом боте работает свой вариант markdown:
Все-таки для ссылки я бы использовал контекстное меню или горячие клавиши — это гораздо удобнее.
В целом, html-разметка тоже работает, но уже с другим инлайн-ботом. Нужно всего лишь написать:
И далее нужный нам текст с поддерживаемыми html-тегами. Вот их полный список:
Этот бот работает с markdown, точно также как @bold, нужно лишь добавить «md»:
Кому-то выделить текст и нажать сочетание клавиш будет гораздо проще и удобнее. Для таких людей я и припас этот списочек:
ctrl + U = Подчеркнутый
ctrl + shift + X = Перечеркнутый
ctrl + shift + M = Моноширинный (код)
ctrl + shift + N = Очистить стили
com + shift + U = Подчеркнутый
com + shift + X = Перечеркнутый
com + shift + K = Моноширинный (код)
com + shift + P = Скрытый текст
Styled text with message entities
Telegram supports styled text using message entities.
A client that wants to send styled messages would simply have to integrate a Markdown/HTML parser, and generate an array of message entities by iterating through the parsed tags.
Nested entities are supported.
Entity length
Special care must be taken to consider the length of strings when generating message entities as the number of UTF-16 code units, even if the message itself must be encoded using UTF-8.
Unicode codepoints and encoding
A Unicode code point is a number ranging from 0x0 to 0x10FFFF , usually represented using U+0000 to U+10FFFF syntax.
Unicode defines a codespace of 1,112,064 assignable code points within the U+0000 to U+10FFFF range.
Each of the assignable codepoints, once assigned by the Unicode consortium, maps to a specific character, emoji or control symbol.
The Unicode codespace is further subdivided into 17 planes:
- Plane 1: U+0000 to U+FFFF : Basic Multilingual Plane (BMP)
- Planes 2-17: U+00000 to U+10FFFF : Multiple supplementary planes as specified by the Unicode standard
Since storing a 21-bit number for each letter would result in a waste of space, the Unicode consortium defines multiple encodings that allow storing a code point into a smaller code unit:
UTF-8
UTF-8 » is a Unicode encoding that allows storing a 21-bit Unicode code point into code units as small as 8 bits.
UTF-8 is used by the MTProto and Bot API when transmitting and receiving fields of type string.
UTF-16
UTF-16 » is a Unicode encoding that allows storing a 21-bit Unicode code point into one or two 16-bit code units.
UTF-16 is used when computing the length and offsets of entities in the MTProto and bot APIs, by counting the number of UTF-16 code units (not code points).
Computing entity length
- Code points in the BMP ( U+0000 to U+FFFF ) count as 1, because they are encoded into a single UTF-16 code unit
- Code points in all other planes count as 2, because they are encoded into two UTF-16 code units (also called surrogate pairs)
A simple, but not very efficient way of computing the entity length is converting the text to UTF-16, and then taking the byte length divided by 2 (=number of UTF-16 code units).
However, since UTF-8 encodes codepoints in non-BMP planes as a 32-bit code unit starting with 0b11110 , a more efficient way to compute the entity length without converting the message to UTF-16 is the following:
- If the byte marks the beginning of a 32-bit UTF-8 code unit (all bytes starting with 0b11110 ) increment the count by 2, otherwise
- If the byte marks the beginning of a UTF-8 code unit (all bytes not starting with 0b10 ) increment the count by 1.
length := 0 for byte in text < if (byte & 0xc0) != 0x80 < length += (byte >= 0xf0 ? 2 : 1) > >
Note: the length of an entity must not include the length of trailing newlines or whitespaces, rtrim entities before computing their length: however, the next offset must include the length of newlines or whitespaces that precede it.
Allowed entities
For example the following HTML/Markdown aliases for message entities can be used:
- messageEntityBold =>bold , bold , **bold**
- messageEntityItalic =>italic , italic *italic*
- messageEntityCode =>
code
, `code` - messageEntityStrike =>
strike,strike,strike, ~~strike~~ - messageEntityUnderline =>underline
- messageEntityPre =>
code
,
The following entities can also be used to mention users:
A number of other entities are also available, see the type page for the full list ».
Html теги для телеграм
Какие теги поддерживает telegram?
HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать телеграму понять, как нужно отображать текст.
Тегов html очень много, но телеграм поддерживает не все!
Пройдем по каждому из них: (Пробелы при использовании не нужны, мы их добавили для наглядности)
1)Жирный: <b> Жирный</b>или <strong>Жирный</strong>
2)Наклонный: <i>Наклонный</i> или <em>Наклонный</em>
3)Подчеркнутый: <u>Подчеркнутый</u> или <ins>Подчеркнутый</ins> 4)Зачеркнутый: <s>Зачеркнутый</s> или <strike>Зачеркнутый</strike> или <del>Зачеркнутый</del>
Теги также можно комбинировать (Вкладывать один в другой):
bold italic bold italic bold strikethrough underline italic bold bold
<b> bold <i> italic bold <s> italic bold strikethrough </s> <u> underline italic bold </u> </i> bold </b>
5) Ссылки : <a href=»https://bot-t.ru/»> inline URL</a>
6) Ссылки на пользователя (Внутренняя система ссылок в тг) : <a href=»tg://user?id=123456789″> inline mention of a user </a>
7) Код: <code> inline fixed-width code <code>
8) блок предварительно форматированного текста(pre): <pre> pre-formatted fixed-width code block </pre>
pre и code можно комбминировать:
9) спойлер — Функция возможно будет скрыта в меню стилей, которое можно развернуть длительным нажатием при вводе текста. Если пользователь выделит текст до отправки, применит к нему форматирование «Спойлер» и нажмёт «Отправить», сообщение со спойлером станет нечётким. Исходный текст можно будет увидеть только при нажатии на него. Так же можно сделать спойлеры этими тегами
<span >spoiler</span>, <tg-spoiler>spoiler</tg-spoiler>
pre-formatted fixed-width code block written in the Python programming language
<pre> <code > pre-formatted fixed-width code block written in the Python programming language </code> </pre>
Быстрый выбор нужного тэга и как это выглядит в телеграм?
Пример всех html тегов, которые поддерживаются тг
Особенности html в tg
В настоящее время поддерживаются только теги, упомянутые выше.
Markdown (v1 и v2) в телеграм
Система bot-t.com не поддерживает markdown а только HTML
Это сделано СПЕЦИАЛЬНО, так как из-за него может возникать множество ошибок у неопытных пользователей!
Поэтому мы не будем их расписывать, но Вы можете ознакомиться с официальной документаций:
Стилизация текста в telegram. Разметка markdown и html
Небольшой обзор того, как работает разметка в telegram, как в нем стилизовать текст при помощи markdown и html.
Сразу оговорюсь: в интернете множество статей про то, как делать отложенные посты, добавлять к ним кнопки и оформлять их с помощью @controllerbot и аналогов. Эта статья совсем о другом.
Разметку с помощью контекстного меню рассматривать тоже не буду. О ней вы скорее всего все знаете и пользуетесь постоянно. На всякий случай оставлю скриншот как пример:
В конце статьи также приведен список горячих клавиш.
Почти все тоже самое можно сделать быстрее с помощью специальных символов. Если вы такой же заядлый текстер, как я, или просто любите быстро печатать, то вам будет интересно.
Markdown довольно обширный язык и в телеграм представлена лишь малая часть его возможностей. На самом деле, с его помощью вы можете писать целые статьи. Ознакомиться с синтаксисом можно по ссылке
Markdown в телеграм
Итак, заходим на официальный сайт телеграм, идем в стилизацию текста и видим поддерживаемую разметку:
Однако, если просто вставить всю указанную markdown разметку в телеграм, то мы получим следующее:
Не работает курсивное начертание. Вероятно, в telegram давно не обновляли эту страницу и некоторые правила поменялись, а некоторые добавились. В стандартной разметке markdown действительно для курсива используется одна «звездочка», однако, в телеграм работает двойное подчеркивание. А с помощью || можно сделать скрытый текст, который появился относительно недавно. И вот мы получаем полный список полноценно работающих «команд»:
**сам ты жирный**
__курсив__
`код`
~~перечеркнутый~~
«`блок кода«`
||скрытый текст||
Но что со ссылками? Ссылки в разметке markdown выглядят вот так:
Однако, по умолчанию они не работают (только в telegram x для android)
На официальном сайте указан инлайн-бот @bold — с помощью него можно вдохнуть жизнь в ссылку, однако, при этом, бот оставит свой след на нашем сообщении:
Можно использовать его и для оформления текста, чтобы потом скопировать и отправить куда нам нужно уже без подписи бота.
В этом боте работает свой вариант markdown:
Все-таки для ссылки я бы использовал контекстное меню или горячие клавиши — это гораздо удобнее.
Как там HTML?
В целом, html-разметка тоже работает, но уже с другим инлайн-ботом. Нужно всего лишь написать:
И далее нужный нам текст с поддерживаемыми html-тегами. Вот их полный список:
Этот бот работает с markdown, точно также как @bold, нужно лишь добавить «md»:
Горячие клавиши
Кому-то выделить текст и нажать сочетание клавиш будет гораздо проще и удобнее. Для таких людей я и припас этот списочек:
Для windows:
ctrl + B = Жирный
ctrl + I = Курсив
ctrl + U = Подчеркнутый
ctrl + shift + X = Перечеркнутый
ctrl + shift + M = Моноширинный (код)
ctrl + shift + N = Очистить стили
Для macos:
com + U = Ссылка
com + B = Жирный
com + I = Курсив
com + shift + U = Подчеркнутый
com + shift + X = Перечеркнутый
com + shift + K = Моноширинный (код)
com + shift + P = Скрытый текст