Hello,
I am working on converting all of my code blocks to use code fences instead of the {{< highlight >}}
shortcode now that it has been supporting attributes like linenos
for a while.
As I was testing out this conversion, I realized that the anchorlinenos=true
works in the highlight
shortcode but not in the code fences.
To help quickly verify if this is an issue in my usage of this attribute or my site config, I have created a minimum working example: Anchor Line Numbers | Hugo MWE
Markdown source of that page
That page highlights the issue and also presents few git commands at the bottom so that anyone can reproduce this issue locally.
I did some snooping around in the Hugo code… It looks like this needs to include the anchorlinenos
and lineanchors
special attributes:
// Attributes with special meaning that does not make sense to render in HTML.
attributeExcludes = map[string]bool{
"linenos": true,
"hl_lines": true,
"linenostart": true,
}
From that test page’s HTML source:
I believe I can open an issue?
Opened
opened 07:06PM - 14 Jan 22 UTC
Bug
NeedsTriage
### What version of Hugo are you using (`hugo version`)?
<pre>
$ hugo versio… n
hugo v0.92.0-B3549403 linux/amd64 BuildDate=2022-01-12T08:23:18Z VendorInfo=gohugoio
</pre>
### Does this issue reproduce with the latest release?
Yes
### Hugo Discourse discussion
https://discourse.gohugo.io/t/bug-anchorlinenos-true-attribute-doesnt-work-when-using-code-fences/36564
### Reproducible example
- [source repo](https://gitlab.com/hugo-mwe/hugo-mwe/-/tree/anchorlinenos)
- [Rendered HTML showing the issue][1]
- [Markdown content file](https://gitlab.com/hugo-mwe/hugo-mwe/-/raw/anchorlinenos/content/posts/anchor-line-numbers.md)
**Steps to reproduce the problem**
```shell
git clone https://gitlab.com/hugo-mwe/hugo-mwe
cd hugo-mwe
git checkout anchorlinenos
./srv.sh
```
### Analysis
It looks like the `anchorlinenos` and `lineanchors` attributes get passed on as-is to the rendered HTML without being treated as special attributes for creating line number hyperlinks.
I see this when I look at the source of the [above test HTML page][1]:
![image](https://user-images.githubusercontent.com/3578197/149570941-31b418ef-df51-46c9-817d-ed9ee924b43b.png)
Possibly related code:
https://github.com/gohugoio/hugo/blob/fcbbbef22dac2967c9096c6f1a0aff9b50d7a4cb/markup/goldmark/render_hooks.go#L149-L154
The link anchoring feature was added in https://github.com/gohugoio/hugo/commit/fb0f2cc718a54fd0774a0367e0a60718b5731de5 but the new attributes probably still need to be added in `render_hooks.go`. /cc @fjorgemota
[1]: https://anchorlinenos--hugo-mwe.netlify.app/posts/anchor-line-numbers/
There are three ways to apply syntax highlighting:
Within a template or shortcode use the transform.Highlight
function.
Within markdown use the highlight
shortcode, which calls transform.Highlight
.
Within markdown use code fences .
When using #1 or #2 , you may specify any of these options .
When using #3 , the available options are limited by the yuin/goldmark-highlighting module:
Option
Values
linenos
true
, false
, inline
, table
linenostart
integer
hl_lines
array
hl_style
string (see this list of available styles)
For example:
```bash {linenos=table linenostart=4 hl_lines=["4-6",9] hl_style=emacs}
#!/usr/bin/env bash
mul() {
foo=$1
bar=$2
echo $((foo * bar))
}
mul 6 7
```
1 Like
@jmooring Thanks for that detailed reply!
I was reading Syntax highlighting | Hugo and I saw
The options are the same as in the highlighting shortcode ,including linenos=false
, but note the slightly different Markdown attribute syntax.
So that doc should be updated?
Yes, I’ve got a low priority reminder to look at this. In addition to a limited option set when using code fences, there are also syntactical differences between the three methods which require correction and clarification.
The yuin/goldmark-highlighting module also provides a nohl
option. I didn’t inlcude it in the list above because the behavior was unexpected (or because I don’t understand the intent).
Yeah, I realized that when adding hl_lines
support for code fences to ox-hugo. Other than that, using comma or space to separate the attributes in code fences doesn’t seem to make a difference.
Yup.
I also experienced a self-inflicted wound when trying to use mixed-case option names as documented here .
This issue is now fixed in the master
branch as of
committed 12:04PM - 17 Feb 22 UTC
You can now create custom hook templates for code blocks, either one for all (`r… ender-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`).
We also used this new hook to add support for diagrams in Hugo:
* Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams.
* Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information.
Updates #7765
Closes #9538
Fixes #9553
Fixes #8520
Fixes #6702
Fixes #9558
So Hugo v0.93.0 will have this fix.
1 Like
system
Closed
February 26, 2022, 10:02pm
9
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.