nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

syntaxhighlight: improve if using highlight shortcode #569

Browse source
This commit is contained in:
Sören Weber 2023-06-15 19:35:35 +02:00
parent 8210020994
commit c3015432e5
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
7 changed files with 167 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
exampleSite/content/shortcodes/tabs.en.md
View file

@ -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

136
exampleSite/content/tests/code/_index.en.md
View file

@ -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 >}}

2
layouts/partials/shortcodes/expand.html
View file

@ -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 }}

2
layouts/partials/shortcodes/notice.html
View file

@ -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 }}

2
layouts/partials/shortcodes/tabs.html
View file

@ -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 }}

5
static/css/theme.css
View file

@ -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;

13
static/js/theme.js
View file

@ -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$/, '' );