rn-shiki 0.0.31 → 0.0.32
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,31 +1,20 @@
|
|
1
|
-
import type {
|
1
|
+
import type { SyntaxHighlighterProps } from 'src/types/shiki'
|
2
2
|
import React from 'react'
|
3
3
|
import { Text, View } from 'react-native'
|
4
|
-
import typescript from 'shiki/langs/typescript.mjs'
|
5
4
|
import githubDark from 'shiki/themes/github-dark.mjs'
|
6
5
|
import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
|
7
6
|
|
8
|
-
|
9
|
-
text: string
|
10
|
-
lang?: LanguageInput
|
11
|
-
langName?: string
|
12
|
-
theme?: ThemeInput
|
13
|
-
themeName?: string
|
14
|
-
fontSize?: number
|
15
|
-
}
|
16
|
-
|
17
|
-
function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', theme = githubDark, themeName = 'github-dark', fontSize }: SyntaxHighlighterProps) {
|
7
|
+
function SyntaxHighlighter({ text, language, languageId, theme = githubDark }: SyntaxHighlighterProps) {
|
18
8
|
const { tokens, error, isLoading } = useSyntaxHighlighter({
|
19
9
|
text,
|
20
|
-
|
21
|
-
|
10
|
+
language,
|
11
|
+
languageId,
|
22
12
|
theme,
|
23
|
-
themeName,
|
24
13
|
})
|
25
14
|
|
26
15
|
if (error) {
|
27
16
|
return (
|
28
|
-
<Text style={{ color: '#ff6b6b', fontFamily: 'monospace'
|
17
|
+
<Text style={{ color: '#ff6b6b', fontFamily: 'monospace' }}>
|
29
18
|
Error:
|
30
19
|
{error}
|
31
20
|
</Text>
|
@@ -33,7 +22,7 @@ function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', t
|
|
33
22
|
}
|
34
23
|
|
35
24
|
if (isLoading) {
|
36
|
-
return <Text style={{ color: '#
|
25
|
+
return <Text style={{ color: '#666666', fontFamily: 'monospace' }}>Loading...</Text>
|
37
26
|
}
|
38
27
|
|
39
28
|
return (
|
@@ -44,16 +33,22 @@ function SyntaxHighlighter({ text, lang = typescript, langName = 'typescript', t
|
|
44
33
|
<Text
|
45
34
|
key={`${lineIndex}-${tokenIndex}`}
|
46
35
|
style={{
|
47
|
-
color: token.color || '#
|
36
|
+
color: token.color || '#000000',
|
48
37
|
fontFamily: 'monospace',
|
49
|
-
fontSize,
|
50
38
|
fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
|
51
39
|
}}
|
52
40
|
>
|
53
41
|
{token.content.replace(/ /g, '\u00A0')}
|
54
42
|
</Text>
|
55
43
|
))}
|
56
|
-
<Text
|
44
|
+
<Text
|
45
|
+
style={{
|
46
|
+
color: theme === githubDark ? '#000000' : '#FFFFFF',
|
47
|
+
fontFamily: 'monospace',
|
48
|
+
}}
|
49
|
+
>
|
50
|
+
{'\n'}
|
51
|
+
</Text>
|
57
52
|
</View>
|
58
53
|
))}
|
59
54
|
</View>
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import type {
|
1
|
+
import type { SyntaxHighlighterProps, ThemedToken, TokensResult } from '../types/shiki'
|
2
2
|
import { useEffect, useState } from 'react'
|
3
3
|
import { createHighlighter } from '../syntax'
|
4
4
|
|
5
|
-
export function useSyntaxHighlighter({ text,
|
5
|
+
export function useSyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
|
6
6
|
const [tokens, setTokens] = useState<ThemedToken[][]>([])
|
7
7
|
const [error, setError] = useState<string>()
|
8
8
|
const [isLoading, setIsLoading] = useState(true)
|
@@ -20,14 +20,14 @@ export function useSyntaxHighlighter({ text, lang, langName, theme, themeName }:
|
|
20
20
|
|
21
21
|
try {
|
22
22
|
const highlighter = await createHighlighter({
|
23
|
-
langs: [
|
24
|
-
themes: [theme],
|
23
|
+
langs: [language],
|
24
|
+
themes: theme ? [theme] : [],
|
25
25
|
})
|
26
26
|
|
27
27
|
const result = highlighter.codeToTokens(text, {
|
28
|
-
lang:
|
29
|
-
theme:
|
30
|
-
}) as
|
28
|
+
lang: languageId,
|
29
|
+
theme: theme || 'none',
|
30
|
+
}) as TokensResult
|
31
31
|
|
32
32
|
if (mounted && result.tokens) {
|
33
33
|
setTokens(result.tokens)
|
@@ -52,7 +52,7 @@ export function useSyntaxHighlighter({ text, lang, langName, theme, themeName }:
|
|
52
52
|
return () => {
|
53
53
|
mounted = false
|
54
54
|
}
|
55
|
-
}, [text,
|
55
|
+
}, [text, language, languageId, theme])
|
56
56
|
|
57
57
|
return { tokens, error, isLoading }
|
58
58
|
}
|
package/src/types/shiki.ts
CHANGED
@@ -1,17 +1,19 @@
|
|
1
|
-
import type { LanguageInput,
|
1
|
+
import type { LanguageInput, ThemeRegistrationAny } from 'shiki'
|
2
2
|
|
3
|
-
export
|
3
|
+
export interface ThemedToken {
|
4
|
+
content: string
|
5
|
+
color?: string
|
6
|
+
fontStyle?: string
|
7
|
+
fontWeight?: string
|
8
|
+
}
|
4
9
|
|
5
|
-
export interface
|
10
|
+
export interface TokensResult {
|
6
11
|
tokens: ThemedToken[][]
|
7
|
-
bg: string
|
8
|
-
fg: string
|
9
12
|
}
|
10
13
|
|
11
14
|
export interface SyntaxHighlighterProps {
|
12
15
|
text: string
|
13
|
-
|
14
|
-
|
15
|
-
theme
|
16
|
-
themeName: string
|
16
|
+
language: LanguageInput
|
17
|
+
languageId: string
|
18
|
+
theme?: ThemeRegistrationAny
|
17
19
|
}
|
package/src/types/shiki.d.ts
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
import type { LanguageInput, ThemeInput } from 'shiki'
|
2
|
-
|
3
|
-
declare module 'vendor/shiki/core/core' {
|
4
|
-
export interface HighlighterCoreOptions {
|
5
|
-
engine: any
|
6
|
-
langs: LanguageInput[]
|
7
|
-
themes: ThemeInput[]
|
8
|
-
}
|
9
|
-
|
10
|
-
export function createHighlighterCore(options: HighlighterCoreOptions): any
|
11
|
-
}
|
12
|
-
|
13
|
-
declare module 'vendor/shiki/core/engine-javascript' {
|
14
|
-
export function createJavaScriptRegexEngine(): any
|
15
|
-
}
|