Hello Conor,
I got an error while I am using react-native-syntax-highlighter inside react-native-render-html.
I got this error:
Here is my code
import React from 'react';
import { View } from 'react-native';
import Html from 'react-native-render-html';
import SyntaxHighlighter from 'react-native-syntax-highlighter';
const contentTest = `
<li>
<h3>Hello</h3>
<pre class="brush: xml; title: ; notranslate" title="">
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
</li>`
export default class SyntaxHighlighterTest extends React.Component{
render(){
return (
<View style={{ flex: 1, flexDirection: 'column' }}>
<Html
html={contentTest}
renderers={{
pre: (node)=> {
return <SyntaxHighlighter>{contentTest}</SyntaxHighlighter>
}
}}
/>
</View>
);
}
}
I found that the content I am passing has an issue
If I am using this content without <h3> tag then it is working fine:
Working
const contentTest = `
<li>
<pre class="brush: xml; title: ; notranslate" title="">
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
</li>`
Not Working
const contentTest = `
<li>
<h3> Hello </h3>
<pre class="brush: xml; title: ; notranslate" title="">
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
</li>`
So SyntaxHighlighter takes content that has only one child in parent tag.
Note: It is working when I am using this outside of react-native-render-html, but I want to use within html renderer.
What will be the best practice to resolve this issue ?
Thank you
Hello Conor,
I got an error while I am using
react-native-syntax-highlighterinsidereact-native-render-html.I got this error:
Here is my code
I found that the content I am passing has an issue
If I am using this content without
<h3>tag then it is working fine:Working
Not Working
So
SyntaxHighlightertakes content that has only one child in parent tag.Note: It is working when I am using this outside of
react-native-render-html, but I want to use within html renderer.What will be the best practice to resolve this issue ?
Thank you