Syntax Highlighting Solution

Web Resources
1

Hello Unity.

I have two extensions in Chrome that let me add custom styles and custom javascript to a web page. With just a few lines of code, I added full syntax highlighting to the documentation pages. I think this should be something integrated by you guys already as seeing bare code is a bit difficult to read. I’ve provided the additions below.

$(function ()
{
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js", function ()
    {
        document.querySelectorAll("pre code").forEach(item =>
        {
            c.classList.add("cs");
            hljs.highlightBlock(item);
        });
    });
});

.hljs {
    display:block;
    overflow-x:auto;
    padding:.5em;
    background:#F0F0F0
}
.hljs, .hljs-subst {
    color:#444
}
.hljs-comment {
    color:#888888
}
.hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
    font-weight:bold
}
.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
    color:#880000
}
.hljs-title, .hljs-section {
    color:#880000;
    font-weight:bold
}
.hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo {
    color:#BC6060
}
.hljs-literal {
    color:#78A960
}
.hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
    color:#397300
}
.hljs-meta {
    color:#1f7199
}
.hljs-meta-string {
    color:#4d99bf
}
.hljs-emphasis {
    font-style:italic
}
.hljs-strong {
    font-weight:bold
}
2

Hello @Fedora_Dev

Thanks for this, it’s really appreciated! We’re actually working on a new documentation website which will be coming soon and will include things like an updated design with syntax highlighting.

I’ll pass your suggestion onto our development team to see if this is something we could improve in the meantime while we’re between websites.

1 Like