Style markdown code blocks

[WebsByTodd]

• Github Light theme chosen from the list of themes here
• Can use CSS variables instead to create our own custom theme.

  selfie/docs/src/styles/tailwind.css

  Lines 16 to 28 in e8114e7

  	:root {
  	--shiki-color-text: #BBB;
  	--shiki-color-background: #EEE;
  	--shiki-token-constant: #ff8866;
  	--shiki-token-string: #8855ff;
  	--shiki-token-comment: #BBB;
  	--shiki-token-keyword: #0099ff;
  	--shiki-token-parameter: #33cccc;
  	--shiki-token-function: #FFAA00;
  	--shiki-token-string-expression: #8855ff;
  	--shiki-token-punctuation: #BBB;
  	--shiki-token-link: #0099ff;
  	}

• Java text blocks are breaking the syntax highlighting a bit (can be seen in the screenshot).

[WebsByTodd]

This also fixes #28

[nedtwigg]

Can we make the line height of the code blocks responsive? Ideally the height of the text and of the gap between lines would be the same in the code examples as in the body text above it.

Aside, the body text in this version looks a bit larger/fatter than in Framer. I think Framer's looks better, this is just a tad too heavy right now.

[WebsByTodd]

Captured your code block feedback in #31 .

Aside, the body text in this version looks a bit larger/fatter than in Framer. I think Framer's looks better, this is just a tad too heavy right now.

In regards to this, I definitely see what you're talking about but I'm not sure of the root cause. The font, weights, sizes, and colors are identical in our app to the ones in framer. Then problem could be:

• There is some CSS class (like border-style) that has an impact that I don't know about.
• The actual loaded font glyphs are different. We're getting ours from the google CDN.

LMK if you think it's worth pursuing and I'll make an issue to track it and try to figure it out.