Skip to content

Run examples in Markdown through Prettier #310

Closed

Description

@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.

Activity

  1. bvaughn commented on Nov 20, 2017

    @bvaughn
    Contributor

    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.

  2. clemmy commented on Nov 20, 2017

    @clemmy
    Contributor
  3. alexkrolick commented on Nov 20, 2017

    @alexkrolick
    Collaborator

    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.

  4. bvaughn commented on Nov 23, 2017

    @bvaughn
    Contributor

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

  5. bvaughn commented on Nov 24, 2017

    @bvaughn
    Contributor

    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.

  6. bvaughn commented on Nov 24, 2017

    @bvaughn
    Contributor

    Related PR #336

  7. bvaughn commented on Nov 29, 2017

    @bvaughn
    Contributor

    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).

  8. alexkrolick commented on Mar 14, 2018

    @alexkrolick
    Collaborator

    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...).

  9. added a commit that references this issue on Jul 1, 2020
  10. ashutosh887 commented on Mar 19, 2023

    @ashutosh887

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions