Browser syntax highlighting options?

https://highlightjs.org/ is very popular, is used for this forum, and has Erlang support - but the highlighting isn’t very satisfying compared to the syntax highlighting in code editors (at least for vim, emacs, and JetBrains). Compare vim:

vimerlang

vs. highlightjs:

do(List) ->
    List2 = cut(List),
    AccInit = {[], [], [], [], []},
    {L1, L2, L3, L4, L5} = lists:foldl(
        fun(E, Acc) ->
            P = rand:uniform(5),
            L = element(P, Acc),
            setelement(P, Acc, [E | L])
        end,
        AccInit,
        List2
    ),
    lists:flatten([L1, L2, L3, L4, L5]).
cut(List) ->
    Rand = rand:uniform(length(List)),
    {A, B} = lists:split(Rand, List),
    B ++ A.

It’s not that the color scheme has the same color for variables as for atoms and BIFs, but that the parser doesn’t distinguish them, so the color scheme can’t distinguish them either. You can see the parsing by opening your browser’s developer tools on that code block.

Has anyone improved on highlightjs’s support, or come up with an alternative? Strictly speaking, vim can render to HTML and this could be used for code examples, but that’s a lot more work than adding a script tag to your header and only making sure that code examples are in a discoverable div.

2 Likes

I suspect there’s something we can do to improve the situation on this forum. That said, I believe I remember doing a PR for rebar3.org that uses prism.js. Noting this as your question seems general as well as related to the forums. This is also used on erlang.org :slight_smile:

Thanks! This is much more to my taste:

prismerlang

1 Like