diff options
| -rw-r--r-- | _includes/shell.html | 22 | ||||
| -rw-r--r-- | _posts/2022-03-21-shell.md | 52 | ||||
| -rw-r--r-- | assets/css/main.css | 1 | ||||
| -rw-r--r-- | assets/css/shell.css | 41 | ||||
| -rw-r--r-- | index.md | 1 |
5 files changed, 117 insertions, 0 deletions
diff --git a/_includes/shell.html b/_includes/shell.html new file mode 100644 index 0000000..40ed1c8 --- /dev/null +++ b/_includes/shell.html @@ -0,0 +1,22 @@ +<div class="shell"> +{% assign cmd = include.cmd | newline_to_br | strip_newlines %} +{% assign br = '<br />' %} +{% assign br_len = br | size %} +{% assign prefix = cmd | slice: 0,br_len %} +{% if prefix == br %} + {% assign cmd = cmd | remove_first: br %} +{% endif %} +{% assign cmd = cmd | split: br %} +{% assign new_cmd = '' | split: '' %} +{% for line in cmd %} + {% capture new_line %}{{ line }} +{% endcapture %} + {% assign new_cmd = new_cmd | push: new_line %} +{% endfor %} +{% assign cmd = new_cmd %} +{% assign cmd = cmd | join: '' %} +<div> + <pre class="shell-mark">$</pre><pre class="shell-cmd">{{ cmd }}</pre> +</div> +<pre class="shell-out">{{ include.out }}</pre> +</div> diff --git a/_posts/2022-03-21-shell.md b/_posts/2022-03-21-shell.md new file mode 100644 index 0000000..1f8f56a --- /dev/null +++ b/_posts/2022-03-21-shell.md @@ -0,0 +1,52 @@ +--- +title: Shell commands +excerpt: > + Pretty formatting for shell commands and their outputs. +--- +It's easy to style shell commands and their outputs. +Here's a one-line command and a one-line output. + +{% include shell.html cmd='echo 1' out='1' %} + +You can pass multiple commands and multi-line output to the include as well: + +{% include shell.html cmd='echo 1 +echo 2' out='1 +2' %} + +However, it is recommended that you `capture` multi-line commands and outputs +into variables and pass them. +This is mostly because Liquid doesn't like backslashes too much. + +{% capture cmd1 %} +touch test.txt && \ + echo 123 >> test.txt && \ + echo 456 >> test.txt && \ + cat test.txt +{% endcapture %} +{% capture out1 %} +123 +456 +{% endcapture %} + +{% include shell.html cmd=cmd1 out=out1 %} + +You can display multiple commands one after another. + +{% include shell.html cmd="printf 'Hello\n'" out='Hello' %} +{% include shell.html cmd="printf 'World\n'" out='World' %} + +Only the last one will have a bottom margin. + +Also, here's a really long command with a really long output: + +{% capture cmd1 %} +printf '%s\n' 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' +{% endcapture %} +{% capture out1 %} +AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +{% endcapture %} + +{% include shell.html cmd=cmd1 out=out1 %} + +This is ugly though, so please don't do that. diff --git a/assets/css/main.css b/assets/css/main.css index 68c6414..b84b432 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2,5 +2,6 @@ @import 'common/footer.css'; @import 'common/posts.css'; @import 'common/utils.css'; +@import 'shell.css'; @import 'snippets.css'; @import 'syntax.css'; diff --git a/assets/css/shell.css b/assets/css/shell.css new file mode 100644 index 0000000..9ddcf67 --- /dev/null +++ b/assets/css/shell.css @@ -0,0 +1,41 @@ +.shell pre { + /* Reset Bootstrap's settings for <pre>. */ + margin: 0; + border-radius: 0; +} + +/* WTF is this? I somehow came up with it, but I hope there's a better way. + * 10.5px is the standard bottom margin for <pre>s. */ +.shell { + margin-bottom: 10.5px; +} +.shell + .shell { + margin-top: -10.5px; +} + +.shell > div { + display: flex; +} +.shell-cmd { + flex: 2; +} + +/* Styling, yo. */ +.shell-cmd, .shell-mark { + border-width: 0 0 medium 0; + background-color: #ececec; + /* Color the border in the color of grass. */ + border-color: #008567; +} +.shell-out { + border-width: 0 0 thin 0; +} +.shell-cmd { + padding-left: 0; +} +.shell-mark { + font-weight: bold; + /* I like colors. */ + color: #20004b; + user-select: none; +} @@ -20,6 +20,7 @@ I use it for * [Post w/ MathJax formulas]({{ site.baseurl }}{% post_url 2021-04-08-mathjax %}) * [Post w/ code snippets]({{ site.baseurl }}{% post_url 2021-04-09-snippets %}) * [Post w/ _collapsible_ code snippets]({{ site.baseurl }}{% post_url 2021-04-10-collapsible %}) +* [Post w/ shell commands]({{ site.baseurl }}{% post_url 2022-03-21-shell %}) [Jekyll]: https://jekyllrb.com/ [egor-tensin.github.io]: {{ page.base }} |