elementary / blog-template

Template for the Jekyll-powered elementary blog
https://blog.elementary.io
GNU General Public License v3.0
32 stars 20 forks source link

Terminal-styled code blocks #22

Closed michallepicki closed 4 years ago

michallepicki commented 4 years ago

Feature

For my own needs I'd like to be able to embed bash command / output snippets, and have them nicely styled. I think I'm going to work on this anyway, but I can submit a PR if you'd like this feature as well (and I'd love to get feedback from you, more aesthetically aware people). I imagine this is not a priority for you, as you'd prefer regular users to keep away from the terminal, but maybe you're planning on publishing some more technical blog posts directed at programmers or potential elementary contributors?

Describe the solution you'd like For bigger snippets, I was thinking instead of the currently used codeblock style, we could show something that resembles a terminal. Biggest concerns are not showing line numbers, using a dark background and a maximum line length (text wrap). Maybe also some kind of title bar, that resembles a terminal window title bar. Easily embedding colored bash output would need a bit of research, but I think it's be doable. Ideally coloring could be automated, but manual tweaking to add colors would be good enough for me.

For embedding just commands, I would like a more minimal style with just dark background and a $ prompt. This would mostly serve as an easy way to copy commands.

Existing work Example implementation for Rogue highlighting is described here

Additional context This could be styled based on the Elementary terminal, obviously. I would skip the tab bar and most of title bar icons. The colors used by default could be exposed through simple css classes.