I have the following JS string that creates markdown with a proper breakline between the two lines:
`this is some text${' '}
and this is a new line
`
Notice the two explicit spaces at the end of the first line. However, I can't figure out how to do two break lines. I've tried adding 4 spaces, but is not working.
What am I missing?
Not sure if this is exactly what you are looking for but you can throw in the line break <br /> character to let you skip as many lines as you like.
this is some text${'<br /><br />'}
this is some text${''}
You can use `` backticks for this: ES6 template strings.
let text = `this is some text${' '} \n \n and this is a new line`
You need to use a code block or raw HTML (see below). But, first let's address why your attempts do not work...
Markdown is not interpreted inside code blocks and spans. Otherwise, how would you demonstrate Markdown syntax within a Markdown document. Therefore, the double spaces to force a linebreak are ignored within your code span. Additionally, any <br> tag is assumed to be part of the code and escaped (as <br>) to be displayed in the span.
Code delimited by single backticks is a code span, not a code block. Code spans do not preserve all whitespace. They follow HTML's normal whitespace behavior of collapsing all whitespace to a single space.
If you want to preserve all whitespace, including newlines, then you should place your code in a code block. Within a code block, all newlines are preserved with no need to add extra spaces. There are a few ways to represent a code block. Of course, the standard way of indenting the block:
Some document text
this is some text${' '}
and this is a new line
More document text
Alternatively, if you are using a Markdown implementation which supports fenced code blocks (not all do), then you can used the triple backtick to delimit your block of code:
Some document text
```
this is some text${' '}
and this is a new line
```
More document text
Both of the above render the same:
Some document text
this is some text${' '}
and this is a new line
More document text
Notice that the newline is preserved. No special tricks necessary.
All of that said, if you really need a code span which contains a line break, that it outside of the scope of Markdown's syntax. However, as is always the case, anything you can't do in Markdown can be done with raw HTML. Therefore you could do the following:
<code>this is some text${' '}<br>and this is a new line</code>
Which renders as:
this is some text${' '}and this is a new line
Related
I have a textarea in React that also accepts newLine characters. It is correctly stored in mongoDB with the newLine characters. When I retrieve it back to React and try to display it in table <td>, it shows with spaces. But if I put it on console, it is correctly shown. I guess that is because in HTML newline character is <br >. How can I do this?
I tried replacing '\n' with <br> using replace(), but then <br> gets concatenated as a string literal.
"items" shown in mongoDB
How its displayed in table
Correctly shown in console
Code
As MrBens suggested, the simplest solution is to use the pre (preformatted text) tag. For example:
<td><pre>This is
two lines</pre></td>
Would result in:
This is
two lines
There's also a similar CSS style, whitespace: pre or whitespace: pre-wrap. The MDN has details about that also.
I have tag like <span style="font-size:10.5pt;\nfont-family:\nKaiTi"> and I want to replace \n within tag with empty character.
Note: Tag could be anything(not fixed)
I want regex expression to replace the same in the javascript.
You should be able to strip out the \n character before applying this HTML to the page.
Having said that, try this (\\n)
You can see it here: regex101
Edit: A bit of refinement and I have this (\W\\n). It works with the example you provided. It breaks down if you have spaces in the body of the tags (<span> \n </span>).
I've tried everything I know to do. Perhaps someone with more regex experience can assist?
I am using String.fromCharCode to add new line (or) carriage return to my html text.
It is like,
"Ant the other line here..." + String.fromCharCode(13)
Jsfiddle is #http://jsfiddle.net/udmfsvfn/
But, no newline characters are added in the page!!
If you want a line break in HTML you need to supply <br> entity instead of a line break (your String.fromCharCode(13) code) since HTML interprets line breaks as usual spaces in text.
The reason that a newline character is not forcing a new line, is that in HTML a newline character doesnt do anything and is ignored.
In order to force text onto a new line, you will need to add the appropriate HTML tag, such as <BR> or put your text inside paragraphs <p>.
See the updated fiddle.
String.fromCharCode(10);
with CSS
white-space: pre-line;
Here si working example:
https://jsfiddle.net/Nxja/3xtcqdej/1/
I am going through the example given in JavaScript The Complete Reference 3rd Edition.
The O/P can be seen here, given by the author.
<body>
<h1>Standard Whitespace Handling</h1>
<script>
// STRINGS AND (X)HTML
document.write("Welcome to JavaScript strings.\n");
document.write("This example illustrates nested quotes 'like this.'\n");
document.write("Note how newlines (\\n's) and ");
document.write("escape sequences are used.\n");
document.write("You might wonder, \"Will this nested quoting work?\"");
document.write(" It will.\n");
document.write("Here's an example of some formatted data:\n\n");
document.write("\tCode\tValue\n");
document.write("\t\\n\tnewline\n");
document.write("\t\\\\\tbackslash\n");
document.write("\t\\\"\tdouble quote\n\n");
</script>
<h1>Preserved Whitespace</h1>
<pre>
<script> // in Eclipse IDE, at this line invalid location of tag(script)
// STRINGS AND (X)HTML
document.write("Welcome to JavaScript strings.\n");
document.write("This example illustrates nested quotes 'like this.'\n");
document.write("Note how newlines (\\n's) and ");
document.write("escape sequences are used.\n");
document.write("You might wonder, \"Will this nested quoting work?\"");
document.write(" It will.\n");
document.write("Here's an example of some formatted data:\n\n");
document.write("\tCode\tValue\n");
document.write("\t\\n\tnewline\n");
document.write("\t\\\\\tbackslash\n");
document.write("\t\\\"\tdouble quote\n\n");
</script>
</pre>
</body>
(X)HTML automatically “collapses” multiple whitespace characters down to one whitespace. So, for example, including multiple consecutive tabs in your HTML shows up as only one space character. In this example, the pre tag is used to tell the browser that the
text is preformatted and that it should not collapse the white space inside of it. Similarly, we could use the CSS white-space property to modify standard white space handling. Using pre allows the tabs in the example to be displayed correctly in the output.
So, how to get rid of this warning and do i really need to have a concern for this? I think i am missing something as i have the intuition of the authors not being wrong?
There is nothing wrong in having script inside pre tag. It is just Eclipse IDE validation issue. If you use this html in the browser everything works fine and no warnings are displayed.
Also, if you wanted to show script tag as 'text content' inside pre tag, then have a look at this question: script in pre
I'm using javascript with a super simple regex to replace a "<" with the HTML character code for it so I can place some code on my site using the pre and code tags and have it done automatically.
jsFiddle link
basically I'm trying to figure out why this js code:
var str = document.getElementById("cleanme").innerHTML;
str=str.replace(/</g,"<");
document.getElementById("cleanme").innerHTML = str;
removes the "/" in the br tag
<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>
not a huge deal because I'm just displaying code, but I'd still like to know.
it outputs this:
<p><br>this is some code</p>
thanks
I believe it has to do with the way certain browsers return the innerHTML property. If you use Google Chrome, inspect any < br/ > tag using the debugging tools and you'll notice they don't show a backslash. The same is true when Chrome returns an innerHTML property, the blackslash is stripped out.
So when you pass in:
<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>
The browser return an innerHTML property of:
<pre><code id="cleanme">
<p><br>this is some code</p>
</code></pre>
Your RegEx is not the issue.
Your script is OK.
If you try this:
var str = '<p><br />this is some code</p>';
str=str.replace(/</g,"<");
str=str.replace(/>/g,">");
document.getElementById("cleanme").innerHTML = str;
It'll correctly print <br />.
Possibly it's effect of browser's HTML normalization.
Maybe too late to help you, and you've accepted a correct answer, but there's another big potential problem.
I tried this with Firefox 3.6.11 on Linux and 3.6.12 on Windows and they both behaved the same --
I did not see the <p><br>this is some code</p> in the Result pane on your fiddle, instead I saw simply this is some code with no markup at all.
Throwing firebug at it by adding a debugger; statement as the first line in the JavaScript pane and tracing through it, I found that str was getting a value of '\n', that is, just a newline was being returned from innerHTML and nothing else.
Thinking about this, but with no way to confirm it, I suspect it's because Firefox is building the DOM tree differently than you expect, because the HTML you're using is invalid. Inline elements are not allowed to contain block elements; specifically, the <code> tag is not allowed to contain a <p> tag, and <pre> is likewise not allowed to contain a <p> tag -- again, only limited inline elements can be used inside a <pre> tag).
I think FF is implicitly closing the code block before opening the paragraph so the innerHTML of id="cleanme" is nothing but the newline. It renders with the "pre" font as you expect because you've thrown the browser into Quirks Mode.
innerHTML does not return the literal source code, but the result of the browser's interpretation of it.
Different browsers will return very different results for innerHTML, sometimes omitting some quotes and 'optional' end tags, capitalizing some tag names and attributes, and collapsing extra white-space.
And HTML does not close open tags that can't have end tags, so they are not included either.