-
Notifications
You must be signed in to change notification settings - Fork 0
/
CodeBlock.tsx
69 lines (67 loc) · 2.13 KB
/
CodeBlock.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import dynamic from "next/dynamic";
import { CodeComponent } from "react-markdown/lib/ast-to-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
import toml from "toml";
import PyConfig from "./PyConfig";
const CodeBlock: CodeComponent = ({ inline, className, children }) => {
if (inline) {
return <code className={className}>{children}</code>;
}
const match = /language-(\w+)/.exec(className || "");
const lang = match && match[1] ? match[1] : "";
const codeBlockParams = className ? className.split(":") : [];
let filename = codeBlockParams?.length >= 2 ? codeBlockParams[1] : "";
const code = String(children).replace(/\n$/, "");
let extra = null;
if (
lang === "python" &&
codeBlockParams.length >= 2 &&
codeBlockParams.includes("pyscript")
) {
filename = codeBlockParams.length > 2 ? filename : "";
const PyScript = dynamic(() => import("./PyScript"), { ssr: false });
extra = <PyScript code={String(children)}></PyScript>;
} else if (lang === "pyrepl") {
const PyRepl = dynamic(() => import("./PyRepl"), { ssr: false });
return <PyRepl code={code} />;
} else if (lang === "pyterminal") {
const PyTerminal = dynamic(() => import("./PyTerminal"), { ssr: false });
return (
<PyTerminal
id="inlinePyTerminal"
showTitle={true}
descStyle={{ whiteSpace: "pre-wrap" }}
linkStyle={{ color: "inherit", cursor: "pointer" }}
/>
);
} else if (lang === "pyconfig") {
const config = toml.parse(code);
type Fetch = {
from: string;
to_file: string;
};
const files = config.fetch
.map((f: Fetch) => {
const tmp = f.to_file.split("/");
return `├─ ${tmp[tmp.length - 1]}`;
})
.join("\n");
return (
<>
<div>{files}</div>
<PyConfig config={code}></PyConfig>
</>
);
}
return (
<>
<div>{filename}</div>
<SyntaxHighlighter style={tomorrow} language={lang}>
{code}
</SyntaxHighlighter>
{extra}
</>
);
};
export default CodeBlock;