Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-16 19:43:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: docs (#10126)

Browse Source
This commit is contained in:
Noel
2024-02-29 04:37:52 +01:00
committed by GitHub
parent 0f9017ef95
commit 18cce83d80
192 changed files with 8116 additions and 6321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/website/src/components/SyntaxHighlighter.tsx
View File

@@ -1,14 +1,33 @@
import { Code } from 'bright';
import { getHighlighterCore } from 'shiki/core';
import getWasm from 'shiki/wasm';
const highlighter = await getHighlighterCore({
themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark-dimmed.mjs')],
langs: [import('shiki/langs/typescript.mjs'), import('shiki/langs/javascript.mjs')],
loadWasm: getWasm,
});
export async function SyntaxHighlighter({
lang,
code,
className = '',
}: {
readonly className?: string;
readonly code: string;
readonly lang: string;
}) {
const codeHTML = highlighter.codeToHtml(code.trim(), {
lang,
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
});
export async function SyntaxHighlighter(props: typeof Code) {
return (
<>
<div data-theme="dark">
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="github-dark-dimmed" />
</div>
<div className="[&_pre]:border [&_pre]:border-gray-300 [&_pre]:rounded-md" data-theme="light">
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="min-light" />
</div>
{/* eslint-disable-next-line react/no-danger */}
<div className={className} dangerouslySetInnerHTML={{ __html: codeHTML }} />
</>
);
}