add language indicator to the code highlighter
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m32s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m32s
This commit is contained in:
parent
00a5febf66
commit
96dc8de92f
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user