Adding <ruby> to content headings with shortcodes

Hi all,

I have a page where I’ve written several headings in Japanese that include ruby in English and kana. When Hugo renders these, it produces some very garbled table of contents entries and HTML anchors for those headings. Here are two images, one of a heading and the other of the table of contents entry:

In my content file, my heading has a shortcode in it:

## {{< ruby Japanese ja >}}日本語{{< /ruby >}}

And the shortcode does this:

<ruby {{ with .Get 1 }}lang="{{ . }}"{{ end }}>
    <span>{{- .Inner }}</span>
    <rp>(</rp><rt {{ with .Get 2 }}lang="{{ . }}"{{ end }}>{{- .Get 0 -}}</rt><rp>)</rp>
</ruby>{{- "" -}}

I recently made a heading Markdown render hook, and I was hoping it would let me more carefully control how these are made, but I haven’t been able to figure it out. Here’s my template:

<h{{ .Level }} id="{{ .Anchor | safeURL }}">
    <a href="#{{ .Anchor | safeURL }}">
        <span class="text">{{ .Text | safeHTML }}</span>
        <span class="hash">#</span>
</h{{ .Level }}>

Is there a way to communicate to the renderer what the anchor and text of the table of contents entry should be?

There is a longer story here, but try:

## {{% ruby Japanese ja %}}日本語{{% /ruby %}}

I’m not totally sure I understand what you want, but you can pass arbitrary attributes down via Markdown attributes, and access them in the hook templates with etc:

# 日本語 { foo="bar" }

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.