Adding <ruby> to content headings with shortcodes

[erynrwells]

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>
    </a>
</h{{ .Level }}>

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

[bep]

@erynrwells

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

There is a longer story here, but try:

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

@erynrwells

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

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 .Attributes.foo etc:

# 日本語 { foo="bar" }