[Feature] Markdown Formatter

[EddyHaigh]

🚀 Feature request

Description

What do you want to be added?

A markdown formatter.

Are you willing to work on this?

Yes

What scenarios will this solve?

Why do you want/need this?

This will solve issues where you want to display the report but can't display rich HTML formats such as in websites with particular Content Security Policies as well as environments such as Azure Pipelines where the pipeline summary page can only display markdown. Webhint ADO Extension Issue.

Example Markdown Report

# Webhint Report - {URL} - {Date}

[Table of Contents]

## Compatibility

### Supported CSS features - Errors 1, Warnings 1

[Learn why this is important and how to fix](https://webhint.io/docs/user-guide/hints/hint-compat-api/css/)

#### **ERROR** - 'position: sticky' is not supported by Safari, iOS Safari. Add 'position: -webkit-sticky' to support Safari 6.1+, iOS Safari 6.1+.'

https://webhint.io/static/styles/common-0788930e1c.css:1:11064

``` css
@media (max-width:63em) {
    .header {
        position: sticky;
    }
}
\```

#### **WARNING** - 'cursor: not-allowed' is not supported by Firefox Android.'

https://webhint.io/static/styles/common-0788930e1c.css:1:25382

``` css
button:disabled,
select:disabled {
    cursor: not-allowed;
}
\```

---

Powered By [Webhint](https://webhint.io/) v2.1.3

[molant]

Hi @EddyHaigh 👋

I see that you are willing to work on this, is that still the case? If so, we will be more than happy to help you along the way 😊

You probably have seen this, but we have some documentation about developing a formatter.
Also, copy pasting the json formatter is a good starting point. Just make sure to update the names and the package.json.

Let us know if you run into any issues!

[EddyHaigh]

@molant , yeah im still willing to work on this. I'm just trying to think of the best way to do this before I start. Initially, I was thinking a string builder style way but that could easily become complicated and hard to maintain. Then I took a look at the HTML formatter and thought about using the EJS templating engine to develop the Markdown. I know it might sound silly but it would be more maintainable and easier to read. However, I am way open to suggestions as I'm not a js/ts person.

[molant]

Have you looked at Tagged templates?

It might be a good option for this scenario.

[EddyHaigh]

I'll give it a look and try it out. Thanks for the suggestion! 😀

[EddyHaigh]

Is there any documentation on testing a new formatter other than the tests in the test folder?

[molant]

You could update the .hintrc file in packages/hint to use the new formatter and run webhint from there.
If you are using vs code I believe there's a debug configuration to run it (hint?).
IIRC you have to select a url on a text file to make it work or you could modify the .vscode/launch.json file and hardcode any url by replacing {selectText} or something similar (I'm on mobile and don't have my laptop near to check).

Let me know if you run into any issues!

[EddyHaigh]

Yeah, changing the args on the debug launch of hint, to the following works.

'args': [
'-f',
'markdown',
'http://example.com'
]