From c3015432e5aed11d55d85644a9f29dab2e6aa66a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Thu, 15 Jun 2023 19:35:35 +0200
Subject: [PATCH] syntaxhighlight: improve if using highlight shortcode #569

---
 exampleSite/content/shortcodes/tabs.en.md   |  24 ++--
 exampleSite/content/tests/code/_index.en.md | 136 ++++++++++++++++++++
 layouts/partials/shortcodes/expand.html     |   2 +-
 layouts/partials/shortcodes/notice.html     |   2 +-
 layouts/partials/shortcodes/tabs.html       |   2 +-
 static/css/theme.css                        |   5 +
 static/js/theme.js                          |  13 +-
 7 files changed, 167 insertions(+), 17 deletions(-)

diff --git a/exampleSite/content/shortcodes/tabs.en.md b/exampleSite/content/shortcodes/tabs.en.md
index 8c69170a6b..8ae852b32c 100644
--- a/exampleSite/content/shortcodes/tabs.en.md
+++ b/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
diff --git a/exampleSite/content/tests/code/_index.en.md b/exampleSite/content/tests/code/_index.en.md
index 6f3f2e8106..2788ccda21 100644
--- a/exampleSite/content/tests/code/_index.en.md
+++ b/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 >}}
diff --git a/layouts/partials/shortcodes/expand.html b/layouts/partials/shortcodes/expand.html
index 3b30bd2fe0..d5f5f379dc 100644
--- a/layouts/partials/shortcodes/expand.html
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html
index 5bacde9cc7..8f82b1f36a 100644
--- a/layouts/partials/shortcodes/notice.html
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 19889a0ad3..f607976aa3 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/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 }}
diff --git a/static/css/theme.css b/static/css/theme.css
index 6a81fc3609..df5b77f121 100644
--- a/static/css/theme.css
+++ b/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;
diff --git a/static/js/theme.js b/static/js/theme.js
index 3e2cf010ad..ed23396561 100644
--- a/static/js/theme.js
+++ b/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$/, '' );