Code syntax highlighting on XenForo

Introduction

I wanted to improve my experience with code syntax highlighting notably to support this article. XenForo is using Prism javascript library to perform syntax highlighting client side.

Requirements

I notably needed to support Kotlin language and deploy a syntax colour theme that's readable on our dark website.

Solutions

Additional language support

Adding Kotlin support was fairly easy following this guide. I've actually did it as an AddOn which I may get around publishing at some point.

Prism theme

While changing Prism theme is still quite straight forward you can't just copy over a Prism theme definition. Here again XenForo forums were helpful and I could implement that solution as an AddOn that could be published.

XenForo Code AddOn

While investigating those issues I came across that popular XenForo Code AddOn and adopted it too. It's also free and open source.

Open issues

Kotlin parsing issue

As shown below Kotlin parsing is broken following type = "*/*" as subsequent single line comments are parsed as code:

Kotlin:
/**
* That comment works.
*/
private fun someFunctionName() {
    val intent = Intent(Intent.ACTION_OPEN_DOCUMENT).apply {
        addCategory(Intent.CATEGORY_OPENABLE)
        type = "*/*" //That comment still works
          // The comment and all the following ones are broken
          // Yes definitely broken
        )
    }
}

I could not reproduce that issue on Prism test page. Therefore I'm assuming this will get fixed whenever XenForo update their version of Prism. XenForo 2.2.4 is using Prism 1.17.1 whereas the latest was Prism 1.23.0. It looks like XenForo is using a modified version of Prism so I did not try to upgrade it myself.

Publish AddOns

I should publish the resulting couple of AddOns at some point even though they have a rather trivial implementation.

Resources

 
Last edited:
Back
Top