Hugo Future Imperfec theme - Highliting.js line number render

Hi, everyone
I am a novice for Hugo and js. I am very like ”Hugo Future Imperfect“ template.
But his highlight plugin (highlight.js) doesn’t support the line number.

I tried using “highlightjs-line-numbers.js” plugin, but there was no way to get good results.

So I want to add js code file to the line number myself.
This is my js file, the file name is “line-number.js”, code as follows:

$('pre code').each(function(){
var lines = $(this).text().split('\n').length - 1;
var $numbering = $('<ul/>').addClass('pre-numbering');

The “footer.htm” code as follow:
I put <script src ="{{"js =""line-number.js"=""|="""relurl="""}}"="""> </script> {{end}} placed behind Highlight.js.

But there has been no way to display it smoothly. I don’t know where something wrong.
Can someone help me? thx!

{{ if isset .Site.Params "customjs" }}
{{ $.Scratch.Set "jsFiles" .Site.Params.customJS }}
{{ else }}
{{ $.Scratch.Set "jsFiles" false }}
{{ end }}

{{ if (not .Params.disable_highlight) }}
{{ $highVer := .Site.Params.highlightjsVersion }}
{{ $highCDN := (.Site.Params.highlightjsCDN | default "//") }}
{{ if (not (eq $highVer "")) }}
<script src="{{ $highCDN }}/highlight.js/{{ $highVer }}/highlight.min.js"></script>
{{ $.Scratch.Set "highLangs" .Site.Params.highlightjsLang }}
{{ range .Params.highlightjsLang }}{{ $.Scratch.Add "highLangs" . }}{{ end }}
{{ range ($.Scratch.Get "highLangs") }}
<script src="{{ $highCDN }}/highlight.js/{{ $highVer }}/languages/{{ . }}.min.js"></script>
<script src="{{ " js="" line-number.js"="" |="" relurl="" }}"=""></script>{{ end }}
<script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
{{ end }}
{{ end }}

{{ if or (in ($.Scratch.Get "jsFiles") "default") (eq ($.Scratch.Get "jsFiles") false) }}
<script src="" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src=""></script>
<script src=""></script>
<script src="{{ " js="" util.js"="" |="" relurl="" }}"=""></script>
<script src="{{ " js="" main.js"="" |="" relurl="" }}"=""></script>
<script src="{{ " js="" backtotop.js"="" |="" relurl="" }}"=""></script>
{{ end }}

{{ if ne ($.Scratch.Get "jsFiles") false }}
{{ range $.Scratch.Get "jsFiles" }}
{{ if ne . "default" }}
<script src="{{ . | relURL }}"></script>
{{ end }}
{{ end }}
{{ end }}

{{ partial "footer_mathjax" . }}

The effect I want to render is like Typora.

I would say it is easiest to just use the included highlighter and set its options in your config.

For instance in one site’s config.toml I have:

pygmentsOptions = "linenos=table"
pygmentsCodeFences = "true"
pygmentsCodefencesGuessSyntax = "true"
pygmentsStyle = "tango"
1 Like

I have tried to use, but no effect.

If you remove highlight.js and leave pygments, it will revert to no highlighting.

I would say, figure out how the theme is loading highlight js and disable.