Merge branch 'showcase-syntax-highlight' into 'master'

showcase: Fix syntax highlighting

See merge request !47

packages/common/styles.js

@@ -55,15 +55,6 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
             margin-bottom: 0.75rem;
         }
 
-        code {
-            background-color: var(--dbp-light);
-            color: var(--dbp-danger-bg-color);
-            font-size: 1em;
-            line-height: 1.5em;
-            font-weight: normal;
-            padding: 0.25em 0.5em 0.25em;
-        }
-
         .field:not(:last-child) {
             margin-bottom: 0.75rem;
         }

toolkit-showcase/src/styles.js

-import {css, CSSResult} from 'lit-element';
+import {css, CSSResult, unsafeCSS} from 'lit-element';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import highlightCSSPath from 'highlight.js/styles/github.css';
 
 /**
  * We want to have "neutral" colors here
@@ -8,6 +10,8 @@ import {css, CSSResult} from 'lit-element';
 export function getDemoCSS() {
     // language=css
     return css`
+        @import url("${unsafeCSS(commonUtils.getAssetURL(highlightCSSPath))}");
+
         h1.title {margin-bottom: 1em;}
         div.container {margin-bottom: 1.5em;}
         h1, h2, h3, h4 {
@@ -71,5 +75,19 @@ export function getDemoCSS() {
                 -webkit-filter: invert(0%);
             }
         }
+
+        pre {
+            background-color: var(--dbp-light);
+            padding: 0.4em;
+            overflow-x: auto;
+            border: 1px solid #ddd;
+        }
+
+        code {
+            background-color: var(--dbp-light);
+            line-height: 1.5em;
+            font-weight: normal;
+            padding: 0.25em 0.5em 0.25em;
+        }
     `;
 }
\ No newline at end of file