Have different style apply to different syntax highlighter languages

Question

I have a jekyll site where I post a lot of shell examples in code blocks. I struggle to visually delineate between the script/shell commands and their output of the commmands.

Generated html:

<pre><code class="language-powershell">
function DemoCode {
    return 'rab', 'oof'
}
DemoCode

rab
oof
</code></pre>

In this example, the last two lines need to be obviously the output from the first 4 lines.

Markdown is currently just normal triple-backtick with a powershell tag:

```powershell
function DemoCode {
    return 'rab', 'oof'
}

DemoCode

rab
oof
```

I'd prefer to avoid splitting it into a second code block. Wordpress let me do this with inline style tags, but it was a pig of a job.

This isn't a good solution for me but I could have a separate code block with the 'plaintext' tag to the syntax highlighter:

The best I have so far is indeed with separate code blocks. If I apply the 'plaintext' tag to rouge, then at least I don't get syntax highlighting, which helps. But the generated html still inherits the same CSS from .highlight.

Markdown:

```powershell
function Write-Stuff {
    Write-Output $Stuff
}
```

```plaintext
Output I would like with different color and background-color
```

I still need that to inherit different CSS, though. Generated HTML:

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#this is formatted with md code block and powershell tag</span>
</code></pre></div></div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#formatted with md code block and plaintext tag
</code></pre></div></div>

That's a question about visual language. Graphic design matters, and two separate code blocks is not a solution. A partial solution would be if the second code block was visually distinguished by, e.g., separate colour, but i can't see a way to achieve that in jekyll, since the html class is generated on commit to github pages. — FSCKur
I expect what I want isn't achievable. In order of preference: - output is inside main fenced block, with no highlighting and with different bg / text color - output is in fenced block within main block, no highlighting, different color - output is in separate code block below, different color — FSCKur

gettalong gettalong · Accepted Answer · 2017-10-16T04:11:52

If you want to go with separate code blocks, you can use a block IAL to set a custom class on the syntax highlighted blocks:

{:.my-custom-class}
``` powershell
function Write-Stuff {
    Write-Output $Stuff
    }
```

This would insert the my-custom-class right next to language-powershell highlighter-rouge, allowing you to customize your CSS appropriately.

As for avoiding splitting the block: That is not possible with kramdown. However, you could implement a custom syntax highlighter that knows how to do this.

Have different style apply to different syntax highlighter languages

1 Answers