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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import hljs from "highlight.js";
const EXT_TO_LANG: Record<string, string> = {
ts: "typescript",
tsx: "typescript",
js: "javascript",
jsx: "javascript",
py: "python",
rb: "ruby",
rs: "rust",
go: "go",
java: "java",
c: "c",
cpp: "cpp",
h: "c",
hpp: "cpp",
cs: "csharp",
php: "php",
swift: "swift",
kt: "kotlin",
scala: "scala",
sh: "bash",
bash: "bash",
zsh: "bash",
fish: "bash",
ps1: "powershell",
sql: "sql",
html: "html",
htm: "html",
css: "css",
scss: "scss",
less: "less",
json: "json",
yaml: "yaml",
yml: "yaml",
toml: "ini",
xml: "xml",
md: "markdown",
markdown: "markdown",
dockerfile: "dockerfile",
makefile: "makefile",
cmake: "cmake",
lua: "lua",
r: "r",
dart: "dart",
ex: "elixir",
exs: "elixir",
erl: "erlang",
hs: "haskell",
ml: "ocaml",
clj: "clojure",
vim: "vim",
tf: "hcl",
proto: "protobuf",
graphql: "graphql",
gql: "graphql",
};
export function highlightCode(
code: string,
filename: string
): { html: string; language: string | null } {
const ext = filename.split(".").pop()?.toLowerCase() || "";
const lang = EXT_TO_LANG[ext];
if (lang) {
try {
const result = hljs.highlight(code, { language: lang });
return { html: result.value, language: lang };
} catch {
}
}
try {
const result = hljs.highlightAuto(code);
if (result.language && result.relevance > 5) {
return { html: result.value, language: result.language };
}
} catch {
}
return { html: escapeHtml(code), language: null };
}
function escapeHtml(str: string): string {
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}
export const hljsThemeCss = `
.hljs-keyword { color: #ff7b72; }
.hljs-built_in { color: #ffa657; }
.hljs-type { color: #ffa657; }
.hljs-literal { color: #79c0ff; }
.hljs-number { color: #79c0ff; }
.hljs-string { color: #a5d6ff; }
.hljs-regexp { color: #a5d6ff; }
.hljs-symbol { color: #79c0ff; }
.hljs-title { color: #d2a8ff; }
.hljs-title.function_ { color: #d2a8ff; }
.hljs-title.class_ { color: #ffa657; }
.hljs-params { color: #e6edf3; }
.hljs-comment { color: #8b949e; font-style: italic; }
.hljs-doctag { color: #8b949e; }
.hljs-meta { color: #79c0ff; }
.hljs-attr { color: #79c0ff; }
.hljs-attribute { color: #79c0ff; }
.hljs-selector-tag { color: #ff7b72; }
.hljs-selector-class { color: #d2a8ff; }
.hljs-selector-id { color: #79c0ff; }
.hljs-variable { color: #ffa657; }
.hljs-template-variable { color: #ffa657; }
.hljs-tag { color: #7ee787; }
.hljs-name { color: #7ee787; }
.hljs-section { color: #d2a8ff; font-weight: bold; }
.hljs-addition { color: #aff5b4; background: rgba(63, 185, 80, 0.15); }
.hljs-deletion { color: #ffdcd7; background: rgba(248, 81, 73, 0.1); }
.hljs-property { color: #79c0ff; }
.hljs-subst { color: #e6edf3; }
.hljs-punctuation { color: #8b949e; }
`;
|