Skip to content

Commit 13b3e1e

Browse files
codeAbinashcodeAbinash
committed
initial commit
0 parents  commit 13b3e1e

23 files changed

+2924
-0
lines changed

‎.eslintrc.cjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.prettierignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
package.json
2+
package-lock.json
3+
pnpm-lock.yaml

‎.prettierrc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"trailingComma": "all",
5+
"printWidth": 120,
6+
"tabWidth": 2,
7+
"endOfLine": "auto",
8+
"jsxSingleQuote": true,
9+
"plugins": []
10+
}

‎README.md‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
# Aurora 🎨 / React
2+
3+
Aurora : The C code highlighting engine for the web.
4+
5+
### Try Aurora [Online](https://try-aurora.vercel.app/) ❤️‍🔥
6+
7+
![Aurora](https://codeAbinash.github.io/aurora/images/banner.jpg)
8+
9+
> Don't worry about rerendering your react app. Aurora will take care of it.
10+
11+
## Installation 📦
12+
13+
### Using npm
14+
15+
```bash
16+
npm install aurora-code aurora-react
17+
```
18+
19+
## Usage
20+
21+
### Highlight using classes (recommended)
22+
23+
```tsx
24+
import { Aurora } from 'aurora-react'; // Aurora code Component
25+
import 'aurora-code/themes/one dark pro' (css); // Aurora theme
26+
...
27+
// code is the C code string
28+
<Aurora code={code} />
29+
```
30+
31+
#### Configuring the theme in css ⚙️
32+
33+
```css
34+
/* Custom theme */
35+
.aurora-string {
36+
color: pink;
37+
}
38+
.aurora-keyword {
39+
color: lime;
40+
}
41+
```
42+
43+
include the css file. And configuration is done ✨.
44+
45+
### Highlight using inline styles (not recommended)
46+
47+
```tsx
48+
import { Aurora } from 'aurora-react'; // Aurora code Component
49+
...
50+
// code is the C code string
51+
<Aurora code={code} />
52+
```
53+
54+
#### Configuring the theme in inline styles ⚙️
55+
56+
```tsx
57+
<Aurora
58+
code={code}
59+
config={{
60+
mode: 'inline',
61+
styles: {
62+
comment: 'gray',
63+
keyword: 'lime',
64+
name: 'blue',
65+
function: 'limegreen',
66+
string: 'pink',
67+
},
68+
}}
69+
/>
70+
```
71+
72+
### Available Configurations
73+
74+
Here is an example of theme object for configuring the theme.
75+
76+
```ts
77+
// One Dark Pro
78+
one_dark_pro = {
79+
comment: '#5c6370',
80+
comment_start: '#5c6370',
81+
comment_end: '#5c6370',
82+
preprocessor: '#c678dd',
83+
defined: '#d19a66',
84+
header_file: '#98c379',
85+
keyword: '#c678dd',
86+
name: '#ef596f',
87+
string: '#98c379',
88+
'quote single': '#98c379',
89+
'quote double': '#98c379',
90+
format_specifier: '#d19a66',
91+
number: '#d19a66',
92+
bin_prefix: '#ef596f',
93+
hex_prefix: '#ef596f',
94+
oct_prefix: '#ef596f',
95+
function: '#61afef',
96+
operator: '#c678dd',
97+
escape: '#56b6c2',
98+
'open_paren bracket0': '#d19a66',
99+
'open_curly bracket0': '#d19a66',
100+
'close_paren bracket0': '#d19a66',
101+
'close_curly bracket0': '#d19a66',
102+
'open_paren bracket1': '#c678dd',
103+
'open_curly bracket1': '#c678dd',
104+
'close_paren bracket1': '#c678dd',
105+
'close_curly bracket1': '#c678dd',
106+
'open_paren bracket2': '#56b6c2',
107+
'close_curly bracket2': '#56b6c2',
108+
'close_paren bracket2': '#56b6c2',
109+
'open_curly bracket2': '#56b6c2',
110+
'open_square bracket0': '#c678dd',
111+
'close_square bracket0': '#c678dd',
112+
'open_square bracket1': '#d19a66',
113+
'close_square bracket1': '#d19a66',
114+
'open_square bracket2': '#56b6c2',
115+
'close_square bracket2': '#56b6c2',
116+
};
117+
```
118+
119+
Here is an example of theme css
120+
121+
```css
122+
/* The comment Text */
123+
.aurora-comment {
124+
color: #5c6370;
125+
font-style: italic;
126+
}
127+
128+
/* The comment start and end e.g. // and */
129+
.aurora-comment_start {
130+
color: #5c6370;
131+
font-style: italic;
132+
}
133+
134+
/* The comment start and end e.g. */
135+
.aurora-comment_end {
136+
color: #5c6370;
137+
font-style: italic;
138+
}
139+
140+
/* The preprocessor Directive Color */
141+
.aurora-preprocessor {
142+
color: #c678dd;
143+
}
144+
145+
/* Macro color */
146+
.aurora-defined {
147+
color: #d19a66;
148+
}
149+
150+
/* Header file color */
151+
.aurora-header_file {
152+
color: #98c379;
153+
}
154+
155+
/* The keyword color */
156+
.aurora-keyword {
157+
color: #c678dd;
158+
}
159+
160+
/* Names e.g. variable names */
161+
.aurora-name {
162+
color: #ef596f;
163+
}
164+
165+
/* String literal color */
166+
.aurora-string {
167+
color: #98c379;
168+
}
169+
170+
/* Single quote color */
171+
.aurora-quote.single {
172+
color: #98c379;
173+
}
174+
175+
/* Double quote color */
176+
.aurora-quote.double {
177+
color: #98c379;
178+
}
179+
180+
/* Format specifier color */
181+
.aurora-format_specifier {
182+
color: #d19a66;
183+
}
184+
185+
/* Number literal color */
186+
.aurora-number {
187+
color: #d19a66;
188+
}
189+
190+
/* Binary number prefix color e.g. 0b */
191+
.aurora-bin_prefix {
192+
color: #ef596f;
193+
}
194+
/* Hexadecimal number prefix color e.g. 0x */
195+
.aurora-hex_prefix {
196+
color: #ef596f;
197+
}
198+
199+
/* Octal number prefix color e.g. 0 */
200+
.aurora-oct_prefix {
201+
color: #ef596f;
202+
}
203+
204+
/* Function color */
205+
.aurora-function {
206+
color: #61afef;
207+
}
208+
209+
/* Operators color */
210+
.aurora-operator {
211+
color: #c678dd;
212+
}
213+
214+
/* Escape character color */
215+
.aurora-escape {
216+
color: #56b6c2;
217+
}
218+
219+
/* Bracket pair color 0 */
220+
.aurora-open_paren.bracket0,
221+
.aurora-open_curly.bracket0,
222+
.aurora-close_paren.bracket0,
223+
.aurora-close_curly.bracket0 {
224+
color: #d19a66;
225+
}
226+
227+
/* Bracket pair color 1 */
228+
.aurora-open_paren.bracket1,
229+
.aurora-open_curly.bracket1,
230+
.aurora-close_paren.bracket1,
231+
.aurora-close_curly.bracket1 {
232+
color: #c678dd;
233+
}
234+
235+
/* Bracket pair color 2 */
236+
.aurora-open_paren.bracket2,
237+
.aurora-open_curly.bracket2,
238+
.aurora-close_paren.bracket2,
239+
.aurora-close_curly.bracket2 {
240+
color: #56b6c2;
241+
}
242+
243+
.aurora-open_square.bracket0,
244+
.aurora-close_square.bracket0 {
245+
color: #c678dd;
246+
}
247+
.aurora-open_square.bracket1,
248+
.aurora-close_square.bracket1 {
249+
color: #d19a66;
250+
}
251+
.aurora-open_square.bracket2,
252+
.aurora-close_square.bracket2 {
253+
color: #56b6c2;
254+
}
255+
256+
/* Comma Color*/
257+
/* .comma {
258+
color: #0d1117;
259+
} */
260+
261+
/* Semicolon Color*/
262+
/* .semicolon {
263+
color: #0d1117;
264+
} */
265+
266+
/* Colon color*/
267+
/* .colon {
268+
color: #0d1117;
269+
} */
270+
271+
/* Hash color */
272+
/* .hash {
273+
color: #0d1117;
274+
} */
275+
276+
/* These will override bracket pair colors */
277+
/* .open_paren {
278+
279+
}
280+
.close_paren{
281+
282+
}
283+
.open_curly{
284+
285+
}
286+
.close_curly{
287+
288+
}
289+
.open_square{
290+
291+
}
292+
.close_square{
293+
294+
} */
295+
/*
296+
.whitespace {
297+
background-color: #56b6c2;
298+
} */
299+
/*
300+
.unknown {
301+
color: red;
302+
} */
303+
```
304+
305+
## Contributing
306+
307+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Try Aurora</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)