Code block formatting surprise

[jcw]

Hello - while trying out this theme, I ran into some unexpected behaviour: line formatting jumps around considerably when using different ways to delimit code blocks:

1. using '''sh (backticks, that is, but I'm having trouble escaping them here)
2. using {{< highlight sh "hl_lines=8 15-17" >}}
3. using {{< highlight sh "linenos=table,hl_lines=8 15-17" >}}

I don't mean the line numbering or highlights, but the fact that the layout / line spacing varies considerably between these different methods. It should be possible to reproduce this, by editing creating-a-new-theme.md in the example site.

I'm using Hugo v0.59.0.

[alex-shpak]

Hi!
Thank you for report, I think most things can be aligned there. Mostly line-height and paddings fixes. I will dedicate some time after search and language changes. PR is welcome.

[jcw]

Thanks, it's a lovely theme for use with Hugo.

[oshliaer]

I've created samples and codes

```sh
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
```

{{< highlight sh "hl_lines=8 15-17" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

{{< highlight sh "linenos=table,hl_lines=8 15-17" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

All pictures have discrepancies.

[alex-shpak]

I pushed some changes, it's not pixel-perfect but near

[oshliaer]

OK. It seems there is a small adjusting yet

No shortcode. Height of the block is 307px. OK

```sh
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
```

Shortcode. Height of the block is 307px. OK

{{< highlight sh >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

Shortcode with FOUR highlight lines. Height of the block is 295px. 12 px reduction!

{{< highlight sh "hl_lines=3 8-10" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

Shortcode with FOUR highlight numbers lines. Height of the block is 295px. 12 px reduction!

{{< highlight sh "linenos=table,hl_lines=3 8-10" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

Shortcode with ONE highlight line. Height of the block is 304px. 3px reduction!

{{< highlight sh "hl_lines=3" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

Shortcode with TWO highlight lines in order. Height of the block is 301px. 6px reduction!

{{< highlight sh "hl_lines=3-4" >}}
#!/bin/bash

echo "Enter directory name"
read ndir
if [ -d "$ndir" ]
then
  echo "Directory exist"
else
  `mkdir $ndir`
  echo "Directory created"
fi
{{< / highlight >}}

@alex-shpak It looks like each highlighted line eats up 3px.

[alex-shpak]

Yes, it's due to highlighted lines having display:block style which is affecting line-height.
I can set line-height to em units. Though, there will be still +- pixel gap per highlighted block because of subpixel calculation.

[jcw]

Great progress! Minor pixel differences should be of no concern - nobody is going to toggle quickly between the two. It was just the large jumps which surprised me, and the fact that nobody seemed to have noticed / looked into this until now.

Many thanks for the fixes, I think this issue can be closed now.