Improve code blocks

[mtsknn]

• Replace highlight.js with Prism
  • I replaced Prism with highlight.js less than 3 weeks ago in Replace Prism with highlight.js #11 😅 but Prism's Diff Highlight plugin makes diff code blocks look much better!
• Update styles
  • Before (third line highlighted for demo purposes only):
    
  • After:
    
• Fix visual bugs
  • Addition/deletion lines in diff code blocks had extra space below them on iOS Safari (Telegram converted the screenshot to JPG 🤦‍♂️):
    
  • Long lines sometimes wrapped on iOS Safari:
    
  • Identation of code blocks was off inside lists and blockquotes in XS screen size:
    
• Make code blocks focusable for keyboard accessibility
  • Hat tip to Jake Trent for inspiring me originally with his article Make Code Blocks Keyboard Accessible
  • Hat tip to Andria Brown for reminding me of the issue with her PR #48 to eleventy-plugin-syntaxhighlight
  • Hat tip to Marcus Herrmann for his article Accessible Overflow. Otherwise I would have added only tabindex="0", not aria-label and role="region"

[netlify]

✔️ Deploy Preview for mtsknn ready!

🔨 Explore the source changes: 22836c9

🔍 Inspect the deploy log: https://app.netlify.com/sites/mtsknn/deploys/611c9e820c212d000836d5ea

😎 Browse the preview: https://deploy-preview-16--mtsknn.netlify.app