How to use client side highlighting?

support
1

I have pygment installed on the server, but it renders poorly, for example, for a go program:

{{% highlight go %}}    
package main            
                        
import (                
        "flag"          
        "html/template" 
        "io/ioutil"     
        "log"           
        "net/http"      
        "regexp"        
        "net"           
)                       
...
        http.ListenAndServe(":8080", nil)
}                                        
{{% /highlight %}}

I see HTML <p> tags being added in the rendered code:

<p>package main</p>

<p>import (
        “flag”
        “html/template”
        “io/ioutil”
        “log”
        “net/http”
        “regexp”
        “net”
)</p>

Now, I was trying to use highlight.js and added the reference to it in the template’s <head>. But I think server-side highlighting is overriding it.

How can I switch to client side highlighting?

2

Client side highlighting doesn’t use the highlight shortcode. Instead it transforms normal code blocks into highlighted code.

The docs are here. Please help contribute by making them more clear so others can benefit from what you’ve learned.

3

Do you mean if I use the GFM-style fenced code block method:

```go
package main 
             
import (     
...
   http.ListenAndServe(":8080", nil)
}
```

which results in the following HTML being correctly generated:

<pre><code class="language-go">package main

import (

highlight.js should have worked without any additional step?

Only that it didn’t, it just showed the code in monospaced font without highlighting.

4

I think I figured why, I had to add the following too as found on highlight.js usage page:

<script>hljs.initHighlightingOnLoad();</script>

Time to update the doc. :slight_smile: Let me see how I can send a pull request.