markdown-preview-enhanced | markdown preview extensions for Atom editor

Please look up this picture. I opened Visual Studio Code 1.31.0, create new file, write below, then, the rectangle shown in this picture was appeared.

My problems is when I was coding the editor of vscode auto replace from relative path to absolute path of all files in my project automatically.

For example: When I import like this:

I’m beginning to explore literate programming, which involves embedding executable code blocks into markdown documents. My current working environment is Atom with a package called markdown-preview-enhanced – it supports live code chunk execution, which is exactly what I need. Here is an example of how things look like:

(in real life, the code is surrounded with headers, images, etc.)

One thing I’m missing is the ability to auto-format code chunks inside markdown files just as I would achieve this in separate files (e.g. using Atom’s beautify package). Surprisingly, searching for a solution that would work in Atom did not bring me to anything.

My question is to those who’s been doing literate programming for some time. What tools would you recommend to achieve formatting for literate code blocks? If there’s no Atom package that would do this, what alternative environments could I try?

I’m planning to embed multiple languages into my literate programming documents in future, so feel free to share solutions not only for Python mentioned above.