rn-shiki 0.0.37-30 → 0.0.37-32
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
|
@@ -34,29 +34,33 @@ const baseStyles = StyleSheet.create({
|
|
|
34
34
|
minHeight: 20,
|
|
35
35
|
backgroundColor: '#1e1e1e',
|
|
36
36
|
},
|
|
37
|
+
contentContainer: {
|
|
38
|
+
flexGrow: 1,
|
|
39
|
+
minWidth: '100%',
|
|
40
|
+
},
|
|
41
|
+
codeContainer: {
|
|
42
|
+
paddingVertical: 8,
|
|
43
|
+
minWidth: '100%',
|
|
44
|
+
},
|
|
37
45
|
lineContainer: {
|
|
38
46
|
flexDirection: 'row',
|
|
39
|
-
flexWrap: 'wrap',
|
|
40
47
|
minWidth: '100%',
|
|
41
48
|
paddingHorizontal: 16,
|
|
42
|
-
paddingVertical:
|
|
49
|
+
paddingVertical: 1,
|
|
50
|
+
},
|
|
51
|
+
line: {
|
|
52
|
+
flexDirection: 'row',
|
|
53
|
+
flexWrap: 'wrap',
|
|
54
|
+
flex: 1,
|
|
43
55
|
},
|
|
44
56
|
token: {
|
|
45
57
|
fontFamily: monospaceFont,
|
|
46
58
|
fontSize: 14,
|
|
47
59
|
color: '#d4d4d4',
|
|
48
60
|
},
|
|
49
|
-
container: {
|
|
50
|
-
paddingVertical: 8,
|
|
51
|
-
},
|
|
52
|
-
line: {
|
|
53
|
-
flexDirection: 'row',
|
|
54
|
-
flexWrap: 'wrap',
|
|
55
|
-
width: '100%',
|
|
56
|
-
},
|
|
57
61
|
})
|
|
58
62
|
|
|
59
|
-
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, fontSize = 14 }) => {
|
|
63
|
+
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, fontSize = 14, showLineNumbers = false }) => {
|
|
60
64
|
const stylesheet = useMemo(() => {
|
|
61
65
|
const themeRegistration = getThemeRegistration(theme)
|
|
62
66
|
const styles = getRNStylesFromShikiStyle(themeRegistration)
|
|
@@ -71,6 +75,15 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
|
71
75
|
fontSize,
|
|
72
76
|
color: themeRegistration.colors?.['editor.foreground'] || '#d4d4d4',
|
|
73
77
|
},
|
|
78
|
+
lineNumber: {
|
|
79
|
+
width: 40,
|
|
80
|
+
paddingRight: 16,
|
|
81
|
+
textAlign: 'right',
|
|
82
|
+
color: themeRegistration.colors?.['editorLineNumber.foreground'] || '#858585',
|
|
83
|
+
fontFamily: monospaceFont,
|
|
84
|
+
fontSize,
|
|
85
|
+
opacity: 0.5,
|
|
86
|
+
},
|
|
74
87
|
})
|
|
75
88
|
}, [theme, fontSize])
|
|
76
89
|
|
|
@@ -84,16 +97,12 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
|
84
97
|
const renderToken = (token: ThemedToken, index: number) => {
|
|
85
98
|
const styles: StyleProp<TokenStyle>[] = [stylesheet.token]
|
|
86
99
|
|
|
87
|
-
// Always apply the token color if it exists
|
|
88
100
|
if (token.color) {
|
|
89
101
|
styles.push({ color: token.color })
|
|
90
102
|
}
|
|
91
103
|
|
|
92
|
-
// Add font styles
|
|
93
104
|
if (token.fontStyle) {
|
|
94
105
|
styles.push({
|
|
95
|
-
// fontStyle: token.fontStyle.includes('italic') ? 'italic' : 'normal',
|
|
96
|
-
// fontWeight: token.fontStyle.includes('bold') ? 'bold' : 'normal',
|
|
97
106
|
fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
|
|
98
107
|
fontWeight: (token.fontStyle as unknown as string).includes('bold') ? 'bold' : 'normal',
|
|
99
108
|
})
|
|
@@ -107,15 +116,15 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
|
107
116
|
}
|
|
108
117
|
|
|
109
118
|
const renderLine = (line: ThemedToken[], lineIndex: number) => (
|
|
110
|
-
<View key={lineIndex} style={baseStyles.
|
|
111
|
-
{
|
|
112
|
-
<
|
|
119
|
+
<View key={lineIndex} style={baseStyles.lineContainer}>
|
|
120
|
+
{showLineNumbers && <Text style={stylesheet.lineNumber}>{(lineIndex + 1).toString()}</Text>}
|
|
121
|
+
<View style={baseStyles.line}>{line.map((token, tokenIndex) => renderToken(token, tokenIndex))}</View>
|
|
113
122
|
</View>
|
|
114
123
|
)
|
|
115
124
|
|
|
116
125
|
return (
|
|
117
|
-
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.editor]} contentContainerStyle={baseStyles.
|
|
118
|
-
<View>{tokens.map((line, index) => renderLine(line, index))}</View>
|
|
126
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.editor]} contentContainerStyle={baseStyles.contentContainer}>
|
|
127
|
+
<View style={baseStyles.codeContainer}>{tokens.map((line, index) => renderLine(line, index))}</View>
|
|
119
128
|
</ScrollView>
|
|
120
129
|
)
|
|
121
130
|
}
|