Add code snippet component

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

This PR add a umb-code-snippet component, which includes a copy button to copy the code and enhance this feature from this PR #6584 (comment)

I have been inspired by these code samples https://docs.microsoft.com/en-us/odata/webapi/netcore (which are using highlight.js)

The idea is that package developers also can re-use this component in e.g. the view after installation, in dashboard and in another part of backoffice UI in core.

At the moment this doesn't use third parthy plugins like highlight.js or Prism. #7060

Prism is lightweight and it supported by default in TinyMCE, but doesn't out of the box support razor (cshtml/vbhtml)

Highlight.js seems to have some support for razor (cshtml - not sure about vbhtml) https://github.com/highlightjs/highlightjs-cshtml-razor

It could use one of these or maybe the Ace Editor in readonly mode (https://ace.c9.io/#nav=api&api=editor under setReadOnly) microsoft/monaco-editor#54

It is also possible in Monaco Editor to set readonly mode microsoft/monaco-editor#54 if Umbraco choose to switch editor #6267

Some enhancements that can be added/improved later

• Syntax highlighting: Prism, Highlight.js, Ace Editor, Monaco Editor
• Choose to show/hide copy button or entire "header" (maybe this should be shown by default).

[bjarnef]

@nielslyngsoe what do you think on this?

[nielslyngsoe]

Hi @bjarnef

I think it looks good, but I do feel that we should find a different color than red. It might give the impression that the code is wrong(has errors)?

And now that we are at it, I think it would be nice to use a brighter gray, what do you think?

[bjarnef]

@nielslyngsoe the red color is how the <code> element is styled. Also the gray color is from the <pre> element, so I guess it is some general styles that need to be changed?

[nielslyngsoe]

@bjarnef ah, that originates from Bootstrap CSS Library, which the BackOffice originally was build upon. But now we have decoupled the project so we have our own copy of the project, which we can change as wished. Feel free to change it.

[bjarnef]

@nielslyngsoe we have this part for styling of <pre> element:
https://github.com/umbraco/Umbraco-CMS/blob/v8/dev/src/ApiDocs/umbracotemplate/styles/main.css#L201-L211

and this for styling of <code> element:
https://github.com/umbraco/Umbraco-CMS/blob/v8/dev/src/Umbraco.Web.UI/Content/bootstrap.css#L1536-L1542

https://github.com/umbraco/Umbraco-CMS/blob/v8/dev/src/Umbraco.Web.UI/Content/bootstrap.css#L1572-L1579

[bjarnef]

Should it be a neutral text color like this (black or dark gray'ish)?

https://docs.microsoft.com/en-us/odata/webapi/netcore

[bjarnef]

It might also be possible to re-use the syntax highlighting from ace editor (which already is included), but we can look at this later.
https://stackoverflow.com/questions/8832320/how-can-i-highlight-code-with-ace-editor

[nielslyngsoe]

@bjarnef would be interesting to investigate if ACE is a possibility.

If not possible with ACE then I think in terms of color that maybe this one would fit:
@blueExtraDark (#1b264f)
on a background color of:
@brownGrayLight (#f6f4f4)

But feel free to make a choice that you like, you can see color variables in variables.less

[bjarnef]

@nielslyngsoe I have updated color of code element and adjusted the styling a bit.