Build out Highlight component to auto format, consolidate global code styling

src/components/Highlight.js

@@ -7,34 +7,41 @@ import loadLanguages from 'prismjs/components/index';
 import PropTypes from 'prop-types';
 import { color, typography } from './shared/styles';
 
-loadLanguages(['bash', 'typescript', 'json']);
+const languages = ['bash', 'javascript', 'typescript', 'json'];
+loadLanguages(languages);
 
 // Prism theme copied from 'prismjs/themes/prism.css.' -- without Webpack, the CSS
 // cannot be imported easily and any app which pulls in the design system will
 // need to handle the CSS loading itself. Therefore, it is easiest to just copy
 // the theme over.
 // prettier-ignore
 const HighlightBlock = styled.div`
-  /* Theme below from: prismjs/themes/prism.css */
-  code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+  /*
+    Line below from: prismjs/themes/prism.css, with removal of overly specific
+    selectors (primarily [class*=language-]) so they are easier to override.
+  */
+  code,pre{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code ::-moz-selection,code::-moz-selection,pre ::-moz-selection,pre::-moz-selection{text-shadow:none;background:#b3d4fc}code ::selection,code::selection,pre ::selection,pre::selection{text-shadow:none;background:#b3d4fc}@media print{code,pre{text-shadow:none}}pre{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code,pre{background:#f5f2f0}:not(pre)>code{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
 
-  *:not(pre) > code[class*='language-'],
-  pre[class*='language-'] {
-    background: ${color.lighter};
-    margin: 2em 0;
-  }
-
-  code[class*='language-'],
-  pre[class*='language-'] {
-    font-size: ${typography.size.s3}px;
+  code,
+  pre {
+    font-family: ${typography.type.code};
+    font-size: ${typography.size.s2 - 1}px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   code {
-    font-size: 17px;
+    display: inline-block;
+    vertical-align: baseline;
   }
 
-  .aside code {
-    font-size: 15px;
+  pre {
+    line-height: 18px;
+    padding: 11px 1rem;
+    white-space: pre-wrap;
+    background: ${color.lighter};
+    border-radius: 3px;
+    margin: 1rem 0;
   }
 `;
 
@@ -53,16 +60,28 @@ export class Highlight extends React.Component {
   }
 
   render() {
-    const { children, ...rest } = this.props;
+    const { children, language, ...rest } = this.props;
+    const codeBlock = <div dangerouslySetInnerHTML={{ __html: children }} />;
 
     return (
       <HighlightBlock {...rest}>
-        <div dangerouslySetInnerHTML={{ __html: children }} />
+        {language ? (
+          <pre className={`language-${language}`}>
+            <code className={`language-${language}`}>{codeBlock}</code>
+          </pre>
+        ) : (
+          codeBlock
+        )}
       </HighlightBlock>
     );
   }
 }
 
 Highlight.propTypes = {
   children: PropTypes.node.isRequired,
+  language: PropTypes.oneOf(languages),
+};
+
+Highlight.defaultProps = {
+  language: null,
 };

src/components/Highlight.stories.js

@@ -1,27 +1,26 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Highlight } from './Highlight';
 
-const bash = `
-<pre class="language-bash"><code class="language-bash"><span class="token comment"># Highlight bash:</span>
+const bashCode = `# Highlight bash:
 npx install some-package-name
-<span class="token function">cd</span> some-package-name
-</code></pre>
-`;
+cd some-package-name`;
+
+const bashCodeWithWrappers = `<pre class="language-bash"><code class="language-bash">${bashCode}</code></pre>`;
 
-const javascript = `
-<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Highlight JavaScript:</span>
+const javascriptCode = `// Highlight JavaScript:
 import React from 'react'
 
 const MyComponent = () => (
   &#x3C;div>My component renders all the things&#x3C;/div>
 )
 
 export default MyComponent
-</code></pre>
 `;
 
-const typescript = `
-<pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Highlight Typescript:</span>
+const javascriptCodeWithWrappers = `<pre class="language-javascript"><code class="language-javascript">${javascriptCode}</code></pre>`;
+
+const typescriptCode = `// Highlight Typescript:
 import React from 'react'
 
 interface InterfaceMyComponentProps {
@@ -33,45 +32,101 @@ const MyComponent: React.SFC&#x3C;InterfaceMyComponentProps> = ({ isCool }) => (
 )
 
 export default MyComponent
-</code></pre>
 `;
 
-const css = `
-<pre class="language-css"><code class="language-css"><span class="token comment">/* Highlight CSS: */</span>
+const typescriptCodeWithWrappers = `<pre class="language-typescript"><code class="language-typescript">${typescriptCode}</code></pre>`;
+
+const cssCode = `/* Highlight CSS: */
 .someClass {
   position: relative;
 }
-</code></pre>
 `;
 
-const json = `
-<pre class="language-json"><code class="language-json">{
+const cssCodeWithWrappers = `<pre class="language-css"><code class="language-css">${cssCode}</code></pre>`;
+
+const jsonCode = `{
   "name": "@yourorg/package",
   "version": "0.0.1",
   "description": "A sweet package",
   "repository": {
     "type": "git",
     "url": "https://github.com/yourorg/package.git"
   }
-}
-</code></pre>
-`;
+}`;
+
+const jsonCodeWithWrappers = `<pre class="language-json"><code class="language-json">${jsonCode}</code></pre>`;
 
 export default {
   title: 'Design System|Highlight',
   component: Highlight,
 };
 
 export const allLanguages = () => (
-  <div>
-    <Highlight>{bash}</Highlight>
-    <Highlight>{javascript}</Highlight>
-    <Highlight>{typescript}</Highlight>
-    <Highlight>{css}</Highlight>
-    <Highlight>{json}</Highlight>
-  </div>
+  <Highlight>
+    {[
+      bashCodeWithWrappers,
+      javascriptCodeWithWrappers,
+      typescriptCodeWithWrappers,
+      cssCodeWithWrappers,
+      jsonCodeWithWrappers,
+    ].join('')}
+  </Highlight>
 );
 
 allLanguages.story = {
   name: 'all languages',
 };
+
+export const bash = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="bash">{bashCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{bashCodeWithWrappers}</Highlight>
+  </>
+);
+
+export const javascript = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="javascript">{javascriptCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{javascriptCodeWithWrappers}</Highlight>
+  </>
+);
+
+export const typescript = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="typescript">{typescriptCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{typescriptCodeWithWrappers}</Highlight>
+  </>
+);
+
+export const css = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="css">{cssCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{cssCodeWithWrappers}</Highlight>
+  </>
+);
+
+export const json = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="json">{jsonCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{jsonCodeWithWrappers}</Highlight>
+  </>
+);
+
+const StyledHighlight = styled(Highlight)`
+  code,
+  pre {
+    font-size: 16px;
+  }
+`;
+
+export const customStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;

src/components/shared/global.js

@@ -64,34 +64,6 @@ export const bodyStyles = css`
     margin-bottom: 1.25rem;
   }
 
-  code,
-  pre {
-    font-family: ${typography.type.code};
-    font-size: ${typography.size.s2 - 1}px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  code {
-    display: inline-block;
-    padding-left: 2px;
-    padding-right: 2px;
-    vertical-align: baseline;
-
-    color: ${color.secondary};
-  }
-
-  pre {
-    line-height: 18px;
-    padding: 11px 1rem;
-    white-space: pre-wrap;
-
-    background: rgba(0, 0, 0, 0.05);
-    color: ${color.darkest};
-    border-radius: 3px;
-    margin: 1rem 0;
-  }
-
   &.ReactModal__Body--open {
     overflow: hidden;
     &.hide-intercom #intercom-container {