@halo-dev/shiki-code-element 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +674 -0
- package/README.md +108 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1021 -0
- package/dist/shiki-code.d.ts +37 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/utils/copy-to-clipboard.d.ts +1 -0
- package/dist/variants/base.d.ts +8 -0
- package/dist/variants/mac.d.ts +11 -0
- package/dist/variants/simple.d.ts +10 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# @halo-dev/shiki-code-element
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@halo-dev/shiki-code-element)
|
|
4
|
+
[](https://www.npmjs.com/package/@halo-dev/shiki-code-element)
|
|
5
|
+
|
|
6
|
+
A custom web component powered by [Lit](https://lit.dev/) and [Shiki](https://shiki.style/) for beautiful syntax highlighting in your web applications. This component provides an elegant code rendering experience with features like light/dark theme support and different visual variants.
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 📦 **Web Component**: Easy to integrate into any framework or vanilla JS project
|
|
11
|
+
- 🎨 **Theme Support**: Light and dark theme support with 60+ bundled themes
|
|
12
|
+
- 🌈 **Syntax Highlighting**: Support for 200+ programming languages
|
|
13
|
+
- 💅 **Visual Variants**: Choose between "simple" and "mac" UI styles
|
|
14
|
+
- 🔄 **Auto Dark/Light Mode**: Automatically switches between themes based on system preferences
|
|
15
|
+
- 🧩 **Customizable**: Set font size and other styling options
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# npm
|
|
21
|
+
npm install @halo-dev/shiki-code-element @shikijs/transformers shiki
|
|
22
|
+
|
|
23
|
+
# pnpm
|
|
24
|
+
pnpm add @halo-dev/shiki-code-element @shikijs/transformers shiki
|
|
25
|
+
|
|
26
|
+
# yarn
|
|
27
|
+
yarn add @halo-dev/shiki-code-element @shikijs/transformers shiki
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Basic Usage
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<script type="module">
|
|
36
|
+
import '@halo-dev/shiki-code-element';
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<shiki-code>
|
|
40
|
+
<pre><code class="language-javascript">
|
|
41
|
+
const greeting = "Hello, world!";
|
|
42
|
+
console.log(greeting);
|
|
43
|
+
</code></pre>
|
|
44
|
+
</shiki-code>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Customizing Themes
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<shiki-code
|
|
51
|
+
light-theme="github-light"
|
|
52
|
+
dark-theme="github-dark">
|
|
53
|
+
<pre><code class="language-typescript">
|
|
54
|
+
interface User {
|
|
55
|
+
name: string;
|
|
56
|
+
age: number;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const user: User = {
|
|
60
|
+
name: "John",
|
|
61
|
+
age: 30
|
|
62
|
+
};
|
|
63
|
+
</code></pre>
|
|
64
|
+
</shiki-code>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Mac Window Style
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<shiki-code variant="mac">
|
|
71
|
+
<pre><code class="language-python">
|
|
72
|
+
def greet(name):
|
|
73
|
+
return f"Hello, {name}!"
|
|
74
|
+
|
|
75
|
+
print(greet("World"))
|
|
76
|
+
</code></pre>
|
|
77
|
+
</shiki-code>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Code Highlighting Features
|
|
81
|
+
|
|
82
|
+
This component integrates with [Shiki Transformers](https://shiki.style/packages/transformers) to provide advanced code highlighting features. The following transformers are supported:
|
|
83
|
+
|
|
84
|
+
- Line highlighting: `// [!code highlight]`
|
|
85
|
+
- Line focus: `// [!code focus]`
|
|
86
|
+
- Error/warning annotations: `// [!code error]`, `// [!code warning]`
|
|
87
|
+
- Code diff (additions/deletions): `// [!code ++]`, `// [!code --]`
|
|
88
|
+
|
|
89
|
+
For more details on how to use these features, please refer to the [Shiki Transformers documentation](https://shiki.style/packages/transformers).
|
|
90
|
+
|
|
91
|
+
## API
|
|
92
|
+
|
|
93
|
+
### Properties
|
|
94
|
+
|
|
95
|
+
| Property | Attribute | Type | Default | Description |
|
|
96
|
+
|--------------|---------------|---------------------|-----------------|---------------------------------------------------|
|
|
97
|
+
| lightTheme | light-theme | string | "github-light" | Theme to use in light mode |
|
|
98
|
+
| darkTheme | dark-theme | string | "github-dark" | Theme to use in dark mode |
|
|
99
|
+
| variant | variant | "simple" \| "mac" | "simple" | Visual style variant |
|
|
100
|
+
| fontSize | font-size | string | "0.875em" | Font size for the code block |
|
|
101
|
+
|
|
102
|
+
## Browser Support
|
|
103
|
+
|
|
104
|
+
This component works in all modern browsers that support [Custom Elements v1](https://caniuse.com/custom-elementsv1) and [Shadow DOM v1](https://caniuse.com/shadowdomv1).
|
|
105
|
+
|
|
106
|
+
## License
|
|
107
|
+
|
|
108
|
+
[MIT License](https://github.com/halo-sigs/plugin-shiki/blob/main/LICENSE)
|
package/dist/index.d.ts
ADDED