Code2image

• 

  Functioning application on messenger

• 

  Bot returning long line of ruby code successfully highlighted

Inspiration

My teammates and I normally put up code on messenger developer groups and other platforms for help and debugging. We realized it is hard to go through so many lines of code without any form of formatting or syntax highlighting, especially when there are so many lines. So we decided to come up with a way of helping developers read through code easily right there in the messenger platform.

What it does

What Code2image does is to pick up code from the messenger chat, from the beginning of the three back ticks (```) to the end, and then send it to our processing server, where it adds syntax highlighting to the code, then converts it to an image which is then stored on Cloudinary. The Cloudinary API sends back the link to the image and then the bot picks it up and sends it to messenger finally.

How we built it

We started off by building the processing server in ruby-on-rails, where we do the actual syntax highlighting with a gem (library) called Rouge, and then convert it into an image. The Cloudinary gem is incorporated into the application and this allows us to store the image on a Cloudinary account owned by us. Then we built the messenger bot, adding a part where it obtains the code, posts it to the ruby-on-rails app and receives a link as a response. The bot parses the link and displays the final image back to the user.

Challenges we ran into

We ran into a situation where we couldn't figure out how to obtain the code which was sent from the bot in the rails app so it was returning empty images.

Accomplishments that we're proud of

One thing that we are most proud of is the fact that we are able to convert the highlighted code into an image and post it back to the user to be able to use it.

What we learned

We learned that using the messenger platform and messenger bots opens up a whole new world of possibilities.

What's next for Code2image

We want to integrate Code2image as a feature in messenger groups which would automatically pick up code and format it with syntax-highlighting. Next, we would even want to go further add a feature where code which is sent to Code2image is run and can show the results right in messenger, and even have a straight forward debugging feature which highlights issues found in the code.

Built With

• cloudinary-api
• graphql
• messenger-api
• node.js
• ruby-on-rails