Show HN: Ray.so – Create beautiful images of your code

• carbon

  372 33,997 6.8 JavaScript

  :black_heart: Create and share beautiful images of your source code

  

I created a Github Action to generate images for code, within github issues. The benefits:

- Easy to view and understand the image of the code v/s the code block text when using a mobile device. Why? Easier to scroll images v/s text.

- Members will no longer have to rely on the issue reporters and commenters to format their code blocks correctly. Using the in built formatter, the code is always structured properly

- Maintainers can style the code blocks to suit their project's language and guidelines and not put the onus of this on the issue reporter / commenter

This uses carbon (https://github.com/carbon-app/carbon)

The Github Action in question: https://github.com/callmekatootie/carbonate

• silicon

  10 2,953 6.3 Rust

  Create beautiful image of your source code.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vscode-textmate

  5 540 5.5 TypeScript

  A library that helps tokenize text using Text Mate grammars.

  

There are lots of different approaches you could take. For sourcecodeshots, I run it through VSCode's tokenizer (https://github.com/microsoft/vscode-textmate) and then use node-canvas to generate the image one line at a time.

It's a very imperative process and fairly slow on a cpu, but the nice thing is that I can run the same code in the browser to speed up development. The Rust project, https://github.com/Aloxaf/silicon, mentioned in another part of the comments is probably faster, but I didn't find it when I was searching for a solution.

• carbonate

  1 237 0.0 JavaScript

  Github Action to format fenced code blocks in github issues as images. Originally created as part of DEV Github Actions hackathon: https://dev.to/callmekatootie/jazz-up-the-code-blocks-in-github-issues-52e6

I see folks wondering about the use case - so here's one: I created a Github Action for use in Github Actions. The benefits:

- Easy to view and understand the image of the code v/s the code block text when using a mobile device. Why? Easier to scroll images v/s text.

- Members will no longer have to rely on the issue reporters and commenters to format their code blocks correctly. Using the in built formatter, the code is always structured properly

- Maintainers can style the code blocks to suit their project's language and guidelines and not put the onus of this on the issue reporter / commenter

Reference: https://github.com/callmekatootie/carbonate

I used Carbon to generate the images in this case - but you get the gist of what one can use images of code for

Suggest a related project