Syntax Highlight

[maxence-charriere]

Hello there,

I'm trying to convert markdown containing fenced golang code blocks.

The code generated look like this:

<pre><code class="language-go">// +build wasm

// The UI is running only on a web browser. Therefore, the build instruction
// above is to compile the code below only when the program is built for the
// WebAssembly (wasm) architecture.

package main

import "github.com/maxence-charriere/go-app/v7/pkg/app"

// hello is a component that displays a simple "Hello World!". A component is a
// customizable, independent, and reusable UI element. It is created by
// embedding app.Compo into a struct.
type hello struct {
    app.Compo
}

// The Render method is where the component appearance is defined. Here, a
// "Hello World!" is displayed as a heading.
func (h *hello) Render() app.UI {
    return app.H1().Text("Hello World!")
}

// The main function is the entry point of the UI. It is where components are
// associated with URL paths and where the UI is started.
func main() {
    app.Route("/", &amp;hello{}) // hello component is associated with URL path "/".
    app.Run()                // Launches the PWA.
}
</code></pre>

Is it possible to have a highlighted code with this package? If yes, how to customize code highlighting from this generated code?

[miekg]

[ Quoting notifications@github.com in "[gomarkdown/markdown] Syntax Highli..." ]

Is it possible to have a highlighted code with this package? If yes, how to customize code highlighting from this generated code?

no, this is not possible, you need to add the css/js yourself that does this.

/Miek

-- Miek Gieben

[maxence-charriere]

Mmm I d like to but i dont see any tag/class in the generated code to style it.

[miekg]

[ Quoting notifications@github.com in "Re: [gomarkdown/markdown] Syntax Hi..." ]

Mmm I d like to but i dont see any tag/class in the generated code to style it.

ah, sorry, confused repos. Uhm then I'm not sure, maybe there is an option, but I would need to check the code.

/Miek

-- Miek Gieben

[maxence-charriere]

Ok so have to use a library like prism.js to highlight code. Thanks for the help :)

[kjk]

For future reference, here's how to do it with chroma library and using RenderNodeHook for *ast.CodeBlock node: https://github.com/gomarkdown/markdown/blob/master/examples/code_hightlight.go

[Spriithy]

Yes ! I figured that out by reading further on #164 thanks for the example

[blacktop]

the link is dead @kjk ?

[kjk]

Yeah, sorry, I made the repo private. When I have time, I'll add an example to https://blog.kowalczyk.info/article/cxn3/advanced-markdown-processing-in-go.html

[kjk]

I've added an example of syntax highlighting: https://github.com/gomarkdown/markdown/blob/master/examples/code_hightlight.go (or https://onlinetool.io/goplayground/#Bk0zTvrzUDR)

[blacktop]

Thank you!