Run examples in Markdown through Prettier

[gaearon]

Not sure how to do it but I think I've seen some tweet saying you can run Markdown files through Prettier and it will format JS blocks.

[bvaughn]

Kind of related to this, but, I was planning to write a little Gatsby Remark plug-in that let us directly embed examples from the examples dir. These examples (all files in this directory) could be run through Prettier automatically.

This won't solve all problems, since it's a bit too much overhead to create an example file for a couple of lines, but it would help with the larger ones.

[clemmy]

Pretty cool: https://github.com/prettier/prettier/releases/tag/1.8.0

[alexkrolick]

One thing I noticed is that some of the js code blocks have special tags like js{2, 7} - might want to watch out to make sure Prettier recognizes them.

[bvaughn]

First step to what I described would be to get Prettier running on our example code, which I've done with PR #331.

[bvaughn]

Regarding Prettier 1.8's ability to format Markdown files - it looks like it chokes on the ones we have here because of the "frontmatter" header blocks, eg:

content/warnings/unknown-prop.md
[error] content/warnings/unknown-prop.md: SyntaxError: Invalid left-hand side in assignment (1:3)
[error] > 1 | ---
[error] | ^^^^^^^^^^^^^^^^^^^^
[error] > 2 | title: Unknown Prop Warning
[error] | ^^^^^^
[error] 3 | layout: single
[error] 4 | permalink: warnings/unknown-prop.html
[error] 5 | ---
error Command failed with exit code 2.

[bvaughn]

Related PR #336

[bvaughn]

We might be able to draw some inspiration from this project in terms of running only the code blocks through Prettier. Not sure how straight forward this would be to do, given that multiple Gatsby plugins touch our code blocks. It might also complicate line-highlights since those are line-number based (at least until the Gatsby plugin supports the newer inline comment syntax).

[alexkrolick]

This seems to be working now even with frontmatter:

npx prettier --parser=markdown --write "content/docs/**/*.md"

content/docs/accessibility.md 249ms
content/docs/add-react-to-a-new-app.md 20ms
content/docs/add-react-to-an-existing-app.md 40ms
content/docs/addons-animation.md 159ms
content/docs/addons-create-fragment.md 26ms
...

The line-highlights are still problematic though, since the markdown parser doesn't recognize javascript{2-4} as a JS block (nor do editors...).

[ghost]

@bvaughn and anybody reading this thread: prettier-markdown recommends to use prettier directly

Prettier now includes support for prettifying Markdown (including code blocks!), so as such, I'd recommend using the official Prettier instead. See the release notes for more information

[ashutosh887]

@bvaughn @gaearon Please close the Issue if resolved
if not, I would like to work on the issue