How can I do to embed sub-shortcodes in the shortcode? (nest-shortcodes)

support
1

I create a shortcodes, name: table/code-by-example

table/code-by-example.html:

{{/*
REFERENCE: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_equal_height

USAGE:

  Example 0:

    {{< table/code-by-example >}}
    {{< /table/code-by-example >}}

  Example 1:

    {{< table/code-by-example "Desc | 60%" "Code | 40%" >}}
    
    @@NEW-COL@@

    ```css {linenos=inline,hl_lines=[8,"3-5"],linenostart=2}
    ```

    {{< /table/code-by-example >}}

  Example 2:

    {{< table/code-by-example "|30%">}}
    {{< /table/code-by-example >}}

    {{< table/code-by-example "|20%" "|80%">}}  
    {{< /table/code-by-example >}}

*/}}

<div class="col-container">
  {{ $col_list := split .Inner "@@NEW-COL@@" }}

  {{ range $idx, $col := $col_list  }}
  
    {{ $contents := $col | markdownify }}
    {{ $col_attr_info := default `|` ($.Get $idx) }}
    {{ $col_attr_info = split $col_attr_info "|" }}

    {{ if index $col_attr_info 1 }}
      <div class="col" style="width:{{- index $col_attr_info 1 | safeHTMLAttr -}};">
    {{ else }}
      <div class="col">
    {{ end }}

        {{ if index $col_attr_info 0 }}
          <h2>{{- index $col_attr_info 0 -}}</h2>
        {{ end }}
        
          <p>{{$contents}}</p>

      </div>
</div>

So, I can use it in some markdown files

{{< table/code-by-example "DESC" "CSS"  >}}

Hello World

@@NEW-COL@@

CODE

{{< /table/code-by-example >}}

output

image
image918×592 18.8 KB

If I create another shortcode: raw_html

raw_html.html

{{.Inner}}

And I want to

{{< table/code-by-example "About bootstrap Jumbotron" "CSS"  >}}

Hello World

@@NEW-COL@@

CSS CODE

{{< raw_html >}}     {{/*<----- How can I do to embed sub-shortcodes in the shortcode? ( I set unsafe=false, so I can't use the HTML directly) */}}
<h2>output</h2>
<div class="bg-light p-5 rounded m-3">
  <h1 class="display-4">Title</h1>
  <p class="lead">desc</p>
  <hr class="my-4">
  <p>Hi</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
{{< /raw_html >}}

{{< /table/code-by-example >}}

image
image1263×759 41.7 KB

2
3

How can I render the sub-shortcode?

I thought I had already read the article, that’s why I asked it again. I didn’t realize my response was so stupid until @alexandros reminded me.

4

The Parent Shortcode needs to contain the .Inner variable for the Nested ones to be rendered.
See the above linked Docs.

5

Thank you. I tried to write the {{.Inner}} separately, and it shows the result of the sub-short code really.

Not work
{{ $col_list := split .Inner "@@NEW-COL@@" }}
...

Not work
{{ with .Inner }}
...
{{ end }}

Work
{{ .Inner }}

However, it seems that I have to get the whole rendering result before I can proceed with this example.
Anyway, I have the Nested Shortcode concept now. I will think about how to solve my problem.