[bx-code-snippet]: Component Enhancements

[andy-blum]

The problem

There's been a request in the AEM platform for use of the code-snippet component for use in technical writing. A couple of component improvements that have been brainstormed are adding the option for text-wrapping (instead of overflowing the x-axis) and syntax highlighting for ease of readability.

The solution

I'm envisioning these as opt-in features like so:

<bx-code-snippet language="scss" wrap>
@mixin grid-container {
  width: 100%;
  padding-right: padding(mobile);
  padding-left: padding(mobile);

  @include breakpoint(bp--xs--major) {
    padding-right: padding(xs);
    padding-left: padding(xs);
  }
}

$z-indexes: (
  modal : 9000,
  overlay : 8000,
  dropdown : 7000,
  header : 6000,
  footer : 5000,
  hidden : - 1,
  overflowHidden: - 1,
  floating: 10000
);
</bx-code-snippet>

lang="scss" can be used to dynamically import highlight JS assets to help apply syntax highlighting
wrap can be used to enable text wrapping within the component instead of overflowing the width of the component

Application/website

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/carbon-web-components/?path=/story/components-code-snippet--multi-line

Business priority

Low Priority = release date is not dependent on fix or not upcoming

What time frame would this ideally be needed by (if applicable)

No response

Examples

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[tw15egan]

Hey @andy-blum! Text wrapping is already supported through the wrapText prop. As far as syntax highlighting goes, we've had a few discussions about this, but ultimately have left it up to product teams to determine a syntax highlighting theme that works best for their use-case. CodeSnippet should work with libraries like https://prismjs.com/ and https://highlightjs.org/, but please let us know if that is not the case.