We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
For some reason, when using this library, I'm getting a small indent before the first line of code. Why is this happening?
import { useEffect, useState } from "react"; import { CopyBlock, atomOneDark } from "react-code-blocks"; import { CopyBlockProps } from "react-code-blocks/dist/components/CopyBlock"; export const base: string = "/assets/code/"; export interface Language { display: string; extension: string; } export const languages: Language[] = [ { display: "C++", extension: "cpp", }, { display: "Python", extension: "py" } ]; export type SourceCode = null | string; export interface SCodeBlockProps extends Omit<Omit<CopyBlockProps, "text">, "language"> { path: string; } export const SCodeBlock = ({ path, ...props }: SCodeBlockProps) => { const [codes, setCodes] = useState<SourceCode[]>(languages.map(() => null)); useEffect(() => { async function getCode(ext: string): Promise<SourceCode> { try { const res = await fetch(`${base}${path}.${ext}`); if (res.status === 404) { // file with this extension not found, no problem! return null; } else { return res.text(); } } catch (error) { // some severe error console.error("Sorry, there was an error fetching the solution."); console.error("Please report this to one of the managers on discord."); console.error(error); return null; } } (async () => { const codes = await Promise.all(languages.map(({ extension }) => getCode(extension))); setCodes(codes); })(); }, [path]); return ( <Tabs isFitted defaultIndex={0} variant="line"> <TabList mb={1}> { ...languages.filter((_, idx) => codes[idx] !== null).map(({ display, extension }) => { return <Tab key={extension}>{display}</Tab> }) } </TabList> <TabPanels > { ...codes.filter(code => code !== null).map((code, idx) => { return ( <TabPanel key={idx}> <CopyBlock text={code} language={languages[idx]!.extension} theme={atomOneDark} customStyle={{ maxHeight: "30em", overflowY: "auto", fontSize: "0.8rem", marginTop: "0.5rem", }} showLineNumbers {...props} /> </TabPanel> ) }) } </TabPanels> </Tabs> ); }``` This is our code.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
For some reason, when using this library, I'm getting a small indent before the first line of code. Why is this happening?
The text was updated successfully, but these errors were encountered: