NodeBB/nodebb-plugin-markdown

Suggestion: Include more languages in highlight.js

Choonster opened this issue · 11 comments

Choonster commented

The build of highlight.js used in the current version of this plugin only includes the default languages (minus Device Tree).

I'd like to suggest including more languages, possibly all of them. The two I'd most like to see are Lua and Go.

BenLubar commented

Keep in mind that the full hljs with all languages is about a megabyte, so if possible, it'd be beneficial to do that server-side and just send the result to the client.

julianlam commented

Hm... some history behind the plugin, I actually did used to do the syntax highlighting on the server-side.

After testing with two different libraries, I ended up switching it to client side because:

  • One library would throw errors on some syntax, or hang indefinitely on fail
  • Another library was synchronous and would take far too long to render a post (a particularly long post took multiple seconds to render)

In the end, offloading the work to the client was better as my priority was making NodeBB run as few synchronous operations as possible. With a single core, if you're spending time doing synchronous ops, everybody else is queued!

Telokis commented

I'd also like to see more languages available. Maybe there could be some kind of configuration done in the admin panel so that I can chose whether or not I need a specific language.
Or, even better, some kind of dynamic searching of the requested language, using some kind of API.

pitaj commented

It might be possible include extra languages by including external cdn scripts in your custom HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/languages/lua.min.js"></script>

A list of them is here: https://cdnjs.com/libraries/highlight.js/

Telokis commented

Alright, thanks. That may seem stupid but how do I include custom HTML into NodeBB?

pitaj commented

ACP -> Appearance -> Custom HTML & CSS

You can also just search "HTML" with the ACP search box.

Telokis commented

I just tried but it doesn't seem to work. When I inspect the <head> I can see the script but it doesn't recognize lua as a valid language.

pitaj commented

Are there any errors in the JS console? It could be that hljs is loaded after the language-specific script.

Telokis commented

Yes, that's the issue. Any way to put at the end of <body> instead?

pitaj commented

Try putting the following in your custom HTML:

<script>
$(document).ready(function () {
  require(['highlight'], function (hljs) {
    window.hljs = hljs;
    require([
      'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/languages/lua.min.js',
      // add other language script urls here
    ]);
  });
});
</script>
  • 👍1
Telokis commented

Alright, that works. I didn't know you used requirejs. That's nice. I'm pleased with this solution, thank you very much for your time!