conorhastings / react-native-syntax-highlighter

a syntax highlighter for react native using https://github.com/conorhastings/react-syntax-highlighter under the hood
MIT License
167 stars 25 forks source link

Multi-line comments don't render #22

Open kipprice opened 4 years ago

kipprice commented 4 years ago

Multiline comments seem to have some visual oddities:

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>
    );
  }
}

image