Formatting Markdown and Codeblocks With Prettier and Hugo

hugo is a fantastic static site generator. prettier is a fantastic auto-formatter with support for markdown and the codeblocks inside markdown. To get the two to work together, we'll need to install some node dependencies. (alternatively, you could build a container with these dependencies and run it with a volume as a pre-commit hook)

cd my-hugo-site
yarn init
yarn add husky lint-staged prettier

Then add the following scripts and lint-staged keys to your package.json.

{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.md": ["prettier --parser markdown --write", "git add"]
}
}

That's it. Add a new markdown file and watch it be formatted!

After implementing this in a precommit hook and in my editor I no longer have to worry about any formatting issues when I'm writing, which is fantastic!

Now I see this when committing new posts:

➜ git commit -m 'formatting markdown in hugo'
husky > npm run -s precommit (node v8.2.1)
✔ Running tasks for *.md
[hugo 046c937] formatting markdown in hugo
1 file changed, 35 insertions(+)
create mode 100644 content/post/formatting-markdown-and-codeblocks-with-prettier-and-hugo.md

Join the Newsletter

My newsletter is where you'll find exclusive content from me. I write about technology, startups, and why you shouldn't call yourself a junior engineer

Web Mentions