PlutoStaticHTML.jl icon indicating copy to clipboard operation
PlutoStaticHTML.jl copied to clipboard

Franklin: Getting the `hljs` syntax highlighting to work on Pluto codeblocks

Open alecloudenback opened this issue 1 year ago • 2 comments

I think the root cause is that when the output is generated, it's already processed as HTML so Franklin doesn't have the chance to apply the hljs formatting.

This is coming up in the context of another attempt at using PlutoStaticHTML on the JuliaActuary website. For example, this notebook output doesn't have the same code formatting as the codeblocks on this Franklin-markdown-based page

I think by writing the Pluto code to a simple markdown block instead of an HTML block then Franklin/hljs would get a chance to process the syntax highlighting. Is there an existing/easy way to do this?

alecloudenback avatar Sep 05 '22 18:09 alecloudenback

I got it working by manually inserting the hljs script, i.e. adapting this function to be:

"Add a link to the notebook at the bottom of each tutorial."
function append_notebook_links()
    dir = TUTORIALS_DIR
    md_paths = filter(endswith(".md"), readdir(dir; join=true))
    for md_path in md_paths
        md_file = basename(md_path)
        without_extension, _ = splitext(md_file)
        jl_file = "$(without_extension).jl"
        url = "/notebooks/$jl_file"
        open(md_path, "a") do io
            text = """\n
                _To run this tutorial locally, download [this file]($url) and open it with
                [Pluto.jl](https://plutojl.org)._

                ~~~

                <link rel="stylesheet" href="/libs/highlight/github.min.css">
                <script src="/libs/highlight/highlight.min.js"></script>
                <script>hljs.highlightAll();</script>
                
                ~~~
                """
            write(io, text)
        end
    end
    return nothing
end

alecloudenback avatar Sep 05 '22 19:09 alecloudenback

Ah nice that you've fixed it. So this is about syntax highlighting? Maybe adjust the title then people can find the instructions easily in this issue

rikhuijzer avatar Sep 05 '22 19:09 rikhuijzer