Add shell prompt support

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

assets/sass/code.scss

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