rikhuijzer / PlutoStaticHTML.jl

Convert Pluto notebooks to HTML in automated workflows
https://PlutoStaticHTML.huijzer.xyz
MIT License
81 stars 7 forks source link

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

Open alecloudenback opened 2 years ago

alecloudenback commented 2 years ago

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 commented 2 years ago

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
rikhuijzer commented 2 years ago

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