goldmark-figure is a
goldmark
extension to parse markdown paragraphs that start with an image into HTML
<figure> elements. One nice thing is it doesn't use any new markdown
syntaxes.
Example markdown source:
Awesome caption about **Oscar** the kitty.Render result:
<figure>
<img src="/path/to/cat.jpg" alt="Picture of Oscar." />
<figcaption><p>Awesome caption about <strong>Oscar</strong> the kitty.</p></figcaption>
</figure>Multiple images are supported:
Awesome captions about the **kitties**.<figure>
<img src="/path/to/cat1.jpg" alt="Picture of Oscar.">
<img src="/path/to/cat2.jpg" alt="Picture of Luna.">
<figcaption><p>Awesome captions about the <strong>kitties</strong>.</p></figcaption>
</figure>Using dedicated <figure> and <figcaption> elements makes styling images
with descriptions much easier.
Here is an
example:
I hear they are also good for SEO.
go get github.com/mangoumbrella/goldmark-figure
import (
"bytes"
"fmt"
"github.com/mangoumbrella/goldmark-figure"
"github.com/yuin/goldmark"
)
func main() {
markdown := goldmark.New(
goldmark.WithExtensions(
figure.Figure,
),
)
source := `
Awesome caption about **Oscar** the kitty.
`
var buf bytes.Buffer
if err := markdown.Convert([]byte(source), &buf); err != nil {
panic(err)
}
fmt.Print(buf.String())
}Example:
goldmark.WithExtensions(
figure.Figure.WithImageLink(),
),Render result:
<figure>
<a href="/path/to/cat.jpg">
<img src="/path/to/cat.jpg" alt="Picture of Oscar." />
</a>
<figcaption>Awesome caption about <strong>Oscar</strong> the kitty.</figcaption>
</figure>See figure_test.go for more examples.
- Support multiple images (see #5).
- New option to add a link to the image when rendering the figure (see #4).
MIT
Yilei Yang