Skip to content

Commit ae30f0c

Browse files
zzq0826zzq0826
committed
Syntax Highlighting
1 parent a97dce7 commit ae30f0c

File tree

10 files changed

+116
-168
lines changed

10 files changed

+116
-168
lines changed

Diff for: ‎astro.config.ts

+17
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import sitemap from "@astrojs/sitemap"
1818

1919
import tailwind from "@astrojs/tailwind"
2020

21+
import expressiveCode from "astro-expressive-code"
22+
2123
// https://astro.build/config
2224
export default defineConfig({
2325
site: "https://docs.scroll.io",
@@ -38,6 +40,21 @@ export default defineConfig({
3840
}),
3941
astroCallouts(),
4042
solidityRemixCode(),
43+
expressiveCode({
44+
themes: ["slack-dark"],
45+
defaultProps: {
46+
frame: "code",
47+
},
48+
styleOverrides: {
49+
borderRadius: "27px",
50+
borderColor: "transparent",
51+
frames: {
52+
shadowColor: "transparent",
53+
editorTabBorderRadius: "0.5rem",
54+
editorBackground: "#2b2b2b",
55+
},
56+
},
57+
}),
4158
mdx(),
4259
tailwind({
4360
applyBaseStyles: false,

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@astrojs/tailwind": "^5.1.0",
2929
"@nanostores/preact": "^0.3.1",
3030
"astro-auto-import": "^0.4.2",
31+
"astro-expressive-code": "^0.35.3",
3132
"astro-i18next": "^1.0.0-beta.21",
3233
"clipboard": "^2.0.11",
3334
"ethereum-rpc-table": "^0.0.1",

Diff for: ‎src/components/HeadCommon.astro

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import "../styles/theme.css"
33
import "../styles/index.css"
44
import "../styles/migrated.css"
55
import "../styles/prism-darcula.css"
6-
import "../styles/copy-to-clipboard.css"
76
87
import "../styles/design-system/global-styles.css"
98
---

Diff for: ‎src/components/LeftSidebar/LeftSidebar.astro

+2
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,8 @@ const processedSidebarSections = sidebarSections.map((section) => {
246246

247247
.nav-link.open + ul {
248248
display: block;
249+
border-left-width: 1px;
250+
border-left-style: solid;
249251
}
250252

251253
.nested {

Diff for: ‎src/content/docs/en/article-components.mdx

+52
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,58 @@ Let's see a horizontal rule.
4444

4545
We define the Square-Fibonacci sequence[^1], a variation of the Fibonacci sequence:
4646

47+
### Syntax Highlighting
48+
49+
```js {13-15}
50+
...
51+
52+
const config: HardhatUserConfig = {
53+
...
54+
networks: {
55+
scrollSepolia: {
56+
url: 'https://sepolia-rpc.scroll.io' || '',
57+
accounts:
58+
process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
59+
},
60+
},
61+
etherscan: {
62+
apiKey: {
63+
scrollSepolia: <YOUR API KEY>,
64+
},
65+
customChains: [
66+
{
67+
network: 'scrollSepolia',
68+
chainId: 534351,
69+
urls: {
70+
apiURL: 'https://api-sepolia.scrollscan.com/api',
71+
browserURL: 'https://sepolia.scrollscan.com/',
72+
},
73+
},
74+
],
75+
},
76+
}
77+
78+
...
79+
```
80+
81+
```js "return true;" ins="inserted" del="deleted"
82+
function demo() {
83+
console.log('These are inserted and deleted marker types');
84+
// The return statement uses the default marker type
85+
return true;
86+
}
87+
```
88+
89+
```diff lang="js"
90+
function thisIsJavaScript() {
91+
// This entire block gets highlighted as JavaScript,
92+
// and we can still add diff markers to it!
93+
- console.log('Old code to be removed')
94+
+ console.log('New and shiny code!')
95+
}
96+
```
97+
98+
4799
### Math
48100

49101
- Let $f_0 = 1, f_1 = 1$

Diff for: ‎src/scripts/copy-to-clipboard.ts

-35
This file was deleted.

Diff for: ‎src/scripts/has-focused-lines.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
document.addEventListener("astro:page-load", () => {
3+
const preElements = document.querySelectorAll(".expressive-code")
4+
preElements.forEach((pre) => {
5+
const hasTargetClass = pre.querySelector(".mark")
6+
if (hasTargetClass) {
7+
pre.classList.add("has-focused-lines")
8+
}
9+
})
10+
})
11+
})

Diff for: ‎src/scripts/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import "./fix-remix-urls"
22
import "./fix-external-links"
33
import "./click-to-zoom"
4-
import "./copy-to-clipboard"
4+
import "./has-focused-lines"

Diff for: ‎src/styles/copy-to-clipboard.css

-22
This file was deleted.

Diff for: ‎src/styles/prism-darcula.css

+32-109
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
/**
2-
* Darcula theme
3-
*
4-
* Adapted from a theme based on:
5-
* IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
6-
*
7-
* @author Alexandre Paradis <[email protected]>
8-
* @version 1.0
9-
*/
10-
11-
code[class*="language-"],
12-
pre[class*="language-"] {
1+
code[data-language],
2+
pre[data-language] {
133
color: #a9b7c6;
144
font-family: var(--font-family-code);
155
direction: ltr;
@@ -30,142 +20,75 @@ pre[class*="language-"] {
3020
}
3121

3222
code,
33-
code[class*="language-"] *,
34-
pre[class*="language-"] * {
23+
code[data-language] *,
24+
pre[data-language] * {
3525
font-family: var(--font-family-code) !important;
3626
font-size: 16px;
3727
}
3828

39-
pre[class*="language-"]::-moz-selection,
40-
pre[class*="language-"] ::-moz-selection,
41-
code[class*="language-"]::-moz-selection,
42-
code[class*="language-"] ::-moz-selection {
29+
pre[data-language]::-moz-selection,
30+
pre[data-language] ::-moz-selection,
31+
code[data-language]::-moz-selection,
32+
code[data-language] ::-moz-selection {
4333
color: inherit;
4434
background: rgba(33, 66, 131, 0.85);
4535
}
4636

4737
/* Code blocks */
48-
pre[class*="language-"] {
38+
pre[data-language] {
4939
padding: 1em;
5040
margin: 0.5em 0;
5141
overflow: auto;
5242
margin-top: 1.4em;
5343
margin-bottom: 2.2em;
5444
}
5545

56-
:not(pre) > code[class*="language-"],
57-
pre[class*="language-"] {
46+
:not(pre) > code[data-language],
47+
pre[data-language] {
5848
background: #2b2b2b;
5949
border-radius: 27px;
6050
padding: 17px;
6151
padding-right: 70px;
6252
}
6353

6454
/* Inline code */
65-
:not(pre) > code[class*="language-"] {
55+
:not(pre) > code[data-language] {
6656
padding: 0.1em;
6757
border-radius: 0.3em;
6858
}
6959

70-
.token.class-name {
71-
color: #afafaf;
72-
}
73-
74-
.token.comment,
75-
.token.prolog,
76-
.token.cdata {
77-
color: #808080;
78-
}
79-
80-
.token.delimiter,
81-
.token.boolean,
82-
.token.keyword,
83-
.token.selector,
84-
.token.important,
85-
.token.atrule {
86-
color: #cc7832;
87-
}
88-
89-
.token.operator,
90-
.token.punctuation,
91-
.token.attr-name {
92-
color: #a9b7c6;
93-
}
94-
95-
.token.tag,
96-
.token.tag .punctuation,
97-
.token.doctype,
98-
.token.builtin {
99-
color: #e8bf6a;
100-
}
101-
102-
.token.entity,
103-
.token.number,
104-
.token.symbol {
105-
color: #6897bb;
106-
}
107-
108-
.token.property,
109-
.token.constant,
110-
.token.variable {
111-
color: #9876aa;
60+
.frame {
61+
overflow: hidden;
11262
}
11363

114-
.token.string,
115-
.token.char {
116-
color: #6a8759;
64+
.expressive-code pre,
65+
.expressive-code code {
66+
font-size: 16px !important;
11767
}
11868

119-
.token.attr-value,
120-
.token.attr-value .punctuation {
121-
color: #a5c261;
69+
.expressive-code.has-focused-lines .ec-line:not(.highlight) .code {
70+
opacity: 0.7;
71+
transition: filter 0.35s, opacity 0.35s;
72+
filter: blur(0.095rem);
12273
}
12374

124-
.token.attr-value .punctuation:first-child {
125-
color: #a9b7c6;
126-
}
127-
128-
.token.url {
129-
color: #287bde;
130-
text-decoration: underline;
131-
}
132-
133-
.token.function {
134-
color: #ffc66d;
135-
}
136-
137-
.token.regex {
138-
background: #364135;
75+
.expressive-code.has-focused-lines:hover .ec-line .code {
76+
opacity: 1;
77+
filter: none;
13978
}
14079

141-
.token.bold {
142-
font-weight: bold;
80+
.expressive-code.has-focused-lines .ec-line.mark.highlight {
81+
background: transparent;
14382
}
14483

145-
.token.italic {
146-
font-style: italic;
147-
}
148-
149-
.token.inserted {
150-
background: #294436;
151-
}
152-
153-
.token.deleted {
154-
background: #484a4a;
155-
}
156-
157-
code.language-css .token.property,
158-
code.language-css .token.property + .token.punctuation {
159-
color: #a9b7c6;
84+
.expressive-code div.copy button {
85+
border-radius: 50%;
16086
}
16187

162-
code.language-css .token.id {
163-
color: #ffc66d;
88+
div.expressive-code pre::-webkit-scrollbar {
89+
height: 0;
16490
}
16591

166-
code.language-css .token.selector > .token.class,
167-
code.language-css .token.selector > .token.attribute,
168-
code.language-css .token.selector > .token.pseudo-class,
169-
code.language-css .token.selector > .token.pseudo-element {
170-
color: #ffc66d;
92+
.expressive-code .ec-line div.code {
93+
border-inline-start: unset;
17194
}

0 commit comments

Comments
 (0)