Add syntax highlight for code blocks

[nkilm]

Additions

• Used rehype-pretty-code for build-time syntax highlighting.
• Theme used - one-dark-pro, theme can be changed in next.config.js.

Related Issues

#103 - Syntax Highlighting in docs

Example

checkout the code snippet here - /docs/running-on-vercel

// mentioning programming language is important to highlight appropriate keywords
<script
  async
  defer
  src="/stats/script.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
></script>

References

• https://rehype-pretty-code.netlify.app/
• Supported themes - shiki-themes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 27, 2023 5:39pm

[nkilm]

@uncenter Please check, I've implemented all the requested changes.

Syntax highlighting works for latest code

[uncenter]

Nice work! One last thing. I was taking a look at the code blocks on the website and they look a little dull/grayish with the current theme. I messed around with a bunch of themes and github-light really looks nice.

Thoughts? It seems much sharper and stands out more.

[nkilm]

Yeah I was about mention that!😅

I'll change the theme to github-light.

[nkilm]

@uncenter Done✅

[nkilm]

@uncenter I've removed that package.

[uncenter]

@uncenter I've removed that package.

Did you run the uninstall command or just remove it from the package.json? Looks like you had a build failure as soon as you did that.

[nkilm]

@uncenter I've removed that package.

Did you run the uninstall command or just remove it from the package.json? Looks like you had a build failure as soon as you did that.

I didn't remove it using yarn uninstall. I did it manually. I'll fix it now, also are there any other changes which are to be made?

[uncenter]

I think that's it. If the build succeeds + no unnecessary files are changed, it should be good to go.

[nkilm]

Alright

[nkilm]

@uncenter I've fixed the issue now, build is successful.

[mikecao]

We've made major changes to the website, so instead of dealing with merge conflicts, I implemented your solution. It's live on the website now. Closing this PR.

[uncenter]

Great! New design + syntax highlighting looking good.