syntaxhighlight: improve if using highlight shortcode #569

exampleSite/content/shortcodes/tabs.en.md

@@ -113,9 +113,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 ````go
 {{</* tabs groupid="a" */>}}
 {{%/* tab title="json" */%}}
-```json
+{{</* highlight json "linenos=true" */>}}
 { "Hello": "World" }
-```
+{{</* /highlight */>}}
 {{%/* /tab */%}}
 {{%/* tab title="_**XML**_ stuff" */%}}
 ```xml
@@ -132,9 +132,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 ````go
 {{</* tabs groupid="a" */>}}
 {{%/* tab title="json" */%}}
-```json
+{{</* highlight json "linenos=true" */>}}
 { "Hello": "World" }
-```
+{{</* /highlight */>}}
 {{%/* /tab */%}}
 {{%/* tab title="XML stuff" */%}}
 ```xml
@@ -148,9 +148,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 ````go
 {{</* tabs groupid="b" */>}}
 {{%/* tab title="json" */%}}
-```json
+{{</* highlight json "linenos=true" */>}}
 { "Hello": "World" }
-```
+{{</* /highlight */>}}
 {{%/* /tab */%}}
 {{%/* tab title="XML stuff" */%}}
 ```xml
@@ -167,9 +167,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 
 {{< tabs groupid="tab-example-a" >}}
 {{% tab title="json" %}}
-```json
+{{< highlight json "linenos=true" >}}
 { "Hello": "World" }
-```
+{{< /highlight >}}
 {{% /tab %}}
 {{% tab title="_**XML**_ stuff" %}}
 ```xml
@@ -187,9 +187,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 
 {{< tabs groupid="tab-example-a" >}}
 {{% tab title="json" %}}
-```json
+{{< highlight json "linenos=true" >}}
 { "Hello": "World" }
-```
+{{< /highlight >}}
 {{% /tab %}}
 {{% tab title="XML stuff" %}}
 ```xml
@@ -202,9 +202,9 @@ While pressing a tab of Group A switches all tab views of Group A in sync (if th
 
 {{< tabs groupid="tab-example-b" >}}
 {{% tab title="json" %}}
-```json
+{{< highlight json "linenos=true" >}}
 { "Hello": "World" }
-```
+{{< /highlight >}}
 {{% /tab %}}
 {{% tab title="XML stuff" %}}
 ```xml

exampleSite/content/tests/code/_index.en.md

@@ -49,3 +49,139 @@ Code fences without any selected language
 <pre>
 Some preformatted stuff in HTML elements
 </pre>
+
+## Nested Shortcode
+
+### 1 Shortcode
+
+#### %%
+
+{{% highlight json "linenos=inline" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
+{{% /highlight %}}
+
+#### <>
+
+{{< highlight json "linenos=table" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
+{{< /highlight >}}
+
+### 2 Shortcodes
+
+#### %% %%
+
+{{% tab title="json" %}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{% /tab %}}
+
+#### %% <>
+
+{{% tab title="json" %}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{% /tab %}}
+
+#### <> %%
+
+{{< tab title="json" >}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{< /tab >}}
+
+#### <> <>
+
+{{< tab title="json" >}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{< /tab >}}
+
+### 3 Shortcodes
+
+#### %% %% %%
+
+{{% tabs %}}
+{{% tab title="json" %}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{% /tab %}}
+{{% /tabs %}}
+
+#### %% %% <>
+
+{{% tabs %}}
+{{% tab title="json" %}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{% /tab %}}
+{{% /tabs %}}
+
+#### %% <> %%
+
+{{% tabs %}}
+{{< tab title="json" >}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{< /tab >}}
+{{% /tabs %}}
+
+#### %% <> <>
+
+{{% tabs %}}
+{{< tab title="json" >}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{< /tab >}}
+{{% /tabs %}}
+
+#### <> %% %%
+
+{{< tabs >}}
+{{% tab title="json" %}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{% /tab %}}
+{{< /tabs >}}
+
+#### <> %% <>
+
+{{< tabs >}}
+{{% tab title="json" %}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{% /tab %}}
+{{< /tabs >}}
+
+#### <> <> %%
+
+{{< tabs >}}
+{{< tab title="json" >}}
+{{% highlight html "linenos=true" %}}
+<p>my code</p>
+{{% /highlight %}}
+{{< /tab >}}
+{{< /tabs >}}
+
+#### <> <> <>
+
+{{< tabs >}}
+{{< tab title="json" >}}
+{{< highlight html "linenos=true" >}}
+<p>my code</p>
+{{< /highlight >}}
+{{< /tab >}}
+{{< /tabs >}}

layouts/partials/shortcodes/expand.html

@@ -16,7 +16,7 @@
         {{ $title | .RenderString }}
     </label>
     <div id="expandcontent-{{ $id }}" class="expand-content">
-{{ if ne "<" (substr (strings.TrimLeft " " $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
+{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
 </div>
 {{- end }}

layouts/partials/shortcodes/notice.html

@@ -19,7 +19,7 @@
 <div class="box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
   <div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
   <div class="box-content">
-{{ if ne "<" (substr (strings.TrimLeft " " $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
+{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
 </div>
 {{- end }}

layouts/partials/shortcodes/tabs.html

@@ -74,7 +74,7 @@
       data-tab-item="{{ .itemid }}"
       class="tab-content tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}>
       <div class="tab-content-text">
-{{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
+{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
     </div>
   {{- end }}

static/css/theme.css

@@ -625,6 +625,11 @@ code {
     white-space: nowrap;
 }
 
+.chroma td.lntd:nth-child(2){
+    /* if highlight shortcode used in table mode, increase code column to full width */
+    width: 100%;
+}
+
 span.copy-to-clipboard {
     display: inline-block;
     white-space: nowrap;

static/js/theme.js

@@ -503,11 +503,20 @@ function initCodeClipboard(){
         var code = codeElements[i];
         var text = code.textContent;
         var inPre = code.parentNode.tagName.toLowerCase() == 'pre';
+        var isLineCell = code.querySelector( '.lnt' ); // avoid copy-to-clipboard for highlight shortcode in table lineno mode
 
-        if( inPre || text.length > 5 ){
+        if( !isLineCell && ( inPre || text.length > 5 ) ){
             var clip = new ClipboardJS( '.copy-to-clipboard-button', {
                 text: function( trigger ){
-                    var text = trigger.previousElementSibling && trigger.previousElementSibling.matches( 'code' ) && trigger.previousElementSibling.textContent;
+                    if( !( trigger.previousElementSibling && trigger.previousElementSibling.matches( 'code' ) ) ){
+                        return '';
+                    }
+                    // if highlight shortcode used in inline lineno mode, remove lineno nodes before generating text
+                    var code = trigger.previousElementSibling.cloneNode( true );
+                    Array.from( code.querySelectorAll( '.ln' ) ).forEach( function( lineno ){
+                        lineno.remove();
+                    });
+                    var text = code.textContent;
                     // remove a trailing line break, this may most likely
                     // come from the browser / Hugo transformation
                     text = text.replace( /\n$/, '' );