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);
}
}