diff --git a/package-lock.json b/package-lock.json
index 07d1af990..f5f4fa9cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24044,6 +24044,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 295afa157..700f35c3f 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,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 0483c23eb..1686a8c85 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -2,6 +2,7 @@ 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';
@@ -12,7 +13,7 @@ import Prism from 'prism-react-renderer/prism';
 
 require('prismjs/components/prism-ruby');
 
-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();
@@ -44,12 +45,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>
@@ -58,15 +76,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>;
 ```