Bash with $ at front.

[minhperry]

Is it possible to use Chroma with Bash while having a $ at front? This would make it easier to identify that it's a shell command, while also can just press copy and copy the command without the $.

[imfing]

it's possible to override the behavior for a given language using Hugo codeblock render hooks

in this case you could define a bash/shell hook to remove the dollar sign from the body while still displaying the sign with CSS

and copy it won't include the dollar sign then

[minhperry]

From what I can see, the code highlighting is solely dependant on this https://github.com/imfing/hextra/blob/main/layouts/partials/components/codeblock.html#L10C3-L10C55. Do I just copy it over under the right path and redefine myself with additional if clauses?

[minhperry]

Maybe not, that wouldnt work since the highlight function is fully reponsible for the whole html block

[imfing]

Maybe not, that wouldnt work since the highlight function is fully reponsible for the whole html block

yeah, it's not trivial to add custom processing logics there which would require removing the trailing dollar signs for each line and add back while displaying them.

an alternative approach i could think of is to add a custom Javascript file to handle this which might be easier

[minhperry]

The compiled html has this structure:

<pre ...>
    <code class="language-bash" ...>
        <span class="line">Each line has a span</span>
    </code>
</pre>

I can inject a $ with CSS by simply using ::before:

code.language-bash>span.line::before { /*for the light theme*/
    content: "$";
    margin-right: 0.5rem;
    font-weight: bold;
    color: rgb(189, 176, 0);
}

.dark code.language-bash>span.line::before { /*for the dark theme*/
    color: rgb(255, 241, 46);
}

[minhperry]

End result while trying to select, the $ is not being treated as text in the DOM.

[imfing]

thanks for sharing the solution, this looks good.