Jazz up the code blocks in Github Issues
Tags: actionshackathon, github, showdev, javascript
Published: 2020-08-19 15:50:49

### My Workflow

My Github Action is named [Carbonate](https://github.com/marketplace/actions/carbonate)

Diving right in - Let's see if you can figure out what my Action does. Here's what your issue(s) look like BEFORE my Action takes over:

![Before Action](https://dev-to-uploads.s3.amazonaws.com/i/j34k69uulqfnojt36m34.png)

and here is what they will look like after my action has run:

![After Action](https://dev-to-uploads.s3.amazonaws.com/i/fvg8i0yv5o3eey8j30sa.png)

Spot the difference?

**The workflow of my Github action is as follows:**

- It extracts the code block for the issue description / comment and generates beautiful images for them
- It then inserts the image at the code block
- It also retains the original code block as a collapsed detail in the same issue / comment body

Additionally, it

- Allows formatting the code using Prettier and controlling the styling of the images generated
- Supports the following events:
    - issue_comment:
        - types: created
    - issues:
        - types: opened


### Submission Category: 

I am submitting this Action under the `Phone Friendly` category. Although I am of the opinion that `Maintainer Must-Haves` would also have been a good category to submit under (Why wouldn't any code maintainer not want to have some gorgeous looking images of the code??), I am submitting this for the `Phone Friendly` category.

On mobile devices, reading the code in its text form can be a difficult task. It puts the responsibility on the author to format their code correctly, to specify the language of the fenced code block in the markdown and to adhere to any guidelines the project may have. This could lead to discouragement of reporting the issues and potential embarrassments.

Automatically formatting the code for the author eliminates this hurdle. Having (oh-my-god-they-are-so-beautiful) images generated for the code allows folks to easily read and view the code in its entirety. No more scrolling - only zooming, which is an easier task.

The benefits of this Action for mobile device users are clear and hence I submit it under the `Phone Friendly` category.

### Yaml File or Link to Code

{% github https://github.com/callmekatootie/carbonate %}

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

I only now created this Action and thus there are no repositories that are currently using it (at the time of writing this). However, I am using the Action in my Action's own repository - so feel free to get a demo of it in action by creating issues [here](https://github.com/callmekatootie/carbonate/issues). (Don't forget to include [fenced code blocks](https://docs.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks#fenced-code-blocks) in your comments)

I am making use of [Carbon](https://github.com/carbon-app/carbon) to generate the images and the images themselves are hosted on [Imgur](https://apidocs.imgur.com/). The code is optionally formatted using [Prettier](https://prettier.io/).

- <span>Cover Photo by <a href="https://unsplash.com/@goshua13?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Joshua Aragon</a> on <a href="https://unsplash.com/s/photos/code?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
- The content of the issue in the screenshots were actually borrowed from [here](https://stackoverflow.com/a/61269447/2104976). The answer helped me in fixing an issue with my code and I found it suitable to demo.