sindresorhus/project-ideas

Browser extension: Format JS code blocks with Prettier

fregante opened this issue · 9 comments

fregante commented

I often get comments on my repos with some example code from a user and the code is close to unreadable because of bad formatting. Would be nice to have Prettier run on JS code blocks in comments.

Not entirely sure how we can have it syntax highlighted again after the formatting though.
@sindresorhus in refined-github/refined-github#480

It exists a GitHub App for your own repos (https://github.com/jgierer12/prettier-github) but it might be useful as a browser extension.

sindresorhus commented

This could be useful for any code block on the web, not just on GitHub.

fregante commented

Generally the problem I've found is that sometimes broken code blocks also lack any language marking so unless "JavaScript" is specified, this extension can't do anything.

sindresorhus commented

I often encounter blog posts with code examples using a bad and inconsistent code style but which is still correctly syntax highlighted.

  • 👍1
Haroenv commented

Maybe that can be solved with a button to format code when needed in case the language mode isn't specified

wasd171 commented

I have created a very raw implementation, it basically reformats every <code></code> it can find

  • 👍1
ritz078 commented

It will be great if this extension exists for firefox and safari also. You can use https://github.com/EmailThis/extension-boilerplate for that (I am not related to that project).

I had started to build it but found that @wasd171 is already doing it. So I thought I will just share the ideas I had.

  • if language-* class exists take language form there.
  • I tried to auto detect language using highlight.js but found that most of the times it fails.
  • Only format <pre><code></code></pre> as only <code></code> won't require formatting.
  • Give a small button to disable button on the top right corner of each code block.

I have no idea how to get the language of code if its not available. So maybe in that case we can give a select box at the top right of the code block to select from prettier supported languages or just the popup.html can be used to select a language to apply to whole page. Most of the times whole page contains the same code language.

Enhancement : Support code highlighting using highlight.js. It can be easily detected most of the times if the code is syntax highlighted or not using the HTML tags in the code block.

@wasd171 Let me know if you need any help.
Others feel free to add any ideas.

  • 👍1
wasd171 commented

@ritz078 Thank you for your ideas! Unfortunately I am in the middle of my finals (for the whole August), so I can't actively contribute.

Right now it tries to reformat the code and keeps the original if prettier fails with error. Does prettier autodetect the language? If so, perhaps it would be possible to extract this information afterwards?

Modifying Medium-style code blocks looks hard, it is probably needed to parse the HTML structure to get the code string. But perhaps if a such two-way parser can be created, afterwards the extension can fill formatted HTML back and get "native" highlighting.

mrchief commented

Prettier is pretty biased. Formatting code with it can lead to code looking different than what is in the actual source. Or am I missing something here?

Mottie commented

Modifying Medium-style code blocks looks hard

I created a Darker-Medium extension that formats code blocks on Medium sites. All I had to do was target all .section-content pre, add a prettyprint class and call Google Prettify (source); because of the way the HTML is formatted, you can't include line numbers. I think it would have been much harder with prettier.