Add shell prompt support

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/code.scss

@@ -5,413 +5,417 @@
   padding: 1rem;
   border-radius: 0.5rem;
   overflow-x: auto;
-}
-
-/* Error */
-.chroma .err {
-  color: var(--accent-500);
-}
-
-/* LineLink */
-.chroma .lnlinks {
-  outline: none;
-  text-decoration: none;
-  color: inherit;
-}
-
-/* LineTableTD */
-.chroma .lntd {
-  vertical-align: top;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-/* LineTable */
-.chroma .lntable {
-  border-spacing: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-/* LineHighlight */
-.chroma .hl {
-  background-color: var(--background-200);
-}
-
-/* LineNumbersTable */
-.chroma .lnt {
-  white-space: pre;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-}
-
-/* LineNumbers */
-.chroma .ln {
-  white-space: pre;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-}
-
-/* Line */
-.chroma .line {
-  display: flex;
-}
-
-/* Keyword */
-.chroma .k {
-  color: var(--secondary-600);
-}
-
-/* KeywordConstant */
-.chroma .kc {
-  color: var(--primary-500);
-}
-
-/* KeywordDeclaration */
-.chroma .kd {
-  color: var(--secondary-600);
-}
-
-/* KeywordNamespace */
-.chroma .kn {
-  color: var(--secondary-600);
-}
-
-/* KeywordPseudo */
-.chroma .kp {
-  color: var(--primary-500);
-}
-
-/* KeywordReserved */
-.chroma .kr {
-  color: var(--secondary-600);
-}
-
-/* KeywordType */
-.chroma .kt {
-  color: var(--secondary-600);
-}
-
-/* Name */
-.chroma .nc {
-  color: var(--accent-600);
-  font-weight: bold;
-}
-
-/* NameConstant */
-.chroma .no {
-  color: var(--primary-500);
-  font-weight: bold;
-}
-
-/* NameDecorator */
-.chroma .nd {
-  color: var(--secondary-700);
-  font-weight: bold;
-}
-
-/* NameEntity */
-.chroma .ni {
-  color: var(--accent-600);
-}
-
-/* NameException */
-.chroma .ne {
-  color: var(--accent-600);
-  font-weight: bold;
-}
-
-/* NameLabel */
-.chroma .nl {
-  color: var(--primary-500);
-  font-weight: bold;
-}
-
-/* NameNamespace */
-.chroma .nn {
-  color: var(--secondary-600);
-}
-
-/* NameProperty */
-.chroma .py {
-  color: var(--primary-500);
-}
-
-/* NameTag */
-.chroma .nt {
-  color: var(--primary-600);
-}
-
-/* NameVariable */
-.chroma .nv {
-  color: var(--primary-500);
-}
-
-/* NameVariableClass */
-.chroma .vc {
-  color: var(--primary-500);
-}
-
-/* NameVariableGlobal */
-.chroma .vg {
-  color: var(--primary-500);
-}
-
-/* NameVariableInstance */
-.chroma .vi {
-  color: var(--primary-500);
-}
-
-/* NameVariableMagic */
-.chroma .vm {
-  color: var(--primary-500);
-}
-
-/* NameFunction */
-.chroma .nf {
-  color: var(--secondary-700);
-  font-weight: bold;
-}
-
-/* NameFunctionMagic */
-.chroma .fm {
-  color: var(--secondary-700);
-  font-weight: bold;
-}
-
-/* Literal */
-.chroma .l {
-  color: var(--primary-600);
-}
-
-/* LiteralDate */
-.chroma .ld {
-  color: var(--primary-500);
-}
-
-/* LiteralString */
-.chroma .s {
-  color: var(--primary-600);
-}
-
-/* LiteralStringAffix */
-.chroma .sa {
-  color: var(--primary-500);
-}
-
-/* LiteralStringBacktick */
-.chroma .sb {
-  color: var(--primary-600);
-}
-
-/* LiteralStringChar */
-.chroma .sc {
-  color: var(--primary-600);
-}
-
-/* LiteralStringDelimiter */
-.chroma .dl {
-  color: var(--primary-500);
-}
-
-/* LiteralStringDoc */
-.chroma .sd {
-  color: var(--primary-600);
-}
-
-/* LiteralStringDouble */
-.chroma .s2 {
-  color: var(--primary-600);
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  color: var(--primary-500);
-}
-
-/* LiteralStringHeredoc */
-.chroma .sh {
-  color: var(--primary-500);
-}
-
-/* LiteralStringInterpol */
-.chroma .si {
-  color: var(--primary-600);
-}
-
-/* LiteralStringOther */
-.chroma .sx {
-  color: var(--primary-600);
-}
-
-/* LiteralStringRegex */
-.chroma .sr {
-  color: var(--primary-500);
-}
-
-/* LiteralStringSingle */
-.chroma .s1 {
-  color: var(--primary-600);
-}
-
-/* LiteralStringSymbol */
-.chroma .ss {
-  color: var(--primary-600);
-}
-
-/* LiteralNumber */
-.chroma .m {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberBin */
-.chroma .mb {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberFloat */
-.chroma .mf {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberHex */
-.chroma .mh {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberInteger */
-.chroma .mi {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberIntegerLong */
-.chroma .il {
-  color: var(--primary-600);
-}
-
-/* LiteralNumberOct */
-.chroma .mo {
-  color: var(--primary-600);
-}
-
-/* Operator */
-.chroma .o {
-  color: var(--secondary-600);
-  font-weight: bold;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  color: var(--secondary-600);
-  font-weight: bold;
-}
-
-/* Comment */
-.chroma .c {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-style: italic;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-style: italic;
-}
-
-/* CommentMultiline */
-.chroma .cm {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-style: italic;
-}
-
-/* CommentSingle */
-.chroma .c1 {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-style: italic;
-}
-
-/* CommentSpecial */
-.chroma .cs {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-weight: bold;
-  font-style: italic;
-}
-
-/* CommentPreproc */
-.chroma .cp {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-weight: bold;
-  font-style: italic;
-}
-
-/* CommentPreprocFile */
-.chroma .cpf {
-  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  font-weight: bold;
-  font-style: italic;
-}
-
-/* GenericDeleted */
-.chroma .gd {
-  color: var(--accent-900);
-  background-color: var(--accent-300);
-}
-
-/* GenericEmph */
-.chroma .ge {
-  font-style: italic;
-}
-
-/* GenericError */
-.chroma .gr {
-  color: var(--accent-500);
-}
-
-/* GenericHeading */
-.chroma .gh {
-  color: var(--primary-500);
-  font-weight: bold;
-}
-
-/* GenericInserted */
-.chroma .gi {
-  color: var(--primary-800);
-  background-color: var(--primary-200);
-}
-
-/* GenericOutput */
-.chroma .go {
-  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
-}
-
-/* GenericPrompt */
-.chroma .gp {
-  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
-}
-
-/* GenericStrong */
-.chroma .gs {
-  font-weight: bold;
-}
-
-/* GenericSubheading */
-.chroma .gu {
-  color: var(--primary-500);
-}
-
-/* GenericTraceback */
-.chroma .gt {
-  color: var(--secondary-600);
-}
 
-/* GenericUnderline */
-.chroma .gl {
-  text-decoration: underline;
+  .line.prompt::before {
+    content: "$ ";
+  }
+
+  /* Error */
+  .err {
+    color: var(--accent-500);
+  }
+
+  /* LineLink */
+  .lnlinks {
+    outline: none;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  /* LineTableTD */
+  .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  /* LineTable */
+  .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  /* LineHighlight */
+  .hl {
+    background-color: var(--background-200);
+  }
+
+  /* LineNumbersTable */
+  .lnt {
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+  }
+
+  /* LineNumbers */
+  .ln {
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  }
+
+  /* Line */
+  .line {
+    display: flex;
+  }
+
+  /* Keyword */
+  .k {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordConstant */
+  .kc {
+    color: var(--primary-500);
+  }
+
+  /* KeywordDeclaration */
+  .kd {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordNamespace */
+  .kn {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordPseudo */
+  .kp {
+    color: var(--primary-500);
+  }
+
+  /* KeywordReserved */
+  .kr {
+    color: var(--secondary-600);
+  }
+
+  /* KeywordType */
+  .kt {
+    color: var(--secondary-600);
+  }
+
+  /* Name */
+  .nc {
+    color: var(--accent-600);
+    font-weight: bold;
+  }
+
+  /* NameConstant */
+  .no {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* NameDecorator */
+  .nd {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* NameEntity */
+  .ni {
+    color: var(--accent-600);
+  }
+
+  /* NameException */
+  .ne {
+    color: var(--accent-600);
+    font-weight: bold;
+  }
+
+  /* NameLabel */
+  .nl {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* NameNamespace */
+  .nn {
+    color: var(--secondary-600);
+  }
+
+  /* NameProperty */
+  .py {
+    color: var(--primary-500);
+  }
+
+  /* NameTag */
+  .nt {
+    color: var(--primary-600);
+  }
+
+  /* NameVariable */
+  .nv {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableClass */
+  .vc {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableGlobal */
+  .vg {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableInstance */
+  .vi {
+    color: var(--primary-500);
+  }
+
+  /* NameVariableMagic */
+  .vm {
+    color: var(--primary-500);
+  }
+
+  /* NameFunction */
+  .nf {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* NameFunctionMagic */
+  .fm {
+    color: var(--secondary-700);
+    font-weight: bold;
+  }
+
+  /* Literal */
+  .l {
+    color: var(--primary-600);
+  }
+
+  /* LiteralDate */
+  .ld {
+    color: var(--primary-500);
+  }
+
+  /* LiteralString */
+  .s {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringAffix */
+  .sa {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringBacktick */
+  .sb {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringChar */
+  .sc {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringDelimiter */
+  .dl {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringDoc */
+  .sd {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringDouble */
+  .s2 {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringEscape */
+  .se {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringHeredoc */
+  .sh {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringInterpol */
+  .si {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringOther */
+  .sx {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringRegex */
+  .sr {
+    color: var(--primary-500);
+  }
+
+  /* LiteralStringSingle */
+  .s1 {
+    color: var(--primary-600);
+  }
+
+  /* LiteralStringSymbol */
+  .ss {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumber */
+  .m {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberBin */
+  .mb {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberFloat */
+  .mf {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberHex */
+  .mh {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberInteger */
+  .mi {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberIntegerLong */
+  .il {
+    color: var(--primary-600);
+  }
+
+  /* LiteralNumberOct */
+  .mo {
+    color: var(--primary-600);
+  }
+
+  /* Operator */
+  .o {
+    color: var(--secondary-600);
+    font-weight: bold;
+  }
+
+  /* OperatorWord */
+  .ow {
+    color: var(--secondary-600);
+    font-weight: bold;
+  }
+
+  /* Comment */
+  .c {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentHashbang */
+  .ch {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentMultiline */
+  .cm {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentSingle */
+  .c1 {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-style: italic;
+  }
+
+  /* CommentSpecial */
+  .cs {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* CommentPreproc */
+  .cp {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* CommentPreprocFile */
+  .cpf {
+    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* GenericDeleted */
+  .gd {
+    color: var(--accent-900);
+    background-color: var(--accent-300);
+  }
+
+  /* GenericEmph */
+  .ge {
+    font-style: italic;
+  }
+
+  /* GenericError */
+  .gr {
+    color: var(--accent-500);
+  }
+
+  /* GenericHeading */
+  .gh {
+    color: var(--primary-500);
+    font-weight: bold;
+  }
+
+  /* GenericInserted */
+  .gi {
+    color: var(--primary-800);
+    background-color: var(--primary-200);
+  }
+
+  /* GenericOutput */
+  .go {
+    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+  }
+
+  /* GenericPrompt */
+  .gp {
+    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+  }
+
+  /* GenericStrong */
+  .gs {
+    font-weight: bold;
+  }
+
+  /* GenericSubheading */
+  .gu {
+    color: var(--primary-500);
+  }
+
+  /* GenericTraceback */
+  .gt {
+    color: var(--secondary-600);
+  }
+
+  /* GenericUnderline */
+  .gl {
+    text-decoration: underline;
+  }
 }

assets/sass/common.scss

@@ -59,6 +59,6 @@ p {
   margin: 1.5rem 0 1.5rem 0;
 }
 
-li:not(:last-child) {
-  margin-bottom: 0.5rem;
+li {
+  margin: 0.5rem 0 0.5rem 0;
 }

layouts/_default/_markup/render-codeblock-bash.html

@@ -0,0 +1,4 @@
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $pattern := `(?s)<span class="line"([^>]*)>(\s*<span[^>]*>)?\$ (.*?)(</span>\s*)</span>` }}
+{{ $processed := replaceRE $pattern `<span class="line prompt"$1>$2$3$4</span>` $result.Wrapped }}
+{{ $processed | safeHTML }}