Add Zig syntax highlighting?

Site Feedback
1

You can insert code snippets into posts with code highlighting, by language. For example:

.home {
  display: flex;
  width: 20%;
}

This is done though the highlight.js library. AFAIK, highlight.js isn’t accepting new languages, but is there any way to add a custom grammar ourselves?

1 Like
2

You can use C syntax highlighting with adding a ‘c’ after quotes (```c), for example:

std = @import("std");

pub fn main() void {
    const v1 = 10;
}
1 Like
3

Yeah, there’s alternatives, and on Discord I think most use either rs or something like that.

const std = @import("std");

pub fn main() void {
    const v1 = 10;
}

Of course, in both cases, some of the syntax is recognized “wrong”.

Aside from that, I think the colors themselves should be tweaked, lol.

4

I agree this would be very nice and helpful for the forum. I’m looking into it. Indeed Discourse uses highlight.js but seems not to keep up with the latest version, so any Zig syntax plugin would have to match the version Discourse is using. I found a Discourse theme plugin that adds syntax highlighting for Jai and separately found a Zig highlight.js module, so maybe melding these two could work.

5

I’m please to announce that Zig syntax highlighting is now working. I manually merged and tweaked the Zig Highlight.js code and the Jai Discourse theme component into a new component GitHub - jecolon/discourse-highlightjs-zig: Discourse theme component to add Highlight.js syntax highlighting for Zig. . Just add zig after the triple backticks. Here’s a sample:

// Top-level declarations are order-independent:
const print = std.debug.print;
const std = @import("std");
const os = std.os;
const assert = std.debug.assert;

/// Doc comment
//! Container comment

pub fn main() void {
    // integers
    const one_plus_one: i32 = 1 + 1;
    print("1 + 1 = {}\n", .{one_plus_one});

    // floats
    const seven_div_three: f32 = 7.0 / 3.0;
    print("7.0 / 3.0 = {}\n", .{seven_div_three});

    // boolean
    print("{}\n{}\n{}\n", .{
        true and false,
        true or false,
        !true,
    });

    // optional
    var optional_value: ?[]const u8 = null;
    assert(optional_value == null);

    print("\noptional 1\ntype: {}\nvalue: {?s}\n", .{
        @TypeOf(optional_value), optional_value,
    });

    optional_value = "hi";
    assert(optional_value != null);

    print("\noptional 2\ntype: {}\nvalue: {?s}\n", .{
        @TypeOf(optional_value), optional_value,
    });

    // error union
    var number_or_error: anyerror!i32 = error.ArgNotFound;

    print("\nerror union 1\ntype: {}\nvalue: {!}\n", .{
        @TypeOf(number_or_error), number_or_error, });

    number_or_error = 1234;

    print("\nerror union 2\ntype: {}\nvalue: {!}\n", .{
        @TypeOf(number_or_error), number_or_error,
    });
}

I tried to match the colors from ziglang.org as closely as possible.

15 Likes
6

ahh that was one satisfying page reload

1 Like