0

According to Docsy documentation here

If your content is markdown, use the percent sign % as outermost delimiter of your tab shortcode, your markup should look like {{% tab %}}Your markdown content{{% /tab %}}. In case of HTML content, use square brackets <> as outermost delimiters: {{< tab >}}Your HTML content{{< /tab >}}.

As my tab content has markdown code that I need rendered, I'm using % as delimiter. But is not working, as it is rendering me the content as code block, which I understand is the default unless otherwise specified.

I tried:

{{% tabpane %}} {{% tab header="Tab 1 name" %}} markdown content for tab 1 {{% /tab %}} {{% tab header="tab 2 name" %}} Markdown content for tab 2 {{% /tab %}} {{% /tabpane %}} And it did not work: Using % as delimiter

So I tried HTML delimiter to check if delimiter parameter functionality was working at all and it kinda worked:

{{< tabpane >}} {{< tab header="Tab 1 name" >}} markdown content for tab 1 {{< /tab >}} {{< tab header="tab 2 name" >}} Markdown content for tab 2 {{< /tab >}} {{< /tabpane >}}

Using HML delimiter

It renders the content as HTML! So the feature seems to be working, just not for markdown content. This is my code: My code on VSC

I'm using VSC, and previewing changes on localhost with Hugo. I would be really thankful if someone could help me figure out what is happening here, that is, what I'm doing wrong. Thank you!

EDIT:

Specifying

lang="markdown"

in tabpane seems to helpe, butnot quite, as it renders markdown, but it still shows de special characters used in markdown (e.g. the ** to get bold letters) For bash it works, as long as bash command is the only content of tab. Once you add text before or after command it breaks.

coronelcortez
  • 1
  • 1
  • Share a codebase so we can have a look. Difficult to get an idea without having the whole picture. – Jeremie Nov 15 '22 at 15:33

1 Answers1

1

I also had trouble with those. We started from what was the current hugo/docsy pair. We weren't able to make the tabs from hugo/docsy set work so I took the tab/tabpane set from Kubernetes' docs implementation. It works well enough to show other html. markdown, and other shortcodes on the tab panels.

Hugo and it's themes are not a "matched" system. Themes should only control a site's look and feel, but someone foolishly decided to stuff functionality into them, as well. Feel free to explore shortcodes from other themes until you hit the one that works.

Hugo and the themes are a meatball way to generate html. If you need to write real docs, IMHO, you're better off finding a real html site generation tool. Hugo is an awkward tool that's designed for bloggers, despite what Hugo supporter will say. Look at how much time you're wasting trying to make it perform its basic functions.

Hugo is blindlingly fast at generating websites, but that's all it has going for it.

NothingToSeeHere
  • 119
  • 6
  • 1
    Yup, you're right. I ended up using html for collapsible tree and that's it. Its a shame that whats on Docsy documentation doesn't work. And I know I was using it correctly, because other shortcodes, e.g. warning/info: {{% alert title="INFO" color="info" %}} {{% /alert %}} Work perfectly fine. I'll look into K8s docs as you said. Any link you could share will be welcomed! ty! – coronelcortez Dec 01 '22 at 10:13
  • 1
    That may work in a few weeks. Docsy and Hugo teams don't coordinate. Their tab/tabs shortcodes did not work for several weeks when we migrated from mkdocs and I spent days looking for why or for a set that would work. Eventually, a few weeks later, what was in the repo started working. There are too many features required to support decent documentation. The hugo-docsy set is okay, but isn't up to the task. Authoring tools that understand what a documentation project is are much superior. That's almost entirely because the devs code what their Tech Writer SMEs asked for, not wild guesses. – NothingToSeeHere Dec 22 '22 at 16:39