88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { generateSlug } from "./general";
|
|
import rangeParser from "parse-numeric-range";
|
|
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
|
|
import typescript from "react-syntax-highlighter/dist/cjs/languages/prism/typescript";
|
|
import scss from "react-syntax-highlighter/dist/cjs/languages/prism/scss";
|
|
import bash from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
|
|
import markdown from "react-syntax-highlighter/dist/cjs/languages/prism/markdown";
|
|
import json from "react-syntax-highlighter/dist/cjs/languages/prism/json";
|
|
import { coldarkDark as defaulttheme } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
|
import { BiCopy } from "react-icons/bi";
|
|
import { Components } from "react-markdown";
|
|
SyntaxHighlighter.registerLanguage("tsx", tsx);
|
|
SyntaxHighlighter.registerLanguage("typescript", typescript);
|
|
SyntaxHighlighter.registerLanguage("scss", scss);
|
|
SyntaxHighlighter.registerLanguage("bash", bash);
|
|
SyntaxHighlighter.registerLanguage("markdown", markdown);
|
|
SyntaxHighlighter.registerLanguage("json", json);
|
|
|
|
export const MarkdownComponents: Components = {
|
|
h3: (props: any) => {
|
|
const arr = props.children;
|
|
let heading = "";
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
if (arr[i]?.type !== undefined) {
|
|
for (let j = 0; j < arr[i].props.children.length; j++) {
|
|
heading += arr[i]?.props?.children[0];
|
|
}
|
|
} else heading += arr[i];
|
|
}
|
|
|
|
const slug = generateSlug(heading);
|
|
return (
|
|
<h3 id={slug}>
|
|
<a href={`#${slug}`} {...props}></a>
|
|
</h3>
|
|
);
|
|
},
|
|
code({ node, inline, className, ...props }: any) {
|
|
const match = /language-(\w+)/.exec(className || "");
|
|
const hasMeta = node?.data?.meta;
|
|
|
|
const applyHighlights: object = (applyHighlights: number) => {
|
|
if (hasMeta) {
|
|
const RE = /{([\d,-]+)}/;
|
|
const metadata = node.data.meta?.replace(/\s/g, "");
|
|
const strlineNumbers = RE?.test(metadata)
|
|
? // @ts-ignore
|
|
RE?.exec(metadata)[1]
|
|
: "0";
|
|
const highlightLines = rangeParser(strlineNumbers);
|
|
const highlight = highlightLines;
|
|
const data = highlight.includes(applyHighlights) ? "highlight" : null;
|
|
return { data };
|
|
} else {
|
|
return {};
|
|
}
|
|
};
|
|
|
|
return match ? (
|
|
<div>
|
|
<div className="w-full">
|
|
<button
|
|
className="w-fit ml-2 important"
|
|
onClick={() => navigator.clipboard.writeText(props.children)}
|
|
>
|
|
<BiCopy className="hover:text-action important" />
|
|
</button>
|
|
</div>
|
|
<SyntaxHighlighter
|
|
style={defaulttheme}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
className="codeStyle bg-transparent"
|
|
showLineNumbers={true}
|
|
wrapLines={hasMeta ? true : false}
|
|
useInlineStyles={true}
|
|
lineProps={applyHighlights}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<code className={className} {...props} />
|
|
);
|
|
},
|
|
};
|