1

Please bear with me, as I'm a devops/systems person and definitely not a web developer in the slightest.

I currently have a static Jekyll blog running on Github Pages and although the theme I'm using (Carte Noire) has nice looking code blocks and highlighting, I am really looking for a block that I can use to show terminal commands and their output, essentially similar to what Chef Docs use in their tutorials to show the commands their running: https://learn.chef.io/learn-the-basics/ubuntu/configure-a-resource/

I can only seem to find js terminal emulators, where all I want is a way to display terminal commands w/ highlighting in a terminal-like window. Also, preferably something with horizontal scrolling so the text does not wrap around.

John Kelly
  • 13
  • 4
  • 1
    Welcome to Stack Overflow."Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, [describe the problem](http://meta.stackoverflow.com/questions/254393) and what has been done so far to solve it." – the Tin Man Jul 22 '15 at 20:48

4 Answers4

1

Check out asciinema. You should be able to embed that in your Jekyll blog as per the docs.

Example: asciicast

Travis
  • 2,579
  • 18
  • 19
0

You could start with something like prism.js and maybe even write a plugin for it if there isn't one already. The chef website is really neat.

CJW
  • 332
  • 1
  • 14
  • Thanks, it looks like Prism has horizontal scrolling but nothing to display the "current path" or file for each block. Unfortunately writing a prism plugin is a little above my abilities – John Kelly Jul 22 '15 at 20:21
  • Here is a nice one http://codepen.io/tommymcdonald/pen/FiJcI which is in the style of a mac terminal. – CJW Jul 23 '15 at 13:51
0

Jekyll already has support for syntax highlighters called Pygments and Rouge. These are installed and Pygments is the default.

The benefit of this compared to other JS implementations is that your syntax is highlighted at compile time, so when the end user sees it they see HTML + CSS. Without the need for using JS your website will also nicely work for those no-script users.

The documentation for that is here. If you choose to use pygments you'll need Python, else you can just go for Rouge which is written in Ruby. If you don't need a ton of language support (i.e since I assume you'll be doing terminal commands most of the time and don't need the other language supports, Rouge should be sufficient)

Note that you will need the syntax.css style sheet as described here. In the past it is too easy to miss out on adding that to the HTML and not getting the desired results. After which is just tweaking those settings to match your website's style.

matrixanomaly
  • 6,627
  • 2
  • 35
  • 58
  • Ah, I was able to get Pygments working and found [this answer](http://stackoverflow.com/questions/11093233/how-to-support-scrolling-when-using-pygments-with-jekyll/23393920#23393920) showing how to get scrolling working with Pygments in Jekyll. Now I just need to figure out how to add a "bar" up top displaying the file or directory the commands or code below belong in. – John Kelly Jul 23 '15 at 23:23
  • @JohnKelly that's more of a CSS and styling issue than Jekyll unfortunately. I've tried doing that on my site too and it didn't work out the way I wanted. Alternatively you can try just using 3rd party hosts like github gists, or ideone or pastebins. – matrixanomaly Jul 23 '15 at 23:27
0

If you're interested in preserving text colors which are context specific, you can use Gnome terminal (and possibly other terminals as well) to copy terminal text as HTML and then paste this HTML into your blog post. The HTML should preserve text colors and can be configured to have horizontal scrolling as you've mentioned.

For a more detailed explanation, you can check out this blog post.

Tim
  • 76
  • 2
  • 4