Backslashes becoming line breaks in code samples

The trailing backslashes \ inside my shell code are becoming line breaks <br /> inside of my code tabs. However, this does not occur with code inside of regular code blocks. The main difference between my code samples is that the code tabs are inside of <div> elements. I am using highlight.js and BlackFriday (via material docs theme).

tabs.html shortcode

<div class="code-tabs">
  <ul class="nav nav-tabs"></ul>
  <div class="tab-content">{{ .Inner }}</div>
</div>

tab.html shortcode

<div class="tab-pane" title="{{ .Get 0 }}" lang="{{ .Get 1 }}" >
 {{ .Inner }}
</div>

javascript

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js" integrity="sha256-1zu+3BnLYV9LdiY85uXMzii3bdrkelyp37e0ZyTAQh0=" crossorigin="anonymous"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>
      $('.tab-content').find('.tab-pane').each(function(idx, item) {
      var navTabs = $(this).closest('.code-tabs').find('.nav-tabs'),
          title = $(this).attr('title');
          lang = $(this).attr('lang');
      navTabs.append('<li><a href="#">'+title+'</a></li');
      });

      $('.code-tabs ul.nav-tabs').each(function() {
        $(this).find("li:first").addClass('active');
      })

      $('.code-tabs .tab-content').each(function() {
        $(this).find("div:first").addClass('active');
      });

      $('.code-tabs .tab-content').each(function() {
        $(this).find("code").addClass(lang);
      });

      $('.nav-tabs a').click(function(e){
        e.preventDefault();
        var tab = $(this).parent(),
            tabIndex = tab.index(),
            tabPanel = $(this).closest('.code-tabs'),
            tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
        tabPanel.find('.active').removeClass('active');
        tab.addClass('active');
        tabPane.addClass('active');
      });

    </script>

markdown

 {{% tabs %}}
   {{% tab "tab 1" "language-shell" %}}
    echo hello \
      hello
   {{% /tab %}}
   {{% tab "tab 2" "language-shell" %}}
    echo hello \
      hello
   {{% /tab %}}
 {{% /tabs %}}
```shell
echo hello \
  hello
```

html

<p><div class="code-tabs">
  <ul class="nav nav-tabs"></ul>
  <div class="tab-content">
   <div class="tab-pane" title="tab 1" lang="language-shell" >
 <pre><code>echo hello <br />
  hello
</code></pre></p>

<p></div>
   <div class="tab-pane" title="tab 2" lang="language-shell" >
 <pre><code>echo hello <br />
  hello
</code></pre></p>

<p></div>
 </div>
</div></p>

<pre><code class="language-shell">echo hello \
  hello
</code></pre>

While you don’t see the correct class in the HTML, it is in the DOM, as seen when I do inspect elements. If you have any suggestions, I would appreciate it. I cannot determine why the line breaks are getting inserted.

For the benefit of the community, I fixed this by adding {{ $_hugo_config := { “version”: 1 } }} in my shortcodes. As discussed here https://github.com/gohugoio/hugo/issues/5900