EuiCode now consumes EuiCodeBlock and can highlight text

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Changed the hover states of `EuiButtonEmpty` to look more like links.
+- Added `inline` and `transparentBackground` props to `EuiCodeBlock`. Made light theme the default.
 
 # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release
 

src-docs/src/views/code/code_block.js

@@ -21,8 +21,19 @@ export default () => (
 
     <EuiSpacer />
 
-    <EuiCodeBlock language="js" fontSize="l" paddingSize="s" color="light" overflowHeight={300}>
+    <EuiCodeBlock language="js" fontSize="l" paddingSize="s" color="dark" overflowHeight={300}>
       {jsCode}
     </EuiCodeBlock>
+
+    <EuiSpacer />
+
+    <div>
+      {/* You should probably vertically align your content against the code block for centering. */}
+      <span style={{ verticalAlign: 'middle'}}>Inline code with a transparent background: </span>
+      <EuiCodeBlock language="html" fontSize="m" inline transparentBackground>
+        {htmlCode}
+      </EuiCodeBlock>
+    </div>
+
   </div>
 );

src-docs/src/views/code/code_example.js

@@ -62,6 +62,8 @@ export default props => (
             <li><EuiCode>paddingSize</EuiCode> accepts "s" / "m" / "l" (default).</li>
             <li><EuiCode>fontSize</EuiCode> accepts "s" (default) / "m" / "l".</li>
             <li><EuiCode>overflowHeight</EuiCode> accepts a number. By default it is not set.</li>
+            <li><EuiCode>transparentBackground</EuiCode> set to <EuiCode>false</EuiCode> will remove the background.</li>
+            <li><EuiCode>inline</EuiCode> will display the passed code in an inline format. Will also remove any margins set.</li>
           </ul>
         </div>
       }

src/components/code/_code_block.scss

@@ -35,4 +35,20 @@
   &.euiCodeBlock--paddingLarge {
     padding: $euiSizeL;
   }
+
+  &.euiCodeBlock--inline {
+    display: inline;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+
+    .euiCodeBlock__pre, .euiCodeBlock__code {
+      display: inline;
+      white-space: normal;
+    }
+  }
+
+  &.euiCodeBlock--transparentBackground {
+    background: transparent;
+  }
 }

src/components/code/_code_block_light.scss

@@ -1,3 +1,4 @@
+
 .euiCodeBlock--light {
   background: #F5F5F5;
   color: #3F3F3F;

src/components/code/code_block.js

@@ -51,11 +51,13 @@ export class EuiCodeBlock extends Component {
     const {
       children,
       className,
-      language,
       color,
       fontSize,
-      paddingSize,
+      inline,
+      language,
       overflowHeight,
+      paddingSize,
+      transparentBackground,
       ...otherProps
     } = this.props;
 
@@ -64,6 +66,12 @@ export class EuiCodeBlock extends Component {
       colorToClassNameMap[color],
       fontSizeToClassNameMap[fontSize],
       paddingSizeToClassNameMap[paddingSize],
+      {
+        'euiCodeBlock--transparentBackground': transparentBackground,
+      },
+      {
+        'euiCodeBlock--inline': inline,
+      },
       className
     );
 
@@ -109,7 +117,8 @@ EuiCodeBlock.propTypes = {
 };
 
 EuiCodeBlock.defaultProps = {
-  color: 'dark',
+  color: 'light',
+  transparentBackground: false,
   paddingSize: 'l',
   fontSize: 's',
 };