feat: Add lines option to control pyodide editor height

[amit-s19]

Closes #41

This PR adds a new lines option to pyodide fence editors that allows users to specify the initial number of visible lines. This helps save vertical space for small code examples and provides more room for larger ones.

Changes:

• Add CSS support for custom editor height
• Implement lines option in pyodide formatter
• Add documentation with examples
• Add unit tests

Example usage:

print("hello")
print("world")
print("!")

[pawamoy]

Thanks a lot for the PR @amit-s19 🙂

The changes look good at first glance, however the solution is based on lines * 20px, which doesn't yield a good result: for example with lines="30", I only get 28 lines in the editor before it adds a scrollbar:

I suppose 20px is not the exact right value, and I worry no pixel value will ever be, since font-family, font-size, line height can change depending on many things on the client side 🤔

Instead, @waimea-cpy posted a demo where the Ace editor's maxLines and minLines options are used. I suppose using these options will be much more robust.

Finally, in the issue we discussed about having the height, min_height, max_height and resize options, while you only implemented lines here, so I wouldn't consider this PR complete 🙂 If you're willing to continue the work on this PR, I'm happy to continue my reviews 😄

[michaelweinold]

@amit-s19, are you still on this?

[amit-s19]

Hey @michaelweinold yes, but I'll probably take a look at this tomorrow.

[pawamoy]

I'll close this for now @amit-s19, let me know if you want to start working on this again.