_kud's tech blog

How to edit a markdown in 2020, part 3: prettier

…or how to force to use mdx parser.

In this post, we changed the default extension .mdx to .md especially in order to be able to use Markdown Editors which sometimes only allow .md files.

However, it comes with a downside I didn't expect: prettier.

Indeed, in the settings of my editors, I set that I want to use prettier everytime I save a file. The thing is prettier thinks we've got here a markdown file and not a MDX one, depending on the extension, so I have a wrong formatting. But we can fix that!

How? By defining in the prettier configuration to override the parser.

Open or create your prettier config file and add override settings:

1// .prettierrc.js
2module.exports = {
3 overrides: [
4 {
5 files: "*.md",
6 options: {
7 parser: "mdx",
8 },
9 },
10 ],
11}

It will force to use MDX parser instead of markdown parser for any .md files. Great! πŸ™ŒπŸ»

Just a little thing before leaving you, I'll give you my configuration for Sublime Text > JsPrettier, because a trick is needed too.

In JsPrettier Settings - User, you must add this line:

1{
2 "auto_format_on_save": true,
3+ "additional_cli_args": { "--config-precedence": "file-override" }
4}

Now, you've got all the cards to choose between the different extensions. There's pros and cons. But you've seen zmv, prettier, and different markdown editors thanks to that.