Syntax Highlighter Bot

Source code of @syntaxybot.

Inspired by Piterden/syntax-highlighter-bot.

Minimal syntax highlighting bot for Telegram. Use it in private chats or add to group chats. Send text inside three backticks, or any message containing pre or multiline code entities, and the bot will reply you with syntax highlighted images of that piece of code. Useful in Development groups.

Try the running bot here: Syntax Highlighter Bot 🚀

Written in TypeScript and grammY and runs on Deno.

• Built Using
• Features (and usage)
• Setup › Running Locally
• Setup › Deploy to Deno Deploy
• Setup › Environment Variables

Built Using

Thanks to these tools and libraries.

1. highlight.js — Syntax highlighting for the Web. Behind-the-scenes of this bot.
2. svg2png-wasm — SVG to PNG converter JS library made with WASM + resvg (no native dependencies). Used for generating PNG images from custom made SVG.
3. grammY — The Telegram Bot Framework.
4. Deta.sh Base — Free and unlimited Cloud Database service.

puppeteer had a great place in the history of most of the syntax highlighter bots including this one. So, thank you. (Since v0.5.0 we don't use it anymore).

Puppeteer — Puppeteer is a library which provides a high-level API to control Chrome, Chromium, or Firefox Nightly over the DevTools Protocol. Also a core part of this bot, used for generating syntax highlighted images.

You can still access the puppeteer edition from the puppeteer branch and host it if you want to - (not maintained)

Features

Syntax Highlighting

Syntax Highlighting for almost 200 languages with automatic language detection - power of highlight.js!

Language Detection: Tries to detect and use the detected language for more accurate results.

• bot.ts <code> - Detects ts.
• ts <code> - Detects ts.
• <code> - Auto detection by highlight.js.

NOTE: The <code> should be a pre formatted code block could be a pre entity formatted code block, or a multiline code entity.

🎨 Customization

Custom theming for the images. Use the /theme command to set any theme from this list. See themes in action here.

Multiple fonts support. See the /font command in chat for the list of available fonts. Add a font that you like by putting them in the assets/fonts/ and opening a PR.

Send images as documents. Sometimes long code might make the image blurry due to the default Telegram image compression. Sending them as documents fixes the issue. Use either /as_doc or /as_document command.

Better User Experience

Forced Highlighting: Replying /highlight or /hl to a message containing text or caption, will

• check for pre and code (multiline) entities and if there is any, only highlights those as it normally do. Useful if the original message was edited later.
• If no pre or code (multiline) entities were found, highlights the whole message. Useful if you forgot to format them before sending.

Optional Arguments

You can optionally pass arguments separated by commas or white spaces. The accepted arguments are integers corresponding to the position of the pre/code entity in the message. Starting from 1. See the example below.

Passing w or no-wrap, or nw will highlight the text without wrapping it. The image will scale to the maximum content length. It is useful when highlighting some terminal logs, etc.

Introduced in v0.4.0

You can also pass any of 0, full, f to get the whole message highlighted. (why?: If you ever need to highlight the full message which contains pre/code entities).

Take this message as an example:

Lorem ipsum <code (inline)> dolor sit amet.

<code (multi line)>

Nunc in ligula vehicula quam efficitur vehicula at lacinia erat.

<pre>

Now, replying,

NOTE: /hl is the same as /highlight. It's just a short form.

• /hl will highlight <code (multi line)> and <pre> (Default).
• /hl 1 will only highlight the <code (inline)>.
• /hl 2 will only highlight the <code (multi line)>.
• /hl 3 will only highlight the <pre>.
• /hl 1 3 will highlight both <code (inline)> and <pre>.
• /hl 0 or /hl f or /hl full will highlight the whole message.

NOTE: /hl 0 1 only highlights the full message; not both full message and 1st pre/code entity.

Toggle Automatic Syntax Highlighting: You can disable auto syntax highlighting by using the /toggle_auto_hl command. (Use the same command to re-enable it). You don't always need the bot to highlight even the small codeblocks. So, when you need the highlighting, you can force it to highlight the message/code blocks. Checkout the "Forced Highlighting" feature.

Introduced in v0.3.0 • See grammyjs#57178.

Stats: Not a very useful feature, I know. Use /stats command to find how many times the bot has sent syntax highlighted images for you.

"Maybe" features that I'd like to add if possible.

• Highlight only if the code block contains more than x number of characters. It would be a mess if someone use three backticks instead of one backtick, even for a single monospace word.

• Automatically toggle "Send as Document" mode if there is more than x number of characters.

• No puppeteer. Highlighting without using puppeteer. (The most wanted feature). This was done in v0.5.0 by using an implementation which creates a SVG and transform it into PNG... blah blah.

• Forced /highlighting by replying to a message - if the message contains pre code blocks, highlight them in the usual way. If not, highlight the whole message.

Setup

Running Locally

Make sure you have installed Deno CLI.

Clone the repository.

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

Go to to the cloned repository folder. 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 local.ts

Required permissions

• --allow-net - To communicate with Telegram servers and receive updates.
• --allow-env - To access environment variables.
• --allow-read - To read translations, styles, fonts and .env file.

If everything is done correct, you should see "(Username) started" in your console.

Deploy to Deno Deploy

The working bot, @syntaxybot is currently deployed on Deno Deploy free account. It's pretty easy to setup.

Click here to deploy to Deno Deploy.

If you're having issues with deploying using the above link, try forking this repository and deploying from Deno Deploy Dashboard by connecting to the forked repository.

After deploying you will get a link to your application, in the format https://<appname>.deno.dev.

Open browser and go to the link down below.

• Replace the <BOT_TOKEN> with your BOT_TOKEN.
• Replace <APP_URL> with the link to your application.

https://api.telegram.org/bot<BOT_TOKEN>/setWebhook?url=<APP_URL>/<BOT_TOKEN>&drop_pending_updates=true

This will set the bot's webhook to the deployed application, so Telegram will send updates there and it will be able to handle them there.

Environment Variables

Variable	Required?	Description
BOT_TOKEN	Yes.	The API token of the Bot. Chat with https://t.me/BotFather to get one.
DETA_KEY	Yes.	Project Key of Deta.sh Project. Sign up and create a project at https://deta.sh.

Translating

If you like to translate this bot into your language, please follow the English translation file. This project uses Fluent for localization.

Contributing

Feel free to contribute! And if you are having issues or if you want suggest something, please open an issue here: dcdunkan/syntax-highlighter-bot/issues. Or, open a PQ!

2 🦕 22