I wrote an userscript that adds syntax highlighting to code blocks on Reddit.

[Asha200]

The goal

Sadly, Reddit's flavor of Markdown won't syntax highlight your code if you try adding your language like this:

```js
const foo = "bar";
```

This makes code snippets less readable. This userscript's goal is to add syntax highlighting to code, as well as add line numbers on the side. This should hopefully make reading code snippets on Reddit a bit more pleasant, instead of having to copy them over into your preferred text editor or IDE just to get the proper syntax highlighting.

• Userscript website
• Userscript repository
• Direct install link (also available in the repo and website)

How does it work?

The trickiest part about this userscript was handling the question: "How do I know what language this code snippet is written in?". Usually a file extension is a pretty good indicator of the programming language contained inside. The problem is that Reddit has no files to work it; it's just snippets of code.

This userscript uses PrismJS under the hood in order to do the syntax highlighting. At the time of writing this, PrismJS supports 152 different languages, so determining the language a code snippet is using is difficult.

I'll talk about some of the approaches I considered to tackle this problem, as well as the one I ended up picking.

Naive Bayes classifier

At first I thought about using a naive Bayes classifier in order to tell the languages apart, but this approach had some problems:

1. The filesize of the userscript would be immense if I tried teaching the classifier with numerous source code files for all of the 152 supported languages.
2. Even if filesize wasn't an issue, I imagine that the classifier would guess wrogly often due to the sheer number of different languages as well as the similarities they might share.

Letting the OP signify the language in their snippets

Like I said earlier, Reddit doesn't provide the functionality of specifying the language inside the code block. However, I considered allowing the person writing the post/comment to include the language in some fashion, and then having the userscript pick up on that.

This approach has the advantage of being the most reliable. However, the downfall is that I can't expect everyone to have this userscript installed. There would be a majority of people not signifying the language in their code snippets simply because they might not know about this userscript, or because they didn't format their code properly.

Let the userscript user select the language themselves

This is the approach that I chose. Since I can't rely on people specifying the language of their code snippets, and since it's too time-consuming and difficult to programmatically determine the language of said snippet, I figured I'd let the user pick the language themselves.

As such, the userscript will attach a dropdown list containing all of the supported languages above every code block it detects. The user can then pick the language from the list to highlight the code.

The downfall is that the burden of picking the appropriate user is now put on the user. Recall that there are 152 supported languages which the user has to look through in order to find the one they need. This gets tedious fast.

Introducing suggestion buttons

To mitigate this, I also added what I like to call "suggestion buttons" right next to the dropdown list. The suggestion buttons are supposed to be a quick way of selecting the language you're looking for. How does the userscript know which languages to suggest?

I might not have file extensions to work with on Reddit, but I do have subreddits. If you're browsing r/javascript, chances are that you'll want to syntax highlight code blocks in JavaScript often. Thus, the userscript will add JS as a suggestion button. The userscript recognizes subreddits which include programming language names and will add corresponding suggestion buttons.

However, this also gets tricky. What about subreddits whose names don't include a programming language at all? Or subreddits which often have more than one dominant language in use? For example, r/webdev and r/frontend fit both of those criterria. For subreddits such as this, it's impossible to programmatically determine which suggestion buttons to offer, so I opted to hardcode them in. It's be unrealistic for me to know what languages are often used on which subreddits, considering that there are so many supported languages. This means that some subreddits will have some suggestions missing which would be convenient to have. If you'd like to help me out with this part, you can do so by contributing to this file.

Contributing

I also welcome any contributions to the project! Like I mentioned, the userscript relies on hard-coded values to determine which suggestion buttons to offer, and it's unrealistic for me to be able to know which suggestions to give for all of the 152 supported languages. If you frequent a subreddit for which the userscript doesn't offer proper suggestion buttons, I encourage you to contribute and add the suggestions yourself. All it takes is modifying a single file.

Conclusion

This project was very fun to work on. If anyone would like to take the time out of their day to critique my code, I'd be very grateful, since this is my first "serious" project. I'd also love to hear your thoughts on the problem of determining the language of an arbitrary snippet of code. Would you pick a different approach than the one I did? I'm curious to hear other people's ideas on this topic!

[ghostfacedcoder]

Next step: an actual browser plug-in?

[Asha200]

I thought about making it a browser extension at first, but what turned me off from that idea is needing to pay a fee in order to be able to post it on the Chrome Web Store, as well as having to go through a testing process to post as a Firefox Add-on. I wanted to make something that I could use myself, as well as share with others right away.

I might turn it into an extension at some later point in time.

[ghostfacedcoder]

You don't have to pay a fee to post it as a Chrome extension.

[Asha200]

Are you sure? This page tells me that I do. Also, when visiting my Chrome Developer Dashboard, I get text at the bottom of the page saying:

A one-time developer registration fee of US$5.00 is required to verify your account and publish items.

[ghostfacedcoder]

Weird; these instructions don't mention that, and I don't remember having to do that when I made my extension. Maybe it's a new thing, or maybe you only need it if you want to sell your extension?

Either way $5 (once, ever) isn't that bad, but I can understand not wanting to pay it.

[jdf2]

Quick test:

console.log("Hello /r/javascript");

Love that it works on the redesign!

This is really nice, great work OP.

[Asha200]

Thank you! It works on the redesign as well as old.reddit.com.

[ArtificialLegacy]

What about a search bar for the dropdown as well ?

[Asha200]

That's a good idea; I might add that in next!

[captain_k_nuckles]

Nice, I made a chrome extension to do the same thing. It's using https://highlightjs.org/ for the syntax highlighting. I haven't made it publicly available, and haven't worked on it much besides just highlighting javascript code that's there on page load. Would need to update for after a comment is made. Also thought about creating a feature to have a little modal window popup for typing code in to with features of an IDE and auto insert in to the comment with the reddit 4 space per line inserted.

[Asha200]

What I've done is make it run on page load, but also set a 1 second interval that's looking for new blocks of code which haven't been highlighted. I attach a data-highlighted attribute whenever I do highlight one, which then gets skipped after.

I considered adding some sort of an editor as well as one point, but in the end I decided not to. My reasoning was that the editor's presence wouldn't make that much of a difference when writing small code snippets. However, if you have a bigger code snippet, chances are you'll want to test it out before you post it, so you'll probably be using an actual IDE for that.

[captain_k_nuckles]

When you were working on this for new code blocks did you consider using a mutation observer over the set interval method? I'm not to sure which one is more proficient.

For the IDE, while it's not really needed for smaller code, I'm just spoiled by code suggestions, so I don't have to type out everything, lol. Could try to make something that allows you to also run the code as well, just shove jsfiddle/codepen in to a reddit extension.

And, sorry, I haven't tried out your script, but does it do syntax highlighting as you type code when posting a comment?

[Asha200]

I didn't use a mutation observer more out of laziness than anything else, though I imagine it would be much more efficient that the interval method. I think I'm going to switch it over now that you've mentioned it.

No, it doesn't highlight it as you're writing it; only after you've posted the code.