pass lang to the highlighter and add lang to the end of the page title

src/app/(pages)/[id]/page.tsx

@@ -3,7 +3,7 @@ import { ActionMenu } from "@/app/components/action-menu";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
-import { CodeBlock } from "@/app/components/codeBlock";
+import { CodeBlock } from "@/app/components/code-block";
 import { detectLanguage } from "@/app/common/lang-detection/detection";
 
 type PasteProps = {
@@ -61,7 +61,7 @@ export async function generateMetadata({
   }
 
   return {
-    title: `Paste - ${id}`,
+    title: `Paste - ${id}.${data.language}`,
     description: `Created: ${moment(data.created)}\n\nClick to view the paste.`,
   };
 }
@@ -83,7 +83,7 @@ export default async function Paste({
       </div>
 
       <div className="p-1 hljs !bg-transparent text-sm">
-        <CodeBlock code={data.content} />
+        <CodeBlock code={data.content} language={data.language} />
       </div>
     </div>
   );

src/app/components/code-block.tsx

@@ -8,13 +8,19 @@ type CodeBlockProps = {
    * The code to highlight.
    */
   code: string;
+
+  /**
+   * The language of the code.
+   */
+  language: string;
 };
 
-export function CodeBlock({ code }: CodeBlockProps): ReactElement {
+export function CodeBlock({ code, language }: CodeBlockProps): ReactElement {
   return (
     <SyntaxHighlighter
       className="!bg-transparent text-xs"
       style={atomOneDark}
+      language={language}
       showLineNumbers
       codeTagProps={{
         style: {