diff --git a/package-lock.json b/package-lock.json
index eec1ca52e..9a23e60b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24010,6 +24010,11 @@
         }
       }
     },
+    "react-middle-ellipsis": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-middle-ellipsis/-/react-middle-ellipsis-1.1.0.tgz",
+      "integrity": "sha512-jEkF6l6l12/V70bYqCCEdHRDFHVG8kdR46tcE5HBssgPDaoLm7XC9hkrL1cW4eL4wi2/0g19PMORge38ReXp9A=="
+    },
     "react-reconciler": {
       "version": "0.24.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.24.0.tgz",
diff --git a/package.json b/package.json
index 062233d60..ac72323f3 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-helmet": "^6.0.0",
     "react-live": "^2.2.2",
     "react-markdown": "^4.3.1",
+    "react-middle-ellipsis": "^1.1.0",
     "react-shadow": "^18.1.2"
   },
   "devDependencies": {
diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index 0ecef8fba..77ecb9d94 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
+import MiddleEllipsis from 'react-middle-ellipsis';
 import FeatherIcon from './FeatherIcon';
 import styles from './CodeSnippet.module.scss';
 import useClipboard from '../hooks/useClipboard';
 import useFormattedCode from '../hooks/useFormattedCode';
 
-const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
+const CodeSnippet = ({ children, copy, className, lineNumbers, fileName }) => {
   const language = className.replace('language-', '');
   const formattedCode = useFormattedCode(children ?? '');
   const [copied, copyCode] = useClipboard();
@@ -39,12 +40,29 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
           )}
         </Highlight>
       </div>
-      {copy !== 'false' && (
-        <div className={styles.copyBar}>
-          <button type="button" onClick={() => copyCode(formattedCode.trim())}>
-            <FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
-            {copied ? 'Copied!' : 'Copy output'}
-          </button>
+      {(copy !== 'false' || fileName) && (
+        <div className={styles.bottomBar}>
+          <div className={styles.fileName}>
+            {fileName && (
+              <MiddleEllipsis>
+                <span title={fileName}>{fileName}</span>
+              </MiddleEllipsis>
+            )}
+          </div>
+          {copy !== 'false' && (
+            <button
+              className={styles.copyButton}
+              type="button"
+              onClick={() => copyCode(formattedCode.trim())}
+            >
+              <FeatherIcon
+                name="copy"
+                size="1rem"
+                className={styles.copyIcon}
+              />
+              {copied ? 'Copied!' : 'Copy output'}
+            </button>
+          )}
         </div>
       )}
     </div>
@@ -53,15 +71,16 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
 
 CodeSnippet.propTypes = {
   children: PropTypes.node.isRequired,
-  copy: PropTypes.string,
   className: PropTypes.string,
+  copy: PropTypes.string,
+  fileName: PropTypes.string,
   lineNumbers: PropTypes.string,
 };
 
 CodeSnippet.defaultProps = {
+  className: 'language-javascript',
   copy: 'true',
   lineNumbers: 'true',
-  className: 'language-javascript',
 };
 
 export default CodeSnippet;
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index a125d219c..ef3be624a 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -28,20 +28,29 @@
   opacity: 0.5;
 }
 
-.copyBar {
+.bottomBar {
   box-sizing: border-box;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   background: var(--color-neutrals-200);
+  padding: 0 1rem;
+}
 
-  button {
-    font-size: 0.75rem;
-    color: var(--color-brand-800);
-    background: none;
-    border: none;
-    outline: none;
-  }
+.fileName {
+  font-family: var(--code-font);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 0.5rem;
+}
+
+.copyButton {
+  font-size: 0.75rem;
+  color: var(--color-brand-800);
+  background: none;
+  border: none;
+  outline: none;
 }
 
 .copyIcon {
diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index 59201d902..671485456 100644
--- a/src/markdown-pages/example.mdx
+++ b/src/markdown-pages/example.mdx
@@ -66,7 +66,7 @@ npm start
 ## Make sure you're getting data from the right New Relic account
 In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI):
 
-```jsx
+```jsx fileName=/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js
 this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
 ```