Hacktoberfest: PR #2
Tags: hacktoberfest23, javascript, opensource, webdev
Published: 2023-10-09 03:35:46

Continuing my Hacktoberfest journey, I went back to my roots with JavaScript, hopping into the syntax highlighting library, [Highlight.js](https://github.com/highlightjs/highlight.js). Syntax highlighting always interested me and I always wondered how it worked. I found an [issue](https://github.com/highlightjs/highlight.js/issues/3881) in this library which seemed easy enough to tackle and I set my goal to fix this problem.

## The Challenge: Rust Keywords Treated as Function Calls

The issue was that the existing syntax highlighter in Highlight.js had a quirk when it came to Rust. Certain reserved keywords like `if`, `else if`, `for`, `while`, and `match` were being highlighted as function calls instead of keywords under a specific condition. The issue would appear when trying to write one of those keyword statements followed by parentheses `()`. 

```rust
# no issues in highlighting, treats as keyword
if true {}
# issues in highlighting, treats as function call
if (true) {}
```

Here is an example of what the code looked like before the fix, notice the code at the bottom specifically.

![bad highlighting](https://user-images.githubusercontent.com/77292466/273481032-661a8173-50cc-4b9a-8aab-a017b6ebf236.png)

## The Solution: RegEx Magic

After glancing over some of the internals of Highlight.js, understanding its lexing and parsing mechanisms. I realized most of the rules were a neat combination of RegEx (regular expressions). After digging through some modules, I found the Rust highlighter module. It wasn't that obvious at first, but I was able to find the function call syntax handler and tweak the logic behind function call identification and adjust the syntax rules to ensure that these keywords were recognized and highlighted correctly. This was the end result of my [pull request](https://github.com/highlightjs/highlight.js/pull/3883):

![good highlighting](https://user-images.githubusercontent.com/77292466/273481087-5e322159-883b-459a-b633-b2a336e7cc01.png)

A code sample of what I wrote:

![code sample](https://user-images.githubusercontent.com/77292466/273481717-96b3ec74-6d4c-479d-90b9-689cd85b40c6.png)

## Writing Tests and Updating the Change Log

Fixing the syntax highlighter was just the beginning. To make sure the update was reliable, I wrote some tests the Rust code scenarios described in the issue. 

Every contribution to an open-source project is a part of its history. I made sure to document the change in the Change Log for the upcoming release. I'm excited to see my code being used in action soon!

## Your Contribution Counts!

My experience so far with Hacktoberfest 2023 and contributing to [Highlight.js](https://www.npmjs.com/package/highlight.js) was interesting and rewarding. Although it excites me to see my code getting ready to be released in a library with over **6 Million** downloads a month, it reinforced the idea that open source is not just about code; it’s about people, collaboration, and making technology accessible and understandable for everyone.

As Hacktoberfest continues to unfold, I encourage you to join the movement. Whether you are a seasoned developer or a learning enthusiast, there’s a place for you in the open-source community. Every contribution, regardless of its size, has the power to transform a project and empower its users. Happy hacking!