Search code examples
jekyllkramdown

Have different style apply to different syntax highlighter languages

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>
Solution

  • 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.