fix: add JS syntax highlighting to bolt-code-snippet; remove syntaxStyles from inlined CSS to sync with Sass updates made; clean out the component's innerHTML to fix cross-browser issues in FF and IE 11

Author: bolt-bot

packages/components/bolt-code-snippet/src/code-snippet.standalone.js

@@ -11,11 +11,12 @@ import {
 } from '@bolt/core';
 
 import styles from './code-snippet.scss';
-import syntaxStyles from './code-snippet-syntax.scss';
 
 import Prism from 'prismjs/components/prism-core'
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-twig';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-css-extras';
 import 'prismjs/components/prism-scss';
@@ -51,6 +52,10 @@ export class BoltCodeSnippetClass extends withPreact() {
       this.innerHTML = parentElement.innerHTML;
     }
     this.code = this.innerHTML;
+
+    if (!hasNativeShadowDomSupport) {
+      this.innerHTML = '';
+    }
   }
 
   render() {
@@ -72,11 +77,11 @@ export class BoltCodeSnippetClass extends withPreact() {
 
     if (display === 'inline'){
       return (
-        <code className={codeClasses}>{this.addStyles([styles, syntaxStyles])}{this.html(highlightedCode)}</code>
+        <code className={codeClasses}>{this.addStyles([styles])}{this.html(highlightedCode)}</code>
       )
     } else {
       return (
-        <pre className={preClasses}><code className={codeClasses}>{this.addStyles([styles, syntaxStyles])}{this.html(highlightedCode)}</code></pre>
+        <pre className={preClasses}><code className={codeClasses}>{this.addStyles([styles])}{this.html(highlightedCode)}</code></pre>
       )
     }
   }