add code block styling on 18f blog

[peterrowland]

Pull request summary

Add some style rules to differentiate code blocks from regular text and to wrap text so it doesn't overflow.

(Optional) Closes #(issue_number).
#3824
#3823

Reminder - please do the following before assigning reviewer

• For frontend changes, ensure design review

And make sure that automated checks are ok

• fix houndci feedback
• ensure tests pass
• federalist builds
• no new SNYK vulnerabilities are introduced

[cantsin]

Yay! Thank you. Flagging that we are moving 18f.gsa.gov to 11ty and wanted to make sure this wasn't lost in the noise. @beechnut -- OK to merge or do we wait to merge till post-migration?

[melchoyce]

For design review, could we grab a before/after screenshot? 👀

[peterrowland]

Here is an example from a blog post of before and after:

link

link

[peterrowland]

This adds styling to a pre highlight element that contains the code block. As far as I know, these blocks only appear in a handful of entries that use the ``` markdown around code blocks. Would appreciate If someone who knows the website and USWDS better than me could sign off on adding the right rules in the right place.

[melchoyce]

LGTM on the design side 👍

[cantsin]

LGTM