PFE-Codeblock: Make component more customizeable and allow for no language

[wesruv]

General updates to Codeblock to make it better for wider use:

• Add more CSS vars for custom styling
• Support none for language and set as default value for code-language instead of markup
• Make sure language-none is styled in a way where it doesn't look like disabled text (light theme kinda looks like that)

Impacted component(s)

• pfe-codeblock

[wesruv]

In progress code: https://github.com/patternfly/patternfly-elements/pull/1775

[bennypowers]

Is this still relevant for 2.0?

[wesruv]

It looks like it, I tried to add this to the demo page:

<pfe-codeblock code-language="none" code-theme="dark">
  <pre codeblock-container>
    <code>
      Wakka wakka!
    </code>
  </pre>
</pfe-codeblock>

Which threw this error:

bundle.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rest')
    at Object.tokenize (bundle.js:1:39126)
    at Object.highlight (bundle.js:1:38987)
    at ct.updateCodeBlock (bundle.js:4589:282)
    at ct._codeblockChanged (bundle.js:4587:89)
    at fi.hostUpdate (bundle.js:824:6466)
    at bundle.js:15:6594
    at Array.forEach (<anonymous>)
    at ct.performUpdate (bundle.js:15:6525)
    at ct.scheduleUpdate (bundle.js:15:6267)
    at ct._$EC (bundle.js:15:6175)

No content appeared :(

I checked the SCSS file and there doesn't appear to be any theming opportunities for updating colors: Compare this (no CSS vars): https://github.com/patternfly/patternfly-elements/blob/main/elements/pfe-codeblock/pfe-codeblock-material-light.scss

To the WIP PR: https://github.com/patternfly/patternfly-elements/pull/1775/files#diff-7fa70aff3c4255f7b78e2df38c9cc05ed22beb7cb55f4616d52a3afc94748ac9

[wesruv]

Logged another issue I found while testing this: https://github.com/patternfly/patternfly-elements/issues/1883

[wesruv]

I just realized that wasn't the most up to date version of the component 😢