Possible to specify tabWidth using highlight shortcode?

support
1

The doc of the highlight shortcode does not include a tabWidth option, while the default highlight configuration includes a tabWidth option. Is there a way to modify tabWidth for a particular highlight shortcode?

2

Both of these do the same thing.

```go-html-template {tabWidth=8}
{{ if true }}
	{{ print "I am true" }}
{{ false }}
```

{{< highlight go-html-template "tabWidth=8" >}}
{{ if true }}
	{{ print "I am true" }}
{{ false }}
{{< /highlight >}}

https://gohugo.io/content-management/shortcodes/#highlight

image

And the highlighting options are listed here:
https://gohugo.io/functions/transform/highlight/#options

1 Like
3

Thanks, it turns out that I have noClasses set to false and tabWidth actually doesn’t do anything. Quoted from tabWidth doc:

Irrelevant if noClasses is false.

If I have noClasses = false, is it still possible to specify a different tabWidth for a particular code block?

4

Use CSS.

.highlight.tw1 {
  tab-size: 1em;
}

.highlight.tw2 {
  tab-size: 2em;
}

Fenced code blocks handle the class attribute out-of-the-box.

```go-html-template {class=tw1}
{{ if true }}
	{{ print "I am true" }}
{{ false }}
```

```go-html-template {class=tw2}
{{ if true }}
	{{ print "I am true" }}
{{ false }}
```

If you want to use the highlight shortcode you’ll need to override the embedded template:
https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/highlight.html

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.