Multiline comments seem to have some visual oddities:
When rendering standard multiline comments (/* ... */), any line that does not have a start or end comment marker (/* or */) gets rendered as standard text.
When rendering documentation headers(/** ... **/), every line except the first renders correctly as a comment
These issues are reproducible through the snack demo via the following code:
import React from 'react';
import { Text, View } from 'react-native';
import SyntaxHighlighter from 'react-native-syntax-highlighter'; // 2.0.0
import { tomorrow } from 'react-syntax-highlighter/styles/prism' // 7.0.1
const code = `
/* this is the header
of this very complicated
function
it is very important
that we keep track
of all of this context */
function veryImportant() {
doSomething();
}
/**
* @description This does something
* @params [optionalParam]
* @returns A value
**/
function doSomething(optionalParam) {
console.log("wowza")
}
`;
export default class App extends React.Component {
constructor() {
super();
this.state = { code };
}
render() {
return (
<View style={{ backgroundColor: '#E87A90', height: '100%'}}>
<Text style={{ marginTop: 30, marginBottom: 30, textAlign: 'center', fontSize: 22, fontWeight: '900' }}>React Native Syntax Higlighter</Text>
<SyntaxHighlighter
{...this.props}
style={tomorrow}
customStyle={{padding: 0, margin: 0 }}
language='javascript'
fontSize={18}
highlighter="prism"
>
{this.state.code}
</SyntaxHighlighter>
</View>
);
}
}
Multiline comments seem to have some visual oddities:
/* ... */
), any line that does not have a start or end comment marker (/*
or*/
) gets rendered as standard text./** ... **/
), every line except the first renders correctly as a commentThese issues are reproducible through the snack demo via the following code: