Теги 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 = Скрытый текст

Источник

1. Краткое описание

В связи с потребностями проекта был создан простой чат, где пользователь вводит предложение и запрашивает простой ответ на некоторую информацию через http-сообщение.

2, визуализации

3. объяснение кода ядра

A. Загрузите конкретные вопросы на удаленный сервер через почтовый запрос

 function toChat2(enterpriseID,platform, query, source,userStatus,username)< var url = "http://10.0.30.15:8092/SmartServer/robot/chat"; xhr.onreadystatechange = toPostProcess; xhr.open("post", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(JSON.stringify(< "enterpriseID": enterpriseID, "platform": platform, "query": query, "source": source, "userStatus": userStatus, "username": username >)); console.log("ok"); > 

URL в тексте — это IP-адрес интрасети, вы можете заменить его своим URL-адресом.
Сначала установите параметры, функции параметров:

параметры	смысл
enterpriseID	Бизнес ID
platform	платформы
query	Конкретная проблема
source	источник
userStatus	состояние
username	Имя

Б. Разбор ответа, возвращенного сервером, и вставка его в окно чата.

 function toPostProcess () div class="atalk">span>' + textReply +'span>div>'; // Сшиваем предыдущий контент с контентом, который будет отправлен Submit Words.innerHTML = Words.innerHTML + str; // пусто TalkWords.value = ""; // скользить вниз Words.scrollTop = Words.scrollHeight; > catch (e) < return handleError(xhr, e); >> else < console.log («Могут быть междоменные проблемы, вы можете их решить»); >> > 

В форме Words.innerHTML вставьте сгенерированный тег ответного сообщения в тип окна чата, оставьте поле ввода пустым, а затем сдвиньте ползунок вниз. Это завершает простой чат.

4, исходный код

 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Простой чатtitle> style type="text/css"> @media screen and (min-width: 320px) and (max-width: 1156px) .talk_con_mob width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; > .talk_show_mob width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; > .talk_input_mob width:580px; margin:10px auto 0; > .talk_word_mob width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; > > .talk_con width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; > .talk_show width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; > .talk_input width:580px; margin:10px auto 0; > .whotalk width:80px; height:30px; float:left; outline:none; > .talk_word width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; > .talk_sub width:56px; height:30px; float:right; margin-right:10px; > .atalk margin:10px; > .atalk span display:inline-block; background:#0181cc; border-radius:10px; color:#fff; padding:5px 10px; > .btalk margin:10px; text-align:right; > .btalk span display:inline-block; background:#ef8201; border-radius:10px; color:#fff; padding:5px 10px; > style> script type="text/javascript"> var Words; var TalkWords; var TalkSub; var xhr; function InputPress()  if (event.keyCode == 13)  chatRoom(); > > function chatRoom() // определить пустую строку var str = ""; if(TalkWords.value == "") // всплывающее окно, когда сообщение пусто alert(«Сообщение не может быть пустым»); return; > str = '
+ TalkWords.value +'
' ; toChat2("10000000051", "inner", TalkWords.value , "wx", "", "oXFEUwvf_exNy6VLr9nGrxrvAPxQ"); // Сшиваем предыдущий контент с контентом, который будет отправлен Submit Words.innerHTML = Words.innerHTML + str; > function toChat2(enterpriseID,platform, query, source,userStatus,username) var url = "http://10.0.30.15:8092/SmartServer/robot/chat"; xhr.onreadystatechange = toPostProcess; xhr.open("post", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(JSON.stringify( "enterpriseID": enterpriseID, "platform": platform, "query": query, "source": source, "userStatus": userStatus, "username": username >)); console.log("ok"); > function toPostProcess() / * Установить следующий код, который будет выполняться после того, как объект XHR получит возвращенную информацию * / if (xhr.readyState === 4)  if (xhr.status === 200)  res = xhr.responseText; var obj = eval ("(" + res + ")"); console.log("res ok:" +res); try  var textReply = obj.result.content; str = '
+ textReply +'
'; // Сшиваем предыдущий контент с контентом, который будет отправлен Submit Words.innerHTML = Words.innerHTML + str; // пусто TalkWords.value = ""; // скользить вниз Words.scrollTop = Words.scrollHeight; > catch (e)  return handleError(xhr, e); > > else  console.log(«Могут быть междоменные проблемы, просто исправьте их»); > > > function GetXmlHttpObject()  var xmlHttp=null; try  // Firefox, Opera 8.0+, Safari console.log("XMLHttpRequest"); xmlHttp=new XMLHttpRequest(); > catch (e)  // Internet Explorer try  console.log("Msxml2"); xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); > catch (e)  console.log("Microsoft"); xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); > > return xmlHttp; > //is moblie var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; window.onload = function() Words = document.getElementById("words"); TalkWords = document.getElementById("talkwords"); TalkSub = document.getElementById("talksub"); xhr = new GetXmlHttpObject(); TalkSub.onclick = function() chatRoom(); > //is mobile if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)  console.log("Мобильный телефон"); document.getElementById('talk_con_id').className = 'talk_con_mob'; document.getElementById('words').className = 'talk_show_mob'; document.getElementById('talk_input_id').className = 'talk_input_mob'; document.getElementById('talkwords').className = 'talk_word_mob'; > else  console.log(«Компьютер»); document.getElementById('talk_con_id').className = 'talk_con'; document.getElementById('words').className = 'talk_show'; document.getElementById('talk_input_id').className = 'talk_input'; document.getElementById('talkwords').className = 'talk_word'; > > script> head> body> div class="talk_con" id="talk_con_id"> div class="talk_show" id="words"> div class="atalk">span id="asay">Добро пожаловать в чат клиентаspan>div>    div> div class="talk_input" id="talk_input_id">> input type="text" class="talk_word" id="talkwords" onkeypress="InputPress()"> input type="button" value="Отправить" class="talk_sub" id="talksub" > div> div> body> html> 

Читатели могут сами изменять стили, чтобы сделать этот простой чат более совершенным.

Источник

Чат на JavaScript и Node.js

В этой статье вы прочитаете как сделать чат на JavaScript и HTML, ещё для сервера будем использовать Node.js.

Если у вас не установлен Node.js и вы не знаете как это сделать, то прочитайте эти статьи:

Front-end:

Для начала разберём как сделать клиентскую часть сайта, создадим файл «chat.html», вот он:

Тут не чего сложного и особенного нет, единственное мы добавляем CSS bootstrap, чтобы всё чуть красивее стало и так же имеем два блока, первый куда будем выводить сообщения, второе для форм, куда будем вводить текст сообщения и кнопка отправить.

После создания HTML можете сделать отдельный JS файл или прямо внутри HTML писать код, я выберу второй вариант.

Как видите кода не так уж много, в начале мы берём все нужные нам HTML элементы, это блог чата, куда будем выводить все сообщения, поле для ввода сообщений и кнопка для их отправки.

Потом подключаем к серверу через WebSocket, дальше начинаем грубо говоря прослушивать сообщения которые на отправляет сервер, мы парсим данные от сервера и выводим полученное сообщение в блок чата.

Последние отслеживаем нажатие кнопки отправить сообщение, при клики на неё берём строку из формы и отправляем сообщение предварительно из JSON сделав строку и чистим форму.

На этом мы закончили делать клиентскую часть.

Back-end:

Теперь будем делать чат для сайт на Node.js, то есть сделаем серверную часть, для этого создадим файл «App.js».

Примечание:

Если вы не хотите использовать Node.js для вашего чата, не знаете его, или предпочитаете Python Django, то почитайте эту статью «Как сделать чат на Python Django»

Как можете заметить код на Node.js тоже очень простой, в начале подключаем библиотеку «ws» для работы с WebSocket, потом создаём подключение к серверу через этот протокол, и делаем массив в котором будут хранится все пользователи.

Потом создаём подключение пользователя, сразу там назначаем тип конекта, и добавляем его в массив всех пользователей, дальше идёт функция которая будет срабатывать при получение сообщения от клиента, его мы отправляем всем остальным, для этого проходимся по всем подключенным пользователям.

Последние это отслеживаем отключение клиента, если такое произошло, то просто убираем его из массива.

На этом разработка серверной части закончилась и как видите тоже не чего особо сложного нет, для запуска видите эту команду:

Источник