is it possible to use highlight.js or prism.js with this?

[spinkney]

This theme is great! I want to use this theme but with a language (Stan) that isn't included in doxygen code highlighting. I've tried to use highlight.js with this following https://coderwall.com/p/ydwz3a/use-highlight-js-for-syntax-highlighting-in-doxygen-generated-documentation but all the line endings are removed so it looks like one long string.

Is there a way to allow these highlighters to highlight the code blocks (while still using this css theme for the blocks?)

[jothepro]

That's a good question. I haven't tried to do that yet. Pls share your knowledge if you where able to make it work! You may want to have a look at L947 and ongoing, that's where I made some adjustments to the code formatting that may interfere with the styling of highlight.js. Maybe this or this is causing the problems? I'm just guessing though... 🤔

[spinkney]

Thanks! I did fix the line squashing stuff! The only thing remaining is that doxygen has a bunch of stuff in the bottom of the fragment that is unwanted. If there are any js experts out there who can help, here's the js that I'm currently using

    $(function() {
        $(".fragment").each(function(i,node) {
          var $node = $(node);
          $node.html("<pre><code class='stan'>" + 
                     $node.text()+"</code></pre>");
                     hljs.highlightAll(node);
    });

And that results in getting something like this where I've circled the issue

In the html this is caused by the last line in

I've attempted to remove this by the following js but it's unfortunately not working

$(function() {
        $(".fragment").each(function(i,node) {
            var without_last = $(this).clone();
            without_last.children().last().remove();
          var $node = $(without_last);
          $node.html("<pre><code class='stan'>" + 
                     $node.text()+"</code></pre>");
                     hljs.highlightAll(node);
    });
});

[spinkney]

FYI you can see the current site at https://spinkney.github.io/helpful_stan_functions/group__clayton.html which is using the awesome-css theme!

[dmadison]

I am not a web developer by any measure but I had some free time to poke at this.

Try this snippet:

$(function() {
        $(".fragment").each(function(i,node) {
          var $node = $(node);
          $node.children(":not(.line)").remove();
          $node.html("<pre><code class='stan'>" + 
                     $node.text()+"</code></pre>");
                     hljs.highlightAll(node);
    });
});

It adds the one line $node.children(":not(.line)").remove();, which removes any children of the current node that do not have the .line class.

Bear in mind that while the code highlights properly it also gets rid of the Doxygen links inside the code block.

[spinkney]

@dmadison thanks! This does keep all the space at the end. Do you know if there's a way to remove that extra spacing (also the extra space at the top)?

[spinkney]

Well with the help of that above script and using trim() plus removing < and > I get the full syntax highlighting to work! Plus added a line number plugin for highlight.js.

    $(function() {
            $(".fragment").each(function(i,node) {
            var $node = $(node);
            $node.children(":not(.line)").remove();
            $node.html("<pre><code class='stan'>" + $node.text().trim().replaceAll("\<", "&lt;").replaceAll("\>", "&gt;") + "</code></pre>");
             hljs.highlightAll(node);
             hljs.initLineNumbersOnLoad(node);  
            });
        });