Code Block

[markcaron]

RH Code Block has been designed and is ready to be developed. But, there are a lot of features / API options.

See Code Block mockups

Our ability to start with certain features might depend on how we implement <rh-code-block> (i.e. zero-md, Highlight.js, etc.), but I'd like to start this discussion about what features we should implement first, so that we don't bite off more than we can chew in our first version/release.

The MVP will include:

• Base style for light theme
• Base styles for dark theme
• Fixed width and fluid width

What additional features should we implement in the MVP?

1. Compact size
2. Toolbar above code block
3. Copy to clipboard
4. Copy to clipboard in toolbar
5. Show language on hover
6. Show language in toolbar
7. Syntax highlighting on light and on dark **
8. Style toggle in toolbar
9. Theme toggle in toolbar
10. Code language tabs
11. Callout numbers (under review)
12. Line highlighting
13. External links in toolbar
14. Line wrapping and scrolling toggle
15. Drag to resize
16. Collapsible / expandable to full height

** With syntax highlighting, we may also want to discuss what language(s) we should start with first.

Note: actual API names are not set in stone either, so feel free to help us decide how they should be named and implemented, of course.

[markcaron]

@RedHat-UX/developers @RedHat-UX/designers @RedHat-UX/a11y-unicorns ^

[bennypowers]

Thinking about that feature set, some of them are client-side only, like 3, 4, 8, 9, 14

but others like 2, 5, 6, 7, 11, 12 (especially syntax highlighting and themes) could be offered server side, which would be a better user experience. We would likely still need to offer them as opt-in client side features, e.g. in cases where the snippet is provided by third party scripts, unlexed.

[brianferry]

I feel like if I was designing around what I myself would prefer it would be the copy command whether it's an overlay or it's part of a toolbar. The tabs and external links would be really nice for the docs but probably not MVP. This all looks great btw loving these mocks