推荐开源项目:React Native Syntax Highlighter
React Native Syntax Highlighter 是一个用于在 React Native 应用程序中高亮显示代码的库。它可以轻松地将多种语言的代码块渲染为具有语法高亮的视图。
以下是如何使用该库的基本示例:
首先,你需要安装库:
npm install react-native-syntax-highlighter
然后,你可以在你的 React Native 应用程序中这样使用它:
import React from 'react';
import { View } from 'react-native';
import { Prism as SyntaxHighlighter } from 'react-native-syntax-highlighter';
import { darcula } from 'react-native-syntax-highlighter/dist/styles/prism';
export default function App() {
const code = `
function helloWorld() {
console.log("Hello, world!");
}
`;
return (
<View style={{ flex: 1 }}>
<SyntaxHighlighter language='javascript' style={darcula}>
{code}
</SyntaxHighlighter>
</View>
);
}
在这个例子中,我们导入了 SyntaxHighlighter
组件和 darcula
样式,并使用 language='javascript'
参数指定了代码的语言。然后,我们将我们想要高亮的代码字符串传递给 SyntaxHighlighter
组件。这将渲染代码并应用语法高亮。
评论已关闭