Closed
Description
I'm trying to get an ascii art to be properly rendered by my React application.
After jsx-transformer is executed my art looses the format and renders pretty strange in the browser. It seems to be related to not identifying line breaks properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
This is just an example, and the real context is in a website generator that starts with markdown -> html -> jsx. That said, I cannot change the React.createClass element.
Someone proposed this:
var App = React.createClass({
render: function() {
var ascii = [
"+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
].join('\n');
return (
<pre>
<code>
{ascii}
</code>
</pre>
);
}
});
It fixes the problem, but I cannot edit the markdown elements to reflect this. I'm more interested to know why JSX transformation is not identifying to line breaks inside code blocks.
Alan
Metadata
Metadata
Assignees
Labels
No labels