Syntax Highlighter WebApp

Inspired by zubiden/tg-web-bot-demo.

Try the demo bot running here: @syntaxyybot

Recently Telegram released a big update for bots: Web Apps/Bots. This is a sample Web App written in TypeScript and Deno.

• Built Using
• What this bot can do?
• How it works
• Setup

Read more about the Web Apps update

• https://telegram.org/blog/notifications-bots#bot-revolution
• https://core.telegram.org/bots/webapps

Built using

1. highlight.js — Core part of this bot. Syntax highlights code elements in the WebApp. Also, highlightjs-line-numbers.js is used with highlight.js for line number support in the pre-code elements.
2. grammY — The Telegram Bot framework.
3. Oak — A middleware framework for handling HTTP with Deno.
4. pieroxy/lz-string — LZ-based compression algorithm for JavaScript. This bot uses some functionalities of this library for compressing the code block strings to URI encoded strings like Prettier Playground do.

What this bot can do?

This bot can syntax Highlight code blocks in messages. Code blocks are considered as pre or multiline code entities. It replies with a button to open webapp which shows you the highlighted preview.

I initially made this bot for testing the WebApp thingy. If you want to use a stable syntax highlighting bot, see dcdunkan/syntax-highlighter-bot.

I am not gonna work on this bot much, because this bot is supposed to be used in developer group chats, but Telegram currently does not allow these WebApp buttons to be sent in groups. It's only for private chats. So, until Telegram supports it, this bot is useless, and it will be just a waste of time.

How it works?

It's not that complicated :)

bot.ts: Bot listens for any message containing pre or code entity. Filters them into pre and multiline code. Then takes it's text maps them into an array of code blocks, and compress it to URI encoded string. It is appended as the URL hash. Then a web app button with that URL is sent.

router.ts: When the web app button is clicked, —URL is opened— router path responds with the index.html file.

index.html: When this page is requested, it gets the hash from the URL of the page, and decompresses that string back into array of code blocks. Each string will get appended to a pre-code element. Then highlight.js and the line number plugin will do their job.

Additionally, when the page is requested, it also validates the data that Telegram sent to the page. For this bot, it's not required to do though. Maybe I'll just remove it later.

Setup

• Environment Variables
• Deploying on Deno Deploy
• Running Locally

Environment Variables

• BOT_TOKEN - Bot token. You can get one from BotFather.
• SITE_URL - Server URL. If you're using Deno Deploy, use app's url. Or, if you're running locally, you may use the HTTPS forwarding URL by ngrok or something.

Deno Deploy

The working demo bot, @syntaxyybot is running on Deno Deploy.

Click here to deploy bot on Deno Deploy.

Running Locally

• Make sure you have Deno CLI installed.

• Clone the repository.

  git clone https://github.com/dcdunkan/tg-webapp-syntax-highlighter.git

• Change directory (cd) to the cloned repository.

• Create a .env file and set environment variables like in example.env.

• Run the bot using the command below.

  deno run --allow-net --allow-env --allow-read mod.ts

  Required permissions

  • --allow-net - To communicate with Telegram servers and receive updates.
  • --allow-env - To access environment variables.
  • --allow-read - To read static files.

If everything is done correct, you should see "[server] listening..." and "[bot] (Username) is up" in your console.

Node.js?

No, but yes. Dependencies are equally available for Node.js too. Change the imports/exports. And in env.ts, just change the Deno.env.toObject() to process.env. That should work.

MIT License