Syntax highlighting is hard but luckily Jekyll makes use of Liquid Tags and Rouge to simplify it for you.

One of the cool things is I can write pure markdown for these blog posts, append a language option to the triple backticks and set the highlighting:

```csharp
// Code here
```

The only issue is that the defaults look terrible:

So let’s fix that.

Other solutions

I tried a whole heap of solutions to get this working in a nice way, including but not limited to:

• Writing my own Ruby plugin to render differently
• Manually tweaking the syntax.css file I use for highlighting
• Installing bloody Rust to try and make use of kramdown Tree Sitter
• Giving up and going to bed.

None of these actually came out looking anything close to what Visual Studio shows you, which is mostly a limitation of the Rouge CSharp lexer.

I don’t, and won’t, complain about people providing solutions to problems for free in the open source world. I can’t thank people enough for doing it because the modern internet wouldn’t be the same without it.

That said, it didn’t work for me. Time to fix it.

The final solution

I relented and asked ChatGPT what I should do in this situation who presented The Chosen One™:

We’re going to be making use of Prism.js instead, which looks significantly better. In a common .html file for your blog include the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!--language support-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csharp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>

Next find a good theme that you like here. I personally chose VS Code Dark.

Download that css and place it into a .css file inside your assets/css folder. Reference the new css file in your common file above like so:

<link rel="stylesheet" href="/assets/css/prismjs-vs.css" />

And finally, in a file exclusively used by your posts, add this to the bottom of the file before the </html> tag:

  <script>
    document.addEventListener("DOMContentLoaded", function () {
        Prism.highlightAll();
    });
  </script>

and there we go! Here’s the newly highlighted code above, but looking as close as I could possibly get it to Visual Studio:

namespace AzureKeyVaultEmulator.Shared.Constants
{
    public class AspireConstants
    {
        public const string EmulatorServiceName = "keyVaultEmulatorApi";
    }
}

namespace AzureKeyVaultEmulator.IntegrationTests.SetupHelper
{
    public static void ExampleReference()
    {
        var referencedString = AspireConstants.EmulatorServiceName;
    }
}

and another example of a method block with various keywords:

public sealed class TestingFixture : IAsyncLifetime
{
    private DistributedApplication? _app;
    private ResourceNotificationService? _notificationService;

    public async Task InitializeAsync()
    {
        var builder = await DistributedApplicationTestingBuilder.CreateAsync<Projects.AzureKeyVaultEmulator_AppHost>();

        builder.Services.ConfigureHttpClientDefaults(c =>
        {
            c.AddStandardResilienceHandler();
        });

        _app = await builder.BuildAsync();

        _notificationService = _app.Services.GetService<ResourceNotificationService>();

        await _app.StartAsync();
    }

    public async Task DisposeAsync()
    {
        if (_app is not null)
            await _app.DisposeAsync().ConfigureAwait(false);
    }
}