aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--_includes/shell.html22
-rw-r--r--_posts/2022-03-21-shell.md52
-rw-r--r--assets/css/main.css1
-rw-r--r--assets/css/shell.css41
-rw-r--r--index.md1
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;
+}
diff --git a/index.md b/index.md
index 0977df0..ab0384f 100644
--- a/index.md
+++ b/index.md
@@ -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 }}