As a content editor, I want an option to add formatted code to blog posts or other content pages, so I can share technical content clearly.

[kmcelwee]

Allow a writer to include code blocks and inline fixed-width text. Current code blocks implemented through the <pre> tag are not mobile-friendly and require the user to manually edit HTML. It is also not currently possible to implement inline fixed-width formatting (any edits made to the HTML were stripped out when saved).

Example blog post: https://cdh.princeton.edu/updates/2021/03/19/mistakes-avoid-when-using-twitter-data-first-time/

---

update: see if we can use https://github.com/FlipperPA/wagtailcodeblock

also impacts https://cdh.princeton.edu/updates/2023/05/01/creating-an-argument-from-data/

[rlskoeser]

@cvansant I've installed a wagtail package that adds a code block. Would you try it out? You could try it out on Kevin's or Emily's posts linked above on the test site (and if we like it, we'll want to update those posts when we roll this out).

FYI, in the updated version of wagtail you can now click in the middle of a block and use the + button to the left side to open a menu, which includes an option for splitting a block in half.

[cvansant]

I'm definitely not an expert on code but I tried it on a blog post and a content post and it worked! I also saw how to split a block.

[cvansant]

Just occurred to me that I should note it is necessary to scroll horizontally to see the full line of code. I do not know if that's the plan or not.

[rlskoeser]

@cvansant I've customized the styling to decrease font size and increase margins so there's more room. It still may require scrolling on mobile in some cases, but I think that's ok.

Take a look on this test post and see what you think: https://test-web.cdh.princeton.edu/updates/2023/05/01/creating-an-argument-from-data/

[cvansant]

Looks good!