feat: add docs-code component

Author: camwiegert

package-lock.json

@@ -20,6 +20,7 @@
     "fast-glob": "^2.2.4",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
+    "highlight.js": "^9.13.1",
     "jsdom": "^13.0.0",
     "listr": "^0.14.3",
     "marked": "^0.5.2",

package.json

@@ -1,2 +1,9 @@
 import marked from 'marked';
-export default (markdownString) => marked(markdownString);
+import hljs from 'highlight.js';
+
+const renderer = new marked.Renderer();
+
+renderer.code = (code: string, lang = '') =>
+  `<docs-code language="${lang}">${hljs.highlightAuto(code, [lang]).value}</docs-code>`;
+
+export default (markdownString) => marked(markdownString, { renderer });

scripts/build-documents/markdown-renderer.ts

@@ -13,6 +13,13 @@ import '@stencil/state-tunnel';
 
 export namespace Components {
 
+  interface DocsCode {
+    'language': string;
+  }
+  interface DocsCodeAttributes extends StencilHTMLAttributes {
+    'language'?: string;
+  }
+
   interface DocsDocument {
     'path': string;
   }
@@ -29,18 +36,26 @@ export namespace Components {
 
 declare global {
   interface StencilElementInterfaces {
+    'DocsCode': Components.DocsCode;
     'DocsDocument': Components.DocsDocument;
     'DocsMenu': Components.DocsMenu;
     'DocsRoot': Components.DocsRoot;
   }
 
   interface StencilIntrinsicElements {
+    'docs-code': Components.DocsCodeAttributes;
     'docs-document': Components.DocsDocumentAttributes;
     'docs-menu': Components.DocsMenuAttributes;
     'docs-root': Components.DocsRootAttributes;
   }
 
 
+  interface HTMLDocsCodeElement extends Components.DocsCode, HTMLStencilElement {}
+  var HTMLDocsCodeElement: {
+    prototype: HTMLDocsCodeElement;
+    new (): HTMLDocsCodeElement;
+  };
+
   interface HTMLDocsDocumentElement extends Components.DocsDocument, HTMLStencilElement {}
   var HTMLDocsDocumentElement: {
     prototype: HTMLDocsDocumentElement;
@@ -60,12 +75,14 @@ declare global {
   };
 
   interface HTMLElementTagNameMap {
+    'docs-code': HTMLDocsCodeElement
     'docs-document': HTMLDocsDocumentElement
     'docs-menu': HTMLDocsMenuElement
     'docs-root': HTMLDocsRootElement
   }
 
   interface ElementTagNameMap {
+    'docs-code': HTMLDocsCodeElement;
     'docs-document': HTMLDocsDocumentElement;
     'docs-menu': HTMLDocsMenuElement;
     'docs-root': HTMLDocsRootElement;

src/components.d.ts

@@ -0,0 +1,22 @@
+@import './highlight-theme.css';
+
+docs-code {
+  display: block;
+}
+
+docs-code pre {
+  position: relative;
+}
+
+docs-code pre:before {
+  color: #bdc5d1;
+  content: attr(data-language);
+  font-family: var(--code-font-family);
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  padding: 0.65em;
+  position: absolute;
+  right: 0;
+  text-transform: uppercase;
+  top: 0;
+}

src/components/code/code.css

@@ -0,0 +1,15 @@
+import { Component, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'docs-code',
+  styleUrl: 'code.css'
+})
+export class DocsCode {
+  @Prop() language = '';
+
+  render() {
+    return (
+      <pre data-language={this.language}><code><slot/></code></pre>
+    );
+  }
+}

src/components/code/code.tsx

@@ -0,0 +1,81 @@
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #8c9296;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #2b90ff;
+}
+
+.hljs-tag {
+  color: #91c5ff;
+}
+
+.hljs-tag .hljs-name {
+  color: #2b90ff;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #ff6810;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute,
+.hljs-attr {
+  color: #8454ff;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-string a {
+  color: #42b983;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #ffbb01;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #f55073;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

src/components/code/highlight-theme.css

@@ -102,14 +102,16 @@ pre {
   border-radius: 4px;
   line-height: 1.2;
   margin: 2rem 0;
-  overflow-x: auto;
+  overflow: auto;
   padding: 20px;
 }
 
 pre code {
   background-color: transparent;
   color: inherit;
   font-weight: 500;
+  padding: 0;
+  white-space: inherit;
 }
 
 table {