@chayns-components/code-highlighter 5.0.33 → 5.0.34

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.
Files changed (2) hide show
  1. package/AI_USAGE.md +269 -0
  2. package/package.json +5 -4
package/AI_USAGE.md ADDED
@@ -0,0 +1,269 @@
1
+ # @chayns-components/code-highlighter
2
+
3
+ React component package providing `CodeHighlighter` for chayns applications.
4
+
5
+ Documented components: `CodeHighlighter`.
6
+
7
+ ## Import
8
+
9
+ ```ts
10
+ import { CodeHighlighter } from '@chayns-components/code-highlighter';
11
+ ```
12
+
13
+ ## Typical Usage
14
+
15
+ ```tsx
16
+ <CodeHighlighter
17
+ copyButtonText={'Code kopieren'}
18
+ shouldShowLineNumbers
19
+ language={'tsx'}
20
+ code={`import React from 'react';
21
+ import { ColorSchemeProvider } from '@chayns-components/core';
22
+ import { ChaynsProvider, getSite } from 'chayns-api';
23
+
24
+ const AppWrapper = () => {
25
+ const { color, colorMode } = getSite();
26
+
27
+ return (
28
+ <ChaynsProvider>
29
+ <ColorSchemeProvider
30
+ color={color}
31
+ colorMode={colorMode}
32
+ >
33
+ <YourComponent/>
34
+ </ColorSchemeProvider>
35
+ </ChaynsProvider>
36
+ )
37
+ }
38
+
39
+ export default AppWrapper;`}
40
+ />
41
+ ```
42
+
43
+ ## CodeHighlighter
44
+
45
+ `CodeHighlighter` is exported by `@chayns-components/code-highlighter` and should be imported from the public package entry point.
46
+
47
+ ### Import
48
+
49
+ ```ts
50
+ import { CodeHighlighter } from '@chayns-components/code-highlighter';
51
+ ```
52
+
53
+ ### Examples
54
+
55
+ #### General
56
+
57
+ ```tsx
58
+ <CodeHighlighter
59
+ copyButtonText={'Code kopieren'}
60
+ shouldShowLineNumbers
61
+ language={'tsx'}
62
+ code={`import React from 'react';
63
+ import { ColorSchemeProvider } from '@chayns-components/core';
64
+ import { ChaynsProvider, getSite } from 'chayns-api';
65
+
66
+ const AppWrapper = () => {
67
+ const { color, colorMode } = getSite();
68
+
69
+ return (
70
+ <ChaynsProvider>
71
+ <ColorSchemeProvider
72
+ color={color}
73
+ colorMode={colorMode}
74
+ >
75
+ <YourComponent/>
76
+ </ColorSchemeProvider>
77
+ </ChaynsProvider>
78
+ )
79
+ }
80
+
81
+ export default AppWrapper;`}
82
+ />
83
+ ```
84
+
85
+ #### Highlighted Lines
86
+
87
+ ```tsx
88
+ <CodeHighlighter
89
+ copyButtonText={'Code kopieren'}
90
+ shouldShowLineNumbers
91
+ language={'tsx'}
92
+ highlightedLines={{
93
+ added: [15, 16, 17, 18, 19],
94
+ removed: [14],
95
+ marked: [5],
96
+ }}
97
+ code={`import React from 'react';
98
+ import { ColorSchemeProvider } from '@chayns-components/core';
99
+ import { ChaynsProvider, getSite } from 'chayns-api';
100
+
101
+ const AppWrapper = () => {
102
+ const { color, colorMode } = getSite();
103
+
104
+ return (
105
+ <ChaynsProvider>
106
+ <ColorSchemeProvider
107
+ color={color}
108
+ colorMode={colorMode}
109
+ >
110
+ <YourComponent/>
111
+ <CodeHighlighter
112
+ code={code}
113
+ language="jsx"
114
+ theme={CodeHighlighterTheme.Dark}
115
+ />
116
+ </ColorSchemeProvider>
117
+ </ChaynsProvider>
118
+ )
119
+ }
120
+
121
+ export default AppWrapper;`}
122
+ />
123
+ ```
124
+
125
+ #### With HTML
126
+
127
+ ```tsx
128
+ <CodeHighlighter
129
+ copyButtonText={'Code kopieren'}
130
+ shouldShowLineNumbers
131
+ language={'html'}
132
+ code={`<!DOCTYPE html>
133
+ <html lang="en">
134
+ <head>
135
+ <meta charset="UTF-8">
136
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
137
+ <title>Meine HTML Seite</title>
138
+ <link rel="stylesheet" href="styles.css">
139
+ </head>
140
+ <body>
141
+ <h1>Hallo, Welt!</h1>
142
+ <p>Dies ist eine einfache HTML-Seite.</p>
143
+ <script src="script.js"></script>
144
+ </body>
145
+ </html>
146
+ `}
147
+ />
148
+ ```
149
+
150
+ #### With Css
151
+
152
+ ```tsx
153
+ <CodeHighlighter
154
+ copyButtonText={'Code kopieren'}
155
+ shouldShowLineNumbers
156
+ language={'css'}
157
+ code={`body {
158
+ font-family: 'Arial', sans-serif;
159
+ background-color: #f4f4f4;
160
+ color: #333;
161
+ }
162
+
163
+ h1 {
164
+ color: #0066cc;
165
+ }
166
+ `}
167
+ />
168
+ ```
169
+
170
+ #### With Markdown
171
+
172
+ ```tsx
173
+ <CodeHighlighter
174
+ copyButtonText={'Code kopieren'}
175
+ shouldShowLineNumbers
176
+ language={'markdown'}
177
+ code={`# Markdown Beispiel
178
+
179
+ Dies ist ein einfaches Beispiel für Markdown.
180
+
181
+ - Listenelement 1
182
+ - Listenelement 2
183
+ - Listenelement 3
184
+
185
+ **Fettgedruckter Text**
186
+
187
+ *Kursiver Text*
188
+
189
+ [Link zu Google](https://www.google.com/)
190
+ `}
191
+ />
192
+ ```
193
+
194
+ #### With Graph QL
195
+
196
+ ```tsx
197
+ <CodeHighlighter
198
+ copyButtonText={'Code kopieren'}
199
+ shouldShowLineNumbers
200
+ language={'graphql'}
201
+ code={`type Query {
202
+ getUser(id: ID!): User
203
+ }
204
+
205
+ type User {
206
+ id: ID!
207
+ username: String!
208
+ email: String!
209
+ posts: [Post]
210
+ }
211
+
212
+ type Post {
213
+ id: ID!
214
+ title: String!
215
+ content: String!
216
+ }
217
+ `}
218
+ />
219
+ ```
220
+
221
+ #### With Yaml
222
+
223
+ ```tsx
224
+ <CodeHighlighter
225
+ copyButtonText={'Code kopieren'}
226
+ shouldShowLineNumbers
227
+ language={'yaml'}
228
+ code={`person:
229
+ name: John Doe
230
+ age: 30
231
+ address:
232
+ city: Example City
233
+ zip: '12345'
234
+ hobbies:
235
+ - Reading
236
+ - Hiking
237
+ - Coding
238
+ `}
239
+ />
240
+ ```
241
+
242
+ #### With Line Break
243
+
244
+ ```tsx
245
+ <CodeHighlighter
246
+ copyButtonText={'Code kopieren'}
247
+ shouldShowLineNumbers
248
+ language={''}
249
+ code={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed rhoncus nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec semper ante quis molestie vulputate. Praesent facilisis auctor turpis. Duis sodales dictum sem, id aliquet nisi faucibus egestas. Morbi volutpat dapibus feugiat.'}
250
+ shouldWrapLines
251
+ />
252
+ ```
253
+
254
+ ### Props
255
+
256
+ No prop documentation available.
257
+
258
+ ### Types
259
+
260
+ No additional exported types documented.
261
+
262
+ ### Usage Notes
263
+
264
+ - Import `CodeHighlighter` directly from `@chayns-components/code-highlighter` instead of internal source paths.
265
+ - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
266
+
267
+ ### Anti Patterns
268
+
269
+ - Avoid imports from internal paths such as `@chayns-components/code-highlighter/src/...`; always use the public package export.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/code-highlighter",
3
- "version": "5.0.33",
3
+ "version": "5.0.34",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -33,7 +33,8 @@
33
33
  "test": "__tests__"
34
34
  },
35
35
  "files": [
36
- "lib"
36
+ "lib",
37
+ "AI_USAGE.md"
37
38
  ],
38
39
  "repository": {
39
40
  "type": "git",
@@ -69,7 +70,7 @@
69
70
  "typescript": "^5.9.3"
70
71
  },
71
72
  "dependencies": {
72
- "@chayns-components/core": "^5.0.33",
73
+ "@chayns-components/core": "^5.0.34",
73
74
  "@types/react-syntax-highlighter": "^15.5.13",
74
75
  "babel-prettier-parser": "^0.10.8",
75
76
  "prettier": "^2.8.8",
@@ -85,5 +86,5 @@
85
86
  "publishConfig": {
86
87
  "access": "public"
87
88
  },
88
- "gitHead": "5e41d9af042b3c272c8c08b67a9c9bf4911902f6"
89
+ "gitHead": "7c7c2d7dacbc7c8031f3bcef885e4f63b8f49b1a"
89
90
  }