ファイル名の表示機能を作成

nemog9 · Apr 14, 2023 · ebfedfe · ebfedfe · vercel · Apr 14, 2023
1 parent 6a62e73
commit ebfedfe
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/components/Code.tsx b/components/Code.tsx
@@ -10,6 +10,8 @@ export const Code: CodeComponent = ({
   ...props
 }) => {
   const match = /language-(\w+)/.exec(className || '');
+  const matchFileName =
+    className && className.includes(':') ? className.split(':') : null;
   if (match && match.length > 0 && match[1] === 'youtube') {
     return (
       <div className="youtube-wrap">
@@ -18,15 +20,18 @@ export const Code: CodeComponent = ({
     );
   }
   return !inline && match ? (
-    <SyntaxHighlighter
-      // TODO: ここのエラーを消したい
-      style={okaidia as any}
-      language={match[1]}
-      PreTag="div"
-      {...props}
-      w={100}>
-      {String(children).replace(/\n$/, '')}
-    </SyntaxHighlighter>
+    <>
+      {matchFileName && <span className="file-name">{matchFileName[1]}</span>}
+      <SyntaxHighlighter
+        // TODO: ここのエラーを消したい
+        style={okaidia as any}
+        language={match[1]}
+        PreTag="div"
+        {...props}
+        w={100}>
+        {String(children).replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    </>
   ) : (
     <code className={className} {...props}>
       {children}

diff --git a/styles/globals.css b/styles/globals.css
@@ -130,3 +130,14 @@ code {
   max-width: 680px;
   height: auto;
 }
+
+.file-name {
+  background: #167ac6;
+  color: #fff;
+  font-size: 1rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  margin-bottom: -0.8rem;
+  display: table;
+}