Skip to content

Commit 07c3871

Browse files
bring-shrubberybring-shrubbery
committed
Added code highlighting
1 parent c9d5474 commit 07c3871

File tree

9 files changed

+335
-265
lines changed

9 files changed

+335
-265
lines changed

‎apps/web/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Toaster } from "@/components/ui/toaster";
22
import { SquircleNoScript } from "@squircle-js/react";
33
import "./globals.css";
44

5+
import "./prismjs-atom-one-dark.css";
6+
57
import { Inter } from "next/font/google";
68

79
const inter = Inter({

‎apps/web/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Page() {
1414
<SquircleDemoSection />
1515
<FeaturesSection />
1616
<UsageSection />
17-
{/* <ExamplesSection /> */}
17+
<ExamplesSection />
1818
{/* <HowItWorksSection /> */}
1919
<LicenseSection />
2020
<LinksSection />

‎apps/web/app/prismjs-atom-one-dark.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
/**
2+
* prism.js default theme for JavaScript, CSS and HTML
3+
* Based on dabblet (http://dabblet.com)
4+
* @author Lea Verou
5+
*/
6+
code[class*="language-"],
7+
pre[class*="language-"] {
8+
color: #abb2bf;
9+
background: none;
10+
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
11+
text-align: left;
12+
white-space: pre;
13+
word-spacing: normal;
14+
word-break: normal;
15+
word-wrap: normal;
16+
line-height: 1.5;
17+
-moz-tab-size: 4;
18+
-o-tab-size: 4;
19+
tab-size: 4;
20+
-webkit-hyphens: none;
21+
-moz-hyphens: none;
22+
-ms-hyphens: none;
23+
hyphens: none;
24+
}
25+
26+
pre[class*="language-"]::-moz-selection,
27+
pre[class*="language-"] ::-moz-selection,
28+
code[class*="language-"]::-moz-selection,
29+
code[class*="language-"] ::-moz-selection {
30+
text-shadow: none;
31+
background: #383e49;
32+
}
33+
34+
pre[class*="language-"]::selection,
35+
pre[class*="language-"] ::selection,
36+
code[class*="language-"]::selection,
37+
code[class*="language-"] ::selection {
38+
text-shadow: none;
39+
background: #9aa2b1;
40+
}
41+
42+
@media print {
43+
code[class*="language-"],
44+
pre[class*="language-"] {
45+
text-shadow: none;
46+
}
47+
}
48+
/* Code blocks */
49+
pre[class*="language-"] {
50+
padding: 1em;
51+
margin: 0.5em 0;
52+
overflow: auto;
53+
}
54+
55+
:not(pre) > code[class*="language-"],
56+
pre[class*="language-"] {
57+
background: #282c34;
58+
}
59+
60+
/* Inline code */
61+
:not(pre) > code[class*="language-"] {
62+
padding: 0.1em;
63+
border-radius: 0.3em;
64+
white-space: normal;
65+
}
66+
67+
.token.comment,
68+
.token.prolog,
69+
.token.doctype,
70+
.token.cdata {
71+
color: #5c6370;
72+
}
73+
74+
.token.punctuation {
75+
color: #abb2bf;
76+
}
77+
78+
.token.selector,
79+
.token.tag {
80+
color: #e06c75;
81+
}
82+
83+
.token.property,
84+
.token.boolean,
85+
.token.number,
86+
.token.constant,
87+
.token.symbol,
88+
.token.attr-name,
89+
.token.deleted {
90+
color: #d19a66;
91+
}
92+
93+
.token.string,
94+
.token.char,
95+
.token.attr-value,
96+
.token.builtin,
97+
.token.inserted {
98+
color: #98c379;
99+
}
100+
101+
.token.operator,
102+
.token.entity,
103+
.token.url,
104+
.language-css .token.string,
105+
.style .token.string {
106+
color: #56b6c2;
107+
}
108+
109+
.token.atrule,
110+
.token.keyword {
111+
color: #c678dd;
112+
}
113+
114+
.token.function {
115+
color: #61afef;
116+
}
117+
118+
.token.regex,
119+
.token.important,
120+
.token.variable {
121+
color: #c678dd;
122+
}
123+
124+
.token.important,
125+
.token.bold {
126+
font-weight: bold;
127+
}
128+
129+
.token.italic {
130+
font-style: italic;
131+
}
132+
133+
.token.entity {
134+
cursor: help;
135+
}
136+
137+
pre.line-numbers {
138+
position: relative;
139+
padding-left: 3.8em;
140+
counter-reset: linenumber;
141+
}
142+
143+
pre.line-numbers > code {
144+
position: relative;
145+
}
146+
147+
.line-numbers .line-numbers-rows {
148+
position: absolute;
149+
pointer-events: none;
150+
top: 0;
151+
font-size: 100%;
152+
left: -3.8em;
153+
width: 3em; /* works for line-numbers below 1000 lines */
154+
letter-spacing: -1px;
155+
border-right: 0;
156+
157+
-webkit-user-select: none;
158+
-moz-user-select: none;
159+
-ms-user-select: none;
160+
user-select: none;
161+
}
162+
163+
.line-numbers-rows > span {
164+
pointer-events: none;
165+
display: block;
166+
counter-increment: linenumber;
167+
}
168+
169+
.line-numbers-rows > span:before {
170+
content: counter(linenumber);
171+
color: #5c6370;
172+
display: block;
173+
padding-right: 0.8em;
174+
text-align: right;
175+
}

‎apps/web/app/sections/SquircleDemoSection.tsx‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -51,37 +51,41 @@ export const SquircleDemoSection = () => {
5151
</div>
5252

5353
<div className="space-y-12 mb-8 mx-auto max-w-[360px]">
54-
<div className="space-y-4">
55-
<Label
56-
htmlFor="corner-radius"
57-
className="mt-4"
58-
>{`Corner Radius (${cornerRadius}px)`}</Label>
59-
<Slider
60-
id="corner-radius"
61-
min={0}
62-
max={50}
63-
value={[cornerRadius]}
64-
onValueChange={(v) => setCornerRadius(v.at(0))}
65-
/>
54+
<div className="space-y-6">
55+
<div className="space-y-4">
56+
<Label
57+
htmlFor="corner-radius"
58+
className="mt-4"
59+
>{`Corner Radius (${cornerRadius}px)`}</Label>
60+
<Slider
61+
id="corner-radius"
62+
min={0}
63+
max={50}
64+
value={[cornerRadius]}
65+
onValueChange={(v) => setCornerRadius(v.at(0))}
66+
/>
67+
</div>
6668

67-
<Label htmlFor="corner-smoothing">
68-
{`Corner Smoothing (${cornerSmoothing}) `}
69-
{cornerSmoothing === 0
70-
? "- Just like regular old button"
71-
: cornerSmoothing === 1
72-
? "- Silky smooth!"
73-
: cornerSmoothing === 0.6
74-
? "- like iOS icons"
75-
: ""}
76-
</Label>
77-
<Slider
78-
id="corner-smoothing"
79-
min={0}
80-
max={1}
81-
step={0.01}
82-
value={[cornerSmoothing]}
83-
onValueChange={(v) => setCornerSmoothing(v.at(0))}
84-
/>
69+
<div className="space-y-4">
70+
<Label htmlFor="corner-smoothing">
71+
{`Corner Smoothing (${cornerSmoothing}) `}
72+
{cornerSmoothing === 0
73+
? "- Just like regular old button"
74+
: cornerSmoothing === 1
75+
? "- Silky smooth!"
76+
: cornerSmoothing === 0.6
77+
? "- like iOS icons"
78+
: ""}
79+
</Label>
80+
<Slider
81+
id="corner-smoothing"
82+
min={0}
83+
max={1}
84+
step={0.01}
85+
value={[cornerSmoothing]}
86+
onValueChange={(v) => setCornerSmoothing(v.at(0))}
87+
/>
88+
</div>
8589
</div>
8690

8791
<div className="space-y-2">

‎apps/web/app/sections/UsageSection.tsx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import { Card, CardContent } from "@/components/ui/card";
33
import { Code } from "@/components/ui/code";
44
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
55

6+
import Prism from "prismjs";
7+
import "prismjs/components/prism-jsx";
8+
import "prismjs/components/prism-bash";
9+
10+
const usage_react_1 = `pnpm add @squircle-js/react`;
11+
612
const usage_react_2 = `
713
import { Squircle }
814
from "@squircle-js/react"
@@ -27,6 +33,24 @@ import { SquircleNoScript } from "@squircle-js/react";
2733
...
2834
`.trim();
2935

36+
const highlightedUsage1 = Prism.highlight(
37+
usage_react_1,
38+
Prism.languages.bash,
39+
"bash"
40+
);
41+
42+
const highlightedUsage2 = Prism.highlight(
43+
usage_react_2,
44+
Prism.languages.jsx,
45+
"jsx"
46+
);
47+
48+
const highlightedUsage3 = Prism.highlight(
49+
usage_react_3,
50+
Prism.languages.jsx,
51+
"jsx"
52+
);
53+
3054
export const UsageSection = () => {
3155
return (
3256
<div className="mx-auto container w-full mb-36">
@@ -47,30 +71,31 @@ export const UsageSection = () => {
4771
Solid <Badge className="ml-2 hidden sm:block">soon</Badge>
4872
</TabsTrigger>
4973
</TabsList>
74+
5075
<TabsContent value="react" className="w-fit mx-auto">
5176
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
5277
<CardContent className="py-6 w-full">
5378
<h3 className="font-semibold text-lg mb-2">
5479
Step 1.{" "}
5580
<span className="font-normal">Install the package.</span>
5681
</h3>
57-
<Code content="pnpm add @squircle-js/react" />
82+
<Code dangerousHTML={highlightedUsage1} raw={usage_react_1} />
5883

5984
<h3 className="font-semibold text-lg mb-2 mt-4">
6085
Step 2.{" "}
6186
<span className="font-normal">
6287
Import and use as a a regular div.
6388
</span>
6489
</h3>
65-
<Code raw={usage_react_2} content={<pre>{usage_react_2}</pre>} />
90+
<Code raw={usage_react_2} dangerousHTML={highlightedUsage2} />
6691

6792
<h3 className="font-semibold text-lg mb-2 mt-4">
6893
Step 3.{" "}
6994
<span className="font-normal">
70-
Add global component for noscript.
95+
Add global component for noscript support.
7196
</span>
7297
</h3>
73-
<Code raw={usage_react_3} content={<pre>{usage_react_3}</pre>} />
98+
<Code raw={usage_react_3} dangerousHTML={highlightedUsage3} />
7499
</CardContent>
75100
</Card>
76101
</TabsContent>

‎apps/web/components/ui/code.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,23 @@ import { useToast } from "./use-toast";
55
import { ScrollArea } from "./scroll-area";
66

77
export const Code = ({
8-
content,
8+
dangerousHTML,
99
raw,
1010
}: {
11-
content: string | JSX.Element;
12-
raw?: string;
11+
dangerousHTML: string;
12+
raw: string;
1313
}) => {
1414
const toast = useToast();
1515

16-
const copyContent = raw || content.toString();
16+
const copyContent = raw;
1717

1818
return (
1919
<code className="relative text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-primary text-primary-foreground rounded-lg p-4 pl-6 pr-14 w-full">
2020
<ScrollArea orientation="horizontal" className="w-full">
21-
<div className="w-fit">{content}</div>
21+
<pre
22+
className="w-fit"
23+
dangerouslySetInnerHTML={{ __html: dangerousHTML }}
24+
/>
2225
</ScrollArea>
2326

2427
<button

‎apps/web/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,15 @@
3636
"@radix-ui/react-toggle": "^1.0.3",
3737
"@radix-ui/react-tooltip": "^1.0.6",
3838
"@squircle-js/react": "workspace:*",
39+
"@types/prismjs": "^1.26.0",
3940
"class-variance-authority": "^0.6.0",
4041
"clsx": "^1.2.1",
4142
"cmdk": "^0.2.0",
4243
"date-fns": "^2.30.0",
4344
"lucide-react": "^0.241.0",
4445
"next": "^13.4.1",
4546
"prism-react-renderer": "^2.0.5",
47+
"prismjs": "^1.29.0",
4648
"react": "^18.2.0",
4749
"react-day-picker": "^8.7.1",
4850
"react-dom": "^18.2.0",

0 commit comments

Comments
 (0)