react-native-syntax-highlighter
Advanced tools
Syntax highlighting component for React Native using react-syntax-highlighter
You can see a demo using snack by Expo
Alternatively you can scan this qr code in The Expo app to access on your phone:
You can try it out with Expo here
npm install react-native-syntax-highlighter --save
Accepts all of the same props as react-syntax-highlighter with three additional props.
fontFamily - the font family to use for syntax text.fontSize - the fontSize for syntax text.highligter - defaults to rendering with vdom created from highlightjs, but can pass in prism as alternate option. You can see more about dealing with the prism highlighter in the docs for react-syntax-highlighter but one of the main uses would be better support for jsximport SyntaxHighlighter from 'react-native-syntax-highlighter';
/*by default component uses hljs so access hljs styles, import from /prism for prism styles */
import { docco } from 'react-syntax-highlighter/styles/hljs';
const Component = () => {
const codeString = '(num) => num + 1';
return <SyntaxHighlighter
language='javascript'
style={docco}
highlighter={"prism" || "hljs"}
>
{codeString}
</SyntaxHighlighter>;
}
Some of the react-syntax-highlighter props are not currently supported by the mobile version, you can see which listed below:
FAQs
a react native component for syntax highlighting
The npm package react-native-syntax-highlighter receives a total of 2,373 weekly downloads. As such, react-native-syntax-highlighter popularity was classified as popular.
We found that react-native-syntax-highlighter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.