prodo-dev / prodo

Prodo is a React framework to build apps faster.
https://docs.prodo.dev
MIT License
114 stars 5 forks source link

Update docs code highlighting #169

Closed coffee-cup closed 5 years ago

coffee-cup commented 5 years ago

Closes #168

We were previously using gatsby-remark-prismjs for syntax highlighting. There seemed to be a bug when highlighting lines that were highlighted. I noticed that other blogs that use the same plugin had the same issue. However, the gatsby docs did not have the same problem. After looking though the source code I found that Gatsby does the syntax highlighting more manually. This PR implements a lot of that, which fixes the copy/pasting bug. (although new lines are not preserved in the copy, but I will look into that in another PR).

I also added a small copy button to code snippets.

Broken Copy

copy-bug-broken

Copy Fixed

copy-bug-fixed

Copy Button

copy-button