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)
|
// uncomment the line below to enable Spotlight (https://spotlightjs.com)
|
||||||
// spotlight: process.env.NODE_ENV === 'development',
|
// spotlight: process.env.NODE_ENV === 'development',
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -13,7 +13,6 @@ import {
|
|||||||
import { capitalizeFirstLetter } from "@/app/common/string-utils";
|
import { capitalizeFirstLetter } from "@/app/common/string-utils";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { GithubLink } from "@/app/components/docs/github-link";
|
import { GithubLink } from "@/app/components/docs/github-link";
|
||||||
import { CommandMenu } from "@/app/components/command-menu";
|
|
||||||
|
|
||||||
type DocumentationPageParams = {
|
type DocumentationPageParams = {
|
||||||
params: {
|
params: {
|
||||||
|
@ -2,6 +2,8 @@ import { ReactElement } from "react";
|
|||||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||||
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
||||||
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
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 = {
|
type CodeHighlighterProps = {
|
||||||
/**
|
/**
|
||||||
@ -69,18 +71,18 @@ function rowRenderer({
|
|||||||
|
|
||||||
export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
|
export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
|
||||||
return (
|
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
|
<SyntaxHighlighter
|
||||||
|
className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
|
||||||
language={language}
|
language={language}
|
||||||
style={atomOneDark}
|
style={atomOneDark}
|
||||||
wrapLongLines
|
wrapLongLines
|
||||||
renderer={rowRenderer}
|
renderer={rowRenderer}
|
||||||
customStyle={{
|
|
||||||
maxHeight: "600px",
|
|
||||||
backgroundColor: "hsl(var(--secondary))",
|
|
||||||
wordBreak: "break-all",
|
|
||||||
borderRadius: rounded ? "0.25rem" : undefined,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{code}
|
{code}
|
||||||
</SyntaxHighlighter>
|
</SyntaxHighlighter>
|
||||||
|
@ -10,6 +10,11 @@ type CopyButtonProps = {
|
|||||||
*/
|
*/
|
||||||
content: string;
|
content: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The message to display when the content is copied.
|
||||||
|
*/
|
||||||
|
message?: string | boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The children for this element.
|
* The children for this element.
|
||||||
*/
|
*/
|
||||||
@ -22,7 +27,7 @@ type CopyButtonProps = {
|
|||||||
* @param props the properties for the button
|
* @param props the properties for the button
|
||||||
* @returns the copy button
|
* @returns the copy button
|
||||||
*/
|
*/
|
||||||
export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
|
export function CopyButton({ content, message, children }: CopyButtonProps): ReactElement {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -33,7 +38,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
|
|||||||
title: "Copied!",
|
title: "Copied!",
|
||||||
description: (
|
description: (
|
||||||
<p>
|
<p>
|
||||||
Copied <b>{content}</b> to your clipboard.
|
Copied <b>{!message ? content : message}</b> to your clipboard.
|
||||||
</p>
|
</p>
|
||||||
),
|
),
|
||||||
duration: 5000,
|
duration: 5000,
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { ReactElement, useEffect, useState } from "react";
|
import { ReactElement } from "react";
|
||||||
import { HrefButton } from "./href-button";
|
import { HrefButton } from "./href-button";
|
||||||
import Logo from "./logo";
|
import Logo from "./logo";
|
||||||
import { ToggleThemeButton } from "./theme-toggle-button";
|
import { ToggleThemeButton } from "./theme-toggle-button";
|
||||||
|
Loading…
Reference in New Issue
Block a user