{"id":15669235,"url":"https://github.com/dcdunkan/tg-webapp-syntax-highlighter","last_synced_at":"2025-05-06T20:06:41.227Z","repository":{"id":114588185,"uuid":"483573393","full_name":"dcdunkan/tg-webapp-syntax-highlighter","owner":"dcdunkan","description":"An experimental syntax highlighter web app bot based on Telegram's WebApp update.","archived":false,"fork":false,"pushed_at":"2022-04-23T11:20:17.000Z","size":28,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T02:22:31.210Z","etag":null,"topics":["bot","deno","grammyjs","highlightjs","syntax-highlighting","telegram","telegram-bot","typescript","webapp"],"latest_commit_sha":null,"homepage":"https://telegram.me/syntaxyybot","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dcdunkan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-20T08:37:43.000Z","updated_at":"2022-11-08T00:16:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8864bb4-b0f9-41d1-a86f-0d2ca7e73567","html_url":"https://github.com/dcdunkan/tg-webapp-syntax-highlighter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcdunkan%2Ftg-webapp-syntax-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcdunkan%2Ftg-webapp-syntax-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcdunkan%2Ftg-webapp-syntax-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcdunkan%2Ftg-webapp-syntax-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcdunkan","download_url":"https://codeload.github.com/dcdunkan/tg-webapp-syntax-highlighter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252761143,"owners_count":21800124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","deno","grammyjs","highlightjs","syntax-highlighting","telegram","telegram-bot","typescript","webapp"],"created_at":"2024-10-03T14:22:00.926Z","updated_at":"2025-05-06T20:06:41.186Z","avatar_url":"https://github.com/dcdunkan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ccenter\u003e\n\n# Syntax Highlighter WebApp\n\n\u003c/center\u003e\n\nInspired by\n[zubiden/tg-web-bot-demo](https://github.com/zubiden/tg-web-bot-demo).\n\n### Try the demo bot running here: [@syntaxyybot](https://telegram.me/syntaxyybot)\n\nRecently Telegram released a big update for bots: Web Apps/Bots. This is a\nsample [Web App](https://core.telegram.org/bots/webapps) written in TypeScript\nand [Deno](https://deno.land).\n\n- [Built Using](#built-using)\n- [What this bot can do?](#what-this-bot-can-do)\n- [How it works](#how-it-works)\n- [Setup](#setup)\n\n\u003e Read more about the Web Apps update\n\u003e\n\u003e - https://telegram.org/blog/notifications-bots#bot-revolution\n\u003e - https://core.telegram.org/bots/webapps\n\n## Built using\n\n1. [highlight.js](https://highlightjs.org) — Core part of this bot. Syntax\n   highlights code elements in the WebApp. Also,\n   [highlightjs-line-numbers.js](https://github.com/wcoder/highlightjs-line-numbers.js/)\n   is used with highlight.js for line number support in the pre-code elements.\n2. [grammY](https://grammy.dev) — The Telegram Bot framework.\n3. [Oak](https://github.com/oakserver/oak) — A middleware framework for handling\n   HTTP with Deno.\n4. [pieroxy/lz-string](https://github.com/pieroxy/lz-string) — LZ-based\n   compression algorithm for JavaScript. This bot uses some functionalities of\n   this library for compressing the code block strings to URI encoded strings\n   like [Prettier Playground](https://prettier.io/playground) do.\n\n## What this bot can do?\n\nThis bot can syntax Highlight code blocks in messages. Code blocks are\nconsidered as `pre` or multiline `code` entities. It replies with a button to\nopen webapp which shows you the highlighted preview.\n\nI initially made this bot for testing the WebApp thingy. If you want to use a\nstable syntax highlighting bot, see\n[dcdunkan/syntax-highlighter-bot](https://github.com/dcdunkan/syntax-highlighter-bot).\n\n\u003e I am not gonna work on this bot much, because this bot is supposed to be used\n\u003e in developer group chats, **but** Telegram currently does not allow these\n\u003e WebApp buttons to be sent in groups. It's only for private chats. So, until\n\u003e Telegram supports it, this bot is _useless_, and it will be just a waste of\n\u003e time.\n\n## How it works?\n\nIt's not that complicated :)\n\n[bot.ts](src/bot.ts): Bot listens for any message containing `pre` or `code`\nentity. Filters them into `pre` and multiline `code`. Then takes it's text maps\nthem into an array of code blocks, and [compress](src/hash.ts) it to URI encoded\nstring. It is appended as the URL hash. Then a web app button with that URL is\nsent.\n\n[router.ts](src/router.ts): When the web app button is clicked, —URL is opened—\nrouter path responds with the [index.html](src/index.html) file.\n\n[index.html](src/index.html): When this page is requested, it gets the hash from\nthe URL of the page, and decompresses that string back into array of code\nblocks. Each string will get appended to a pre-code element. Then highlight.js\nand the line number plugin will do their job.\n\n\u003e Additionally, when the page is requested, it also validates the data that\n\u003e Telegram sent to the page. For this bot, it's not required to do though. Maybe\n\u003e I'll just remove it later.\n\n## Setup\n\n- [Environment Variables](#environment-variables)\n- [Deploying on Deno Deploy](#deno-deploy)\n- [Running Locally](#running-locally)\n\n### Environment Variables\n\n- `BOT_TOKEN` - Bot token. You can get one from\n  [BotFather](https://t.me/BotFather).\n- `SITE_URL` - Server URL. If you're using Deno Deploy, use app's url. Or, if\n  you're running locally, you may use the HTTPS forwarding URL by ngrok or\n  something.\n\n### Deno Deploy\n\nThe working demo bot, [@syntaxyybot](https://telegram.me/syntaxyybot) is running\non Deno Deploy.\n\n[Click here to deploy bot on Deno Deploy](https://dash.deno.com/new?url=https://raw.githubusercontent.com/dcdunkan/tg-webapp-syntax-highlighter/main/mod.ts\u0026env=BOT_TOKEN,SITE_URL).\n\n### Running Locally\n\n- Make sure you have [Deno CLI](https://deno.land) installed.\n- Clone the repository.\n  ```bash\n  git clone https://github.com/dcdunkan/tg-webapp-syntax-highlighter.git\n  ```\n- Change directory (`cd`) to the cloned repository.\n- Create a `.env` file and set [environment variables](#environment-variables)\n  like in [`example.env`](example.env).\n- Run the bot using the command below.\n  ```bash\n  deno run --allow-net --allow-env --allow-read mod.ts\n  ```\n\n  **Required permissions**\n  - `--allow-net` - To communicate with Telegram servers and receive updates.\n  - `--allow-env` - To access environment variables.\n  - `--allow-read` - To read static files.\n\nIf everything is done correct, you should see \"\u003csamp\u003e[server]\nlistening...\u003c/samp\u003e\" and \"\u003csamp\u003e[bot] (Username) is up\u003c/samp\u003e\" in your console.\n\n##### Node.js?\n\nNo, but _yes_. Dependencies are equally available for Node.js too. Change the\nimports/exports. And in [env.ts](src/env.ts), just change the\n`Deno.env.toObject()` to `process.env`. That should work.\n\n---\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcdunkan%2Ftg-webapp-syntax-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcdunkan%2Ftg-webapp-syntax-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcdunkan%2Ftg-webapp-syntax-highlighter/lists"}