rn-shiki 0.0.37-16 → 0.0.37-18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-16",
+  "version": "0.0.37-18",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,7 +1,7 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import type { ReactStyle } from '../../utils/style-transformer'
 import React, { useMemo } from 'react'
-import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
 
@@ -38,25 +38,28 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    const tokenStyles: TextStyle = StyleSheet.flatten([
-      stylesheet.token,
+    // Ensure to collect all styles associated with the token's scopes
+    const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
+    const tokenStylesArray = tokenScopes.map((scope: string) => stylesheet[scope] || {})
+    const combinedStyles = StyleSheet.flatten([
+      ...tokenStylesArray,
       {
         fontFamily: monospaceFont,
-        ...(token.color && { color: token.color }),
-        ...(token.fontStyle === 'italic' && stylesheet.italic),
-        ...(token.fontWeight === 'bold' && stylesheet.bold),
       },
+      ...(token.color && { color: token.color }),
+      ...(token.fontStyle && { fontStyle: token.fontStyle }),
     ])
 
-    console.log(`Rendering token: ${token.content}, styles:`, tokenStyles)
+    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={tokenStyles}>
+      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
+  // In the renderLine and renderToken flow
   const renderLine = (line: any[], lineIndex: number) => {
     console.log(`Rendering line ${lineIndex}:`, line)
     return (