Highlight code blocks in components docs

[xxdavid]

Hi @cblavier!

Finally I got some time work on Phoenix Storybook. 🙁 With this PR, I am building on your great work in #525 and fixing the only leftover from #514 – syntax highlighting for code blocks in the docs.

The code for highlighting was heavily inspired by
https://github.com/dashbitco/nimble_publisher/blob/140066e4c7b39f2c93bae662d3606fca1c1dce4d/lib/nimble_publisher/highlighter.ex

It works for both HEEx and Elixir code. When the language is not explicitly mentioned, HEEx is assumed if the code block starts with < (for an HTML tag), otherwise Elixir is used.

[cblavier]

Thank you, David!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.48%. Comparing base (0b549e5) to head (6545620).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #561      +/-   ##
==========================================
+ Coverage   96.45%   96.48%   +0.03%     
==========================================
  Files          40       40              
  Lines        2201     2222      +21     
==========================================
+ Hits         2123     2144      +21     
  Misses         78       78              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cblavier]

The code looks good to me! 👍
can you please add some tests? (see #561 (comment))
you can run mix coverage locally

[xxdavid]

Of course, I forget to write some. I'll do it now and force push with an amended commit.

[xxdavid]

Now it should be better. 🙂

[cblavier]

perfect, thanks! 🚀