search

cyucelen / marker

🖍️ Marker is the easiest way to match and mark strings for colorful terminal outputs!
MIT License
47 stars 13 forks source link

Find a standard way to create colorized terminal output pictures for README #18

Closed cyucelen closed 4 years ago

cyucelen commented 4 years ago

It is hard to keep the terminal pictures in README file tidy and in order with respect to size, font family, font color, background color, etc. Want to discuss for finding a standard way that can be used by everbody to create colorful terminal output pictures for our API examples in README file.

There are some possible solutions that comes to my mind:

Darkclainer commented 4 years ago

We can use this python app https://github.com/nbedos/termtosvg It's not perfect for our purpose, but with some postprocessing we can get quite good result.

How we can use it? Suppose that all examples will output only single line. They are stored in folder "examples". We write python scripts that enter in each example directory, build and run example and record session - output svg file that go in assets directory.

With "email" example, using next command:

termtosvg -c "go run main.go" -g 80x2

I obtained next image: ... And github forbid me to pin svg image.... So I made a screenshot: image

As you can see you can specify geometry of terminal and other thing (there are some themes).

The only bad thing I can see is the redundant last line with cursor, but I think we can leave it or fix it.

cyucelen commented 4 years ago

Oh, tool looks great! I am tampering with it now. I will try to customize a theme for us and automatize the generation, crop of images etc..

Darkclainer commented 4 years ago

I can do automatization, and crop if you don't mind.

cyucelen commented 4 years ago

Ok, @Darkclainer i customized the theme for us and written some script to generate svgs. Letting you the rest. Happy to help here if you need any. :+1:

Darkclainer commented 4 years ago

I found another way...

  1. Using this library https://github.com/buildkite/terminal-to-html we can generate html text, using css we can format page how we want.
  2. This library enable us to make picture from our html https://pypi.org/project/imgkit/ .

This is more messy approach, but in some sense it is more flexible - we can guarantee fixed image length and etc. out

PR: https://github.com/cyucelen/marker/pull/26 New readme: https://github.com/Darkclainer/marker/blob/image_generator_for_readme/README.md

cyucelen commented 4 years ago

Good to close this i guess?