add language indicator to the code highlighter
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m32s

This commit is contained in:
Lee 2024-04-22 02:11:41 +01:00
parent 00a5febf66
commit 96dc8de92f
5 changed files with 17 additions and 12 deletions

@ -15,5 +15,4 @@ Sentry.init({
// uncomment the line below to enable Spotlight (https://spotlightjs.com)
// spotlight: process.env.NODE_ENV === 'development',
});

@ -13,7 +13,6 @@ import {
import { capitalizeFirstLetter } from "@/app/common/string-utils";
import { notFound } from "next/navigation";
import { GithubLink } from "@/app/components/docs/github-link";
import { CommandMenu } from "@/app/components/command-menu";
type DocumentationPageParams = {
params: {

@ -2,6 +2,8 @@ import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import createElement from "react-syntax-highlighter/dist/esm/create-element";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { cn } from "@/app/common/utils";
import { capitalizeFirstLetter } from "@/app/common/string-utils";
type CodeHighlighterProps = {
/**
@ -69,18 +71,18 @@ function rowRenderer({
export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
return (
<div className="text-xs md:text-md">
<div className="text-xs md:text-md relative">
{/* Language */}
<div className="absolute top-0 right-0 p-1 bg-muted rounded-bl-md rounded-tr-md">
<span className="text-xs text-muted-foreground">{capitalizeFirstLetter(language)}</span>
</div>
<SyntaxHighlighter
className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
language={language}
style={atomOneDark}
wrapLongLines
renderer={rowRenderer}
customStyle={{
maxHeight: "600px",
backgroundColor: "hsl(var(--secondary))",
wordBreak: "break-all",
borderRadius: rounded ? "0.25rem" : undefined,
}}
>
{code}
</SyntaxHighlighter>

@ -10,6 +10,11 @@ type CopyButtonProps = {
*/
content: string;
/**
* The message to display when the content is copied.
*/
message?: string | boolean;
/**
* The children for this element.
*/
@ -22,7 +27,7 @@ type CopyButtonProps = {
* @param props the properties for the button
* @returns the copy button
*/
export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
export function CopyButton({ content, message, children }: CopyButtonProps): ReactElement {
const { toast } = useToast();
return (
@ -33,7 +38,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
title: "Copied!",
description: (
<p>
Copied <b>{content}</b> to your clipboard.
Copied <b>{!message ? content : message}</b> to your clipboard.
</p>
),
duration: 5000,

@ -2,7 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactElement, useEffect, useState } from "react";
import { ReactElement } from "react";
import { HrefButton } from "./href-button";
import Logo from "./logo";
import { ToggleThemeButton } from "./theme-toggle-button";