question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support <pre> tag

See original GitHub issue

HTML contains the insert code, like this: wx20180707-182242 2x the source code of this html is a “pre” tag, i render this HTML into native views by react-native-render-html, i got this result

wx20180707-182310 2x

the render result is unfriendly, the original format is lost. i think render a HTML page which contains insert code is very common and important requirements. so i mentioned this issue, hoping to get a good answer.

Environment

    React: 16.3.1
    React native: 0.53.0
    react-native-render-html: 3.10.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
Milrercommented, Apr 14, 2021

@jsamr Oh that’s great! Can’t wait to get this published, thanks for the work!

1reaction
bobjflongcommented, Sep 21, 2018

We managed to get this working by substituting newlines within pres using the alterData hook, then writing a custom renderer for pre that splits these newlines back in:

Step 1. replace newlines within pre text (not exact code):

alterData: node => {
  if (node.parent && node.parent.name === "pre") {
    return node.data.replace(/\n/g, "___PRE_NEWLINE___")
  }
}

Step 2. add the newlines back in with a custom renderer for pre:

const Pre = (_htmlAttribs, _children, _convertedCssStyles, passProps) => {
  const children = passProps.rawChildren
    .map(rawChild => rawChild.data)
    .join("")
    .split("___PRE_NEWLINE___")
  return (
    <React.Fragment key={passProps.key}>
      {children.map(line => (
        <YourMonospaceComponent>
          {line}
        </YourMonospaceComponent>
      ))}
    </React.Fragment>
  )
}

Hope that helps

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML pre tag - W3Schools
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces...
Read more >
<pre>: The Preformatted Text element - HTML - MDN Web Docs
The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically ......
Read more >
HTML - <pre> Tag - Tutorialspoint
Description. The HTML <pre> tag is used for indicating preformatted text. · Example. Live Demo · Global Attributes. This tag supports all the...
Read more >
HTML <pre> Tag - GeeksforGeeks
The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, ... Supported...
Read more >
<pre> Tag in HTML – Example Code - freeCodeCamp
The HTML <pre> tag defines a preformatted block of text. It comes in handy when you want to display text where the typographical...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found