Hugo Future Imperfec theme - Highliting.js line number render

[shuwn]

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:

$(function(){
$('pre code').each(function(){
var lines = $(this).text().split('\n').length - 1;
var $numbering = $('<ul/>').addClass('pre-numbering');
$(this)
.addClass('has-numbering')
.parent()
.append($numbering);
for(i=1;i<=lines;i++){
$numbering.append($('<li/>').text(i));
}
});
});

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!

</div>
{{ 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 "//cdn.bootcss.com") }}
{{ 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="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></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 }}

<script>hljs.initHighlightingOnLoad();</script>
{{ partial "footer_mathjax" . }}
</body>
</html>

[shuwn]

The effect I want to render is like Typora.

[RickCogley]

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

Syntax Highlighting

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

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

[shuwn]

I have tried to use, but no effect.

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

[RickCogley]

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