Python Markdown2 fenced-code-blocks indentation issue

Context:

I am building a static site generator for markdown files with python. I chose to use the Markdown2 lib to convert *.md files into html articles and that works pretty well. I used a markdown test file including code blocks. As I want them to be highlighted, I installed Pygments-css and used the "fenced-code-blocks" Markdown2 extra. I use Yattag to wrap the markdown rendered content in an <article>.

Here is the code:

    def render_md(self, md_file_content, extras):
        f = self.generate() # generates doctype, head etc

        # the following returns a string like "03 minute(s) read" depending on article words count
        estimated_time = self.get_reading_time(md_file_content)

        # markdown2 returns a string containing html
        article = markdown2.markdown(md_file_content, extras=extras)
        # the two following lines handle emoji
        article = emoticons_to_emoji(article)
        article = emoji.emojize(article, use_aliases=True, variant="emoji_type")

        doc, tag, text = Doc().tagtext()

        with tag('article'):
            with tag('span', klass='article__date'):
                text(time.strftime(f'%Y %b %d - %H:%M {estimated_time}'))
            # the following allows me to append a string containing html "as is", not altered by Yattag
            doc.asis(article)

        return self.close_html(f + indent(doc.getvalue())) # self.close_html adds some closing tags and js script tags

here are the extras from my config file:

extras: # Documentation on https://github.com/trentm/python-markdown2/wiki/Extras
  - code-friendly
  - cuddled-lists
  - fenced-code-blocks
  - tables
  - footnotes
  - smarty-pants
  - numbering
  - tables
  - strike
  - spoiler

Here is the *.md file excerpt:

    JS

    ```js
    var foo = function (bar) {
      return bar++;
    };

    console.log(foo(5));
    ```

The issue:

I can't get it properly indented. I feel that I'm missing something, here's what I get as an output:

  <div class="codehilite">
    <pre>      
      <span></span>
      <code>
        <span class="kd">var</span>
        <span class="nx">foo</span>
        <span class="o">=</span>
        <span class="kd">function</span>
        <span class="p">(</span>
        <span class="nx">bar</span>
        <span class="p">)</span>
        <span class="p">{</span>
        <span class="k">return</span>
        <span class="nx">bar</span>
        <span class="o">++</span>
        <span class="p">;</span>
        <span class="p">};</span>
        <span class="nx">console</span>
        <span class="p">.</span>
        <span class="nx">log</span>
        <span class="p">(</span>
        <span class="nx">foo</span>
        <span class="p">(</span>
        <span class="mf">5</span>
        <span class="p">));</span>
      </code>
    </pre>
  </div>
  

If I remove the extra, the content isn't rendered as a code block but as a simple <p> tag.

I get the use of <span> for highlighting, but how does one get the result indented as in the following (capture from Pycharm) ? I really don't understand how it is supposed to output that result.

the indent() method is messing it up try removing that and it is working fine for me, you can try it!