Beautify HTML in .md-files

[wottpal]

Description

I use Jekyll as a static-site-generator and often HTML-code in included in my .md-files. I want to auto-indent the HTMl but neither Atoms Auto-Indent function nor atom-beautify seems to work for that..

Input Before Beautification

---
layout: default
permalink: /test.html
title: Test-Site
---

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

Expected Output

---
layout: default
permalink: /test.html
title: Test-Site
---

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

Actual Output

---
layout: default
permalink: /test.html
title: Test-Site
---

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

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Editor
3. This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/dkerzig/17ce01d9e44acf1c7719f89ca6eb5bf5

Thanks in advance!
Dennis

[issue-manager]

This issue looks similar to:

• #1422 - Beautify html not following the rules
• #490 - beautify HTML does not align comments
• #898 - Won't beautify HTML any more, and settings dialog is broken

If any of these issues solves your problem, then feel free to close this.

[wottpal]

@Glavin001 So if I understand the tag "add-language" correctly I just have to implement a new language maybe with a simple regex with formats everything inside the "--- ... ---" as yaml and everything underneath as HTML. Sounds pretty straightforward and I would be happy to create a PR if you give me some instructions where to begin :) And esp. how to differentiate between these kind of .md-files and normal ones.

Dennis

[Glavin001]

Hi @dkerzig. Yes, a new language would need to be added. However, a beautifier which supports this language will also be needed. However, since such a beautifier does not exist the the add-beautifier label has not been added.

I just have to implement a new language maybe with a simple regex with formats everything inside the "--- ... ---" as yaml and everything underneath as HTML.

What you described would actually be the implementation of the beautifier 😃 . This may be a good start: https://github.com/Glavin001/atom-beautify/blob/master/src/beautifiers/vue-beautifier.coffee
However, you can see it is rather hacked together. Atom-Beautify does not yet support complex languages with multiple types in nested languages (i.e. HTML + YAML front-matter + Markdown).

---

Update: Instead of adding a new language, maybe you could contribute to one of these other beautifiers to improve their support?

Are these actually Markdown files? They look more like HTML files with YAML Front-Matter.
If you insist these are Markdown files, the beautifier you were using is Tidy Markdown. You could contribute to there and add whatever support you need. Then let me know here once it is merged and we can update the Tidy Markdown dependency in Atom-Beautify's package.json.