CODEWITHSUNDEEP
pythonhtmlcssmarkdowngithub-flavored-markdown
johnnyBoy
johnnyBoy

Reputation: 125

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>

wrong output

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

output without fenced-code-blocks

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.

pycharm capture

Upvotes: 0

Views: 1099

Answers (2)

Bernd Benner
Bernd Benner

Reputation: 31

I am facing the same issue, but only on some systems!

my knowledge:

It works not correctly, if Pygments is installed ( css-trouble with display: inline ) It works correctly, if you remove the Pygments module.

Upvotes: 0

Hardik Yewale
Hardik Yewale

Reputation: 346

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

Upvotes: 1

Related Questions