Skip to content

Commit 9109de5

Browse files
CatCodeMeCatCodeMe
committed
配置使用 expressive-code file icon 插件
1 parent a946111 commit 9109de5

File tree

5 files changed

+256
-31
lines changed

5 files changed

+256
-31
lines changed

‎bun.lock

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@playform/compress": "^0.2.0",
1515
"@unocss/preset-wind3": "^66.0.0",
1616
"@unocss/reset": "^66.0.0",
17+
"@xt0rted/expressive-code-file-icons": "^1.0.0",
1718
"astro": "5.5.3",
1819
"astro-expressive-code": "^0.41.3",
1920
"astro-icon": "^1.1.5",
@@ -188,7 +189,7 @@
188189

189190
"@expressive-code/plugin-collapsible-sections": ["@expressive-code/[email protected]", "", { "dependencies": { "@expressive-code/core": "^0.41.3" } }, "sha512-cuHIN7Ipl7gUcaWFfsgy6G3wn0Svk8dQ6WKXNQha63BURbm7CSBhD6y9qFGeIOrxaJtvH4Pj3Xb4C2Ni0OVwYA=="],
190191

191-
"@expressive-code/plugin-frames": ["@expressive-code/plugin-frames@0.41.3", "", { "dependencies": { "@expressive-code/core": "^0.41.3" } }, "sha512-rFQtmf/3N2CK3Cq/uERweMTYZnBu+CwxBdHuOftEmfA9iBE7gTVvwpbh82P9ZxkPLvc40UMhYt7uNuAZexycRQ=="],
192+
"@expressive-code/plugin-frames": ["@expressive-code/plugin-frames@0.40.2", "", { "dependencies": { "@expressive-code/core": "^0.40.2" } }, "sha512-aLw5IlDlZWb10Jo/TTDCVsmJhKfZ7FJI83Zo9VDrV0OBlmHAg7klZqw68VDz7FlftIBVAmMby53/MNXPnMjTSQ=="],
192193

193194
"@expressive-code/plugin-line-numbers": ["@expressive-code/[email protected]", "", { "dependencies": { "@expressive-code/core": "^0.41.3" } }, "sha512-eig82a4CRC3XgVPQ2S/TMDcLiHJokOCD/mAdNVImpD3segVewxfjGgtj5DXQRo0E0q6f0R0EH34YzTFl5CEPqg=="],
194195

@@ -394,6 +395,8 @@
394395

395396
"@types/html-minifier-terser": ["@types/[email protected]", "", {}, "sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA=="],
396397

398+
"@types/jasmine": ["@types/[email protected]", "", {}, "sha512-jOk52a1Kz+1oU5fNWwAcNe64/GsE7r/Q6ronwDox0D3ETo/cr4ICMQyeXrj7G6FPW1n8YjRoAZA2F0XBr6GicQ=="],
399+
397400
"@types/json-schema": ["@types/[email protected]", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
398401

399402
"@types/katex": ["@types/[email protected]", "", {}, "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="],
@@ -540,6 +543,8 @@
540543

541544
"@waline/client": ["@waline/[email protected]", "", { "dependencies": { "@vueuse/core": "^13.5.0", "@waline/api": "1.0.0", "autosize": "^6.0.1", "marked": "^16.0.0", "marked-highlight": "^2.2.2", "recaptcha-v3": "^1.11.3", "vue": "^3.5.17" } }, "sha512-GzRHOpyveRlJamS/QOQ6OItYzvU6px4wtb9enGiwtWcODHSgU+21GZd++czjLwwiyiEgMNOCe8Wqll4ianI38w=="],
542545

546+
"@xt0rted/expressive-code-file-icons": ["@xt0rted/[email protected]", "", { "dependencies": { "@expressive-code/core": "^0.40.2", "@expressive-code/plugin-frames": "^0.40.2", "hast-util-from-html": "^2.0.3", "picocolors": "^1.1.1", "vscode-icons-js": "^11.6.1" } }, "sha512-rKsWh+OUKbTY2qWbF/OeLCeMb17zTb4S/s7G8kjE9++0GnreHgpbfJ9BOJdbzChoIfDXYob6LZvB8b3SAkXdGg=="],
547+
543548
"abbrev": ["[email protected]", "", {}, "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg=="],
544549

545550
"acorn": ["[email protected]", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
@@ -1752,6 +1757,8 @@
17521757

17531758
"vscode-html-languageservice": ["[email protected]", "", { "dependencies": { "@vscode/l10n": "^0.0.18", "vscode-languageserver-textdocument": "^1.0.12", "vscode-languageserver-types": "^3.17.5", "vscode-uri": "^3.1.0" } }, "sha512-/ZdEtsZ3OiFSyL00kmmu7crFV9KwWR+MgpzjsxO60DQH7sIfHZM892C/E4iDd11EKocr+NYuvOA4Y7uc3QzLEA=="],
17541759

1760+
"vscode-icons-js": ["[email protected]", "", { "dependencies": { "@types/jasmine": "^3.6.3" } }, "sha512-rht18IFYv117UlqBn6o9j258SOtwhDBmtVrGwdoLPpSj6Z5LKQIzarQDd/tCRWneU68KEX25+nsh48tAoknKNw=="],
1761+
17551762
"vscode-json-languageservice": ["[email protected]", "", { "dependencies": { "jsonc-parser": "^3.0.0", "vscode-languageserver-textdocument": "^1.0.1", "vscode-languageserver-types": "^3.16.0", "vscode-nls": "^5.0.0", "vscode-uri": "^3.0.2" } }, "sha512-0vSpg6Xd9hfV+eZAaYN63xVVMOTmJ4GgHxXnkLCh+9RsQBkWKIghzLhW2B9ebfG+LQQg8uLtsQ2aUKjTgE+QOg=="],
17561763

17571764
"vscode-jsonrpc": ["[email protected]", "", {}, "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA=="],
@@ -1844,6 +1851,8 @@
18441851

18451852
"@eslint/plugin-kit/@eslint/core": ["@eslint/[email protected]", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA=="],
18461853

1854+
"@expressive-code/plugin-frames/@expressive-code/core": ["@expressive-code/[email protected]", "", { "dependencies": { "@ctrl/tinycolor": "^4.0.4", "hast-util-select": "^6.0.2", "hast-util-to-html": "^9.0.1", "hast-util-to-text": "^4.0.1", "hastscript": "^9.0.0", "postcss": "^8.4.38", "postcss-nested": "^6.0.1", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.1" } }, "sha512-gXY3v7jbgz6nWKvRpoDxK4AHUPkZRuJsM79vHX/5uhV9/qX6Qnctp/U/dMHog/LCVXcuOps+5nRmf1uxQVPb3w=="],
1855+
18471856
"@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/[email protected]", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
18481857

18491858
"@iconify/utils/local-pkg": ["[email protected]", "", { "dependencies": { "mlly": "^1.7.4", "pkg-types": "^2.0.1", "quansync": "^0.2.8" } }, "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg=="],
@@ -1944,6 +1953,8 @@
19441953

19451954
"@vue/compiler-sfc/estree-walker": ["[email protected]", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
19461955

1956+
"@xt0rted/expressive-code-file-icons/@expressive-code/core": ["@expressive-code/[email protected]", "", { "dependencies": { "@ctrl/tinycolor": "^4.0.4", "hast-util-select": "^6.0.2", "hast-util-to-html": "^9.0.1", "hast-util-to-text": "^4.0.1", "hastscript": "^9.0.0", "postcss": "^8.4.38", "postcss-nested": "^6.0.1", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.1" } }, "sha512-gXY3v7jbgz6nWKvRpoDxK4AHUPkZRuJsM79vHX/5uhV9/qX6Qnctp/U/dMHog/LCVXcuOps+5nRmf1uxQVPb3w=="],
1957+
19471958
"anymatch/picomatch": ["[email protected]", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
19481959

19491960
"astro/sharp": ["[email protected]", "", { "dependencies": { "color": "^4.2.3", "detect-libc": "^2.0.3", "semver": "^7.6.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.33.5", "@img/sharp-darwin-x64": "0.33.5", "@img/sharp-libvips-darwin-arm64": "1.0.4", "@img/sharp-libvips-darwin-x64": "1.0.4", "@img/sharp-libvips-linux-arm": "1.0.5", "@img/sharp-libvips-linux-arm64": "1.0.4", "@img/sharp-libvips-linux-s390x": "1.0.4", "@img/sharp-libvips-linux-x64": "1.0.4", "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", "@img/sharp-libvips-linuxmusl-x64": "1.0.4", "@img/sharp-linux-arm": "0.33.5", "@img/sharp-linux-arm64": "0.33.5", "@img/sharp-linux-s390x": "0.33.5", "@img/sharp-linux-x64": "0.33.5", "@img/sharp-linuxmusl-arm64": "0.33.5", "@img/sharp-linuxmusl-x64": "0.33.5", "@img/sharp-wasm32": "0.33.5", "@img/sharp-win32-ia32": "0.33.5", "@img/sharp-win32-x64": "0.33.5" } }, "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw=="],
@@ -1966,6 +1977,8 @@
19661977

19671978
"dom-serializer/entities": ["[email protected]", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
19681979

1980+
"expressive-code/@expressive-code/plugin-frames": ["@expressive-code/[email protected]", "", { "dependencies": { "@expressive-code/core": "^0.41.3" } }, "sha512-rFQtmf/3N2CK3Cq/uERweMTYZnBu+CwxBdHuOftEmfA9iBE7gTVvwpbh82P9ZxkPLvc40UMhYt7uNuAZexycRQ=="],
1981+
19691982
"fast-glob/glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
19701983

19711984
"fs-minipass/minipass": ["[email protected]", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],

‎ec.config.mjs

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
22
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
3-
import { defineEcConfig, setLuminance, setAlpha } from 'astro-expressive-code';
3+
import { pluginFileIcons } from "@xt0rted/expressive-code-file-icons";
4+
import { defineEcConfig, setAlpha, setLuminance } from 'astro-expressive-code';
45

56
export default defineEcConfig({
6-
plugins: [pluginLineNumbers(), pluginCollapsibleSections()],
7+
plugins: [
8+
pluginLineNumbers(),
9+
pluginCollapsibleSections(),
10+
pluginFileIcons({
11+
iconClass: 'size-5',
12+
titleClass: 'flex items-center gap-1'
13+
})
14+
],
715
/* Basics */
816
defaultLocale: 'en-US',
917
defaultProps: {

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@playform/compress": "^0.2.0",
2929
"@unocss/preset-wind3": "^66.0.0",
3030
"@unocss/reset": "^66.0.0",
31+
"@xt0rted/expressive-code-file-icons": "^1.0.0",
3132
"astro": "5.5.3",
3233
"astro-expressive-code": "^0.41.3",
3334
"astro-icon": "^1.1.5",

‎src/assets/styles/expressive-code.css

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,31 +37,3 @@
3737
/* background: var(--un-prose-bg-soft);*/
3838
}
3939

40-
41-
.expressive-code [data-language]::before {
42-
content: attr(data-language);
43-
position: absolute;
44-
z-index: 2;
45-
/* Top-right positioning with padding */
46-
inset: 0 0 auto auto; /* Top-right positioning relative to .expressive-code */
47-
height: 1.5rem;
48-
padding: 0 0.75rem;
49-
font-size: 0.75rem;
50-
color: var(--ec-txt-col);
51-
background-color: var(--ec-bg-col);
52-
pointer-events: none;
53-
display: inline-flex;
54-
align-items: center;
55-
line-height: 1;
56-
opacity: 1; /* Default always visible */
57-
transition: opacity 0s; /* No animation */
58-
}
59-
60-
/* Hover effect */
61-
.expressive-code .frame:not(.has-title):not(.is-terminal) {
62-
@media (hover: hover) {
63-
&:hover [data-language]::before {
64-
opacity: 0; /* Disappear on hover */
65-
}
66-
}
67-
}

‎src/content/blog/test/test_code.mdx

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
---
2+
title: 'Test: expressive-code'
3+
publishDate: 2025-08-12
4+
description: 'test expressive-code features'
5+
tags:
6+
- test
7+
- expressive-code
8+
language: 'english'
9+
---
10+
import { MdxRepl, TabItem, Tabs } from 'astro-pure/user'
11+
12+
13+
14+
```css title="site.css" icon="postcss"
15+
.flex {
16+
display: flex;
17+
}
18+
```
19+
20+
<Tabs>
21+
<TabItem label='Astro'>
22+
```js showLineNumbers=false
23+
// Line numbers are disabled for this block
24+
console.log('Hello?')
25+
console.log('Sorry, do you know what line I am on?')
26+
```
27+
</TabItem>
28+
<TabItem label='MDX'>
29+
```tsx
30+
import { MdxRepl } from 'astro-pure/user'
31+
```
32+
</TabItem>
33+
</Tabs>
34+
35+
36+
```js collapse={1-5, 12-14, 21-24} showLineNumbers
37+
// All this boilerplate setup code will be collapsed
38+
import { someBoilerplateEngine } from '@example/some-boilerplate'
39+
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
40+
41+
const engine = someBoilerplateEngine(evenMoreBoilerplate())
42+
43+
// This part of the code will be visible by default
44+
engine.doSomething(1, 2, 3, calcFn)
45+
46+
function calcFn() {
47+
// You can have multiple collapsed sections
48+
const a = 1
49+
const b = 2
50+
const c = a + b
51+
52+
// This will remain visible
53+
console.log(`Calculation result: ${a} + ${b} = ${c}`)
54+
return c
55+
}
56+
57+
// All this code until the end of the block will be collapsed again
58+
engine.closeConnection()
59+
engine.freeMemory()
60+
engine.shutdown({ reason: 'End of example boilerplate code' })
61+
```
62+
63+
```zig {1, 4, 7-8}
64+
// Line 1 - targeted by line number
65+
// Line 2
66+
// Line 3
67+
// Line 4 - targeted by line number
68+
// Line 5
69+
// Line 6
70+
// Line 7 - targeted by range "7-8"
71+
// Line 8 - targeted by range "7-8"
72+
```
73+
74+
```jsx {"1":5} del={"2":7-8} ins={"3":10-12} showLineNumbers /button/
75+
// labeled-line-markers.jsx
76+
<button
77+
role="button"
78+
{...props}
79+
value={value}
80+
className={buttonClassName}
81+
disabled={disabled}
82+
active={active}
83+
>
84+
{children &&
85+
!active &&
86+
(typeof children === 'string' ? <span>{children}</span> : children)}
87+
</button>
88+
```
89+
90+
```js showLineNumbers
91+
// This code block will show line numbers
92+
console.log('Greetings from line 2!')
93+
console.log('I am on line 3')
94+
```
95+
96+
```js showLineNumbers=false
97+
// Line numbers are disabled for this block
98+
console.log('Hello?')
99+
console.log('Sorry, do you know what line I am on?')
100+
```
101+
102+
<Tabs>
103+
<TabItem label='Astro'>
104+
```js showLineNumbers=false
105+
// Line numbers are disabled for this block
106+
console.log('Hello?')
107+
console.log('Sorry, do you know what line I am on?')
108+
```
109+
</TabItem>
110+
<TabItem label='line-markers'>
111+
```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
112+
// labeled-line-markers.jsx
113+
<button
114+
role="button"
115+
{...props}
116+
117+
value={value}
118+
className={buttonClassName}
119+
120+
disabled={disabled}
121+
active={active}
122+
>
123+
124+
{children &&
125+
!active &&
126+
(typeof children === 'string' ? <span>{children}</span> : children)}
127+
</button>
128+
```
129+
</TabItem>
130+
</Tabs>
131+
132+
133+
[baidu](https://baidu.com)
134+
[gg](https://google.com)
135+
[bili](https://bilibili.com)
136+
[x](https://x.com)
137+
[deepseek](https://deepseek.com)
138+
[npm](https://npmjs.com)
139+
[baidu](https://jetbrains.com)
140+
[local](https://地理大家费老大劲堪萨斯的)
141+
[site](https://8cat.life)
142+
143+
144+
```css title="site.css" icon="postcss"
145+
.flex {
146+
display: flex;
147+
}
148+
```
149+
150+
```css title="site.css" no-icon
151+
.flex {
152+
display: flex;
153+
}
154+
```
155+
156+
157+
```java title="site"
158+
public class HelloWorld {
159+
public static void main(String[] args) {
160+
System.out.println("Hello, World!");
161+
}
162+
}
163+
```
164+
165+
```yaml title="site" showLineNumbers
166+
name: HelloWorld
167+
description: A simple Java program
168+
version: 1.0.0
169+
mainClass: HelloWorld
170+
dependencies:
171+
- java: 11
172+
```
173+
174+
175+
```zig {1, 4, 7-8} title="zig code"
176+
const std = @import("std");
177+
178+
test "hello world test" {
179+
std.debug.print("Hello, test!\n", .{});
180+
try std.testing.expect(true);
181+
}
182+
183+
```
184+
185+
186+
```json title="site.json" showLineNumbers
187+
{
188+
"name": "HelloWorld",
189+
"description": "A simple Java program",
190+
"version": "1.0.0",
191+
"mainClass": "HelloWorld",
192+
"dependencies": {
193+
"java": "11"
194+
}
195+
}
196+
```
197+
198+
```python title="site.py" showLineNumbers
199+
def hello_world():
200+
print("Hello, World!")
201+
```
202+
203+
import { Code } from 'astro-expressive-code/components'
204+
205+
<Code code="console.log('Hello world!')" lang="js" />
206+
207+
export const exampleCode = `console.log('This could come from a file or CMS!');`
208+
export const fileName = 'example.js'
209+
export const highlights = ['file', 'CMS']
210+
211+
<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
212+
213+
214+
```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15}
215+
// labeled-line-markers.jsx
216+
<button
217+
role="button"
218+
{...props}
219+
220+
value={value}
221+
className={buttonClassName}
222+
223+
disabled={disabled}
224+
active={active}
225+
>
226+
227+
{children &&
228+
!active &&
229+
(typeof children === 'string' ? <span>{children}</span> : children)}
230+
</button>
231+
```

0 commit comments

Comments
 (0)