how to duplicate the color in shellsession?

[simkimsia]

This is an actual shell

I am trying to replicate it using prismjs.

I use tomorrow-night as theme and v1.26.0 and added plugins line-number, line-highlight, and commandline
and languages such as

1. shellsession
2. bash

this is my code snippet

<pre class="command-line lang-shellsession" data-user="alice" data-host="localhost"
  data-output="2-5"><code>docker-compose -f local.yml up
web_1  | Going to use psycopg2 to connect to postgres
web_1  | Op error: SCRAM authentication requires libpq version 10 or above
web_1  |
web_1  | Waiting for PostgreSQL to become available...</code></pre>

This is how it looks like

As you can see, the web_1 | is greyed. How do I make it orange color as well?

I have seen this #2849 not sure if there's a specific token to set specific shell colors for output

[RunDevelopment]

The problem with terminal output is that it doesn't follow any structure. Any program can output anything it wants, so there is nothing for Prism to highlight. Sure, we as clever humans can see some structure, but it's still very much unstructured text. The only reason you get some color in the terminal is that the program does the highlighting itself.

The easiest solution might be to manually highlight those parts. You can use Keep Markup to keep existing markup.

<pre class="command-line lang-shellsession" data-user="alice" data-host="localhost"
  data-output="2-5"><code>docker-compose -f local.yml up
<span class="special-class">web_1  |</span> Going to use psycopg2 to connect to postgres
<span class="special-class">web_1  |</span> Op error: SCRAM authentication requires libpq version 10 or above
<span class="special-class">web_1  |</span>
<span class="special-class">web_1  |</span> Waiting for PostgreSQL to become available...</code></pre>

Just change special-class to something Tomorrow Night knows or add some custom CSS.

[simkimsia]

Just change special-class to something Tomorrow Night knows or add some custom CSS.

Not too sure what you mean by change special-class or add custom CSS in the context of this situation

What i did try is to use inline and use <mark> but none of them work

first two lines i don't use mark but 3rd line i did.

<pre class="command-line lang-shellsession" data-user="alice" data-host="localhost"
  data-output="2-5"><code>docker-compose -f local.yml up
<span style="color:orange;">web_1  |</span> Going to use psycopg2 to connect to postgres
<span style="color:orange;">web_1  |</span> Op error: SCRAM authentication requires libpq version 10 or above
<mark><span style="color:orange;">web_1  |</span></mark>
<span class="special-class">web_1  |</span> Waiting for PostgreSQL to become available...</code></pre>

I feel that i probably lacking some understanding about prismjs. i tried google prismjs special-class but nothing looks right

[RunDevelopment]

special-class was just a placeholder I used. I just wanted to illustrate the solution. You can name this class anyway you like, the name doesn't matter. The idea is to have a custom CSS rule that gives that class a nice color. E.g:

.special-class { color: red; }

The other idea was to use a class name that Tomorrow Night supports instead of a class name for custom styles. E.g. if you use the class name string, you'll get a green color. This isn't how themes are supposed to be used, but it's quick and easy, and it allows you to easily change themes.

Here is a small example project showcasing what I mean. (Both the Command Line and Keep Markup plugin are active.)

[simkimsia]

ok thank you for producing the example project. i got it to work.

The issue i have is i got confused by this line in the Keep Markup plugin documentation https://prismjs.com/plugins/keep-markup/

You have nothing to do. The plugin is active by default. With this plugin loaded, all markup inside code will be kept.

I think this is totally not true. at least not true of v1.26.0. I definitely needed to check the checkbox before downloading.

Am I right? if so, can i send a pull request to change the documentation and how?

[RunDevelopment]

Well, our download page is that the web frontend for a bundler. If you don't include the plugin, it can't be active.

"Active by default" simply means that you don't have to opt-in with a keep-markup class (or similar) like you'd have to with many of our other plugins (e.g. Line numbers).

[simkimsia]

Oh i see. i didn't realize that's what active by default means. Would be good if that's more explicit for beginners like me.