Skip to content

Multi-line comments don't render #22

@kipprice

Description

@kipprice

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

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions