reactjs.net - are react-text tags required when rendered? - reactjs.net

I have been following this tutorial http://reactjs.net/getting-started/tutorial.html and all works great. However in the final output source, I get the following comment tags, why is the text wrapped around the react-text tags, are they required tags? Why are they in comment tags? Can they be removed somehow?
<!-- react-text: 6 -->Hello ReactJS.NET World!<!-- /react-text -->
<!-- react-text: 9 -->This is one comment<!-- /react-text -->

The comments are needed, they're used internally by React to denote segments of text. For example, if you render two variables directly next to each other, React uses the comments to know where one variable ends and the next variable begins, so it can correctly update the text on updates.
This was changed in React v15, previous versions used <span>s to wrap the text segments. There's more information at https://facebook.github.io/react/blog/2016/04/07/react-v15.html#no-more-extra-ltspangts.

Related

Why does text within an HTML tag sometimes not get translated?

I've written a program that uses the Google Translate Python API to translate webpages. Most of the time, the API does translation as I expect, but in some cases text within a tag does not get translated.
I tried putting one such tag in the Google Translate web interface and found that the text is still not translated; i.e., the problem has to do with the Google Translate service rather than the way I am using the API.
The specific tag I am looking at is: <div class="someClass">World:</div>
I want the word "World" to be translated in the output, regardless of the language into which I am translating. In certain languages, such as French and Khmer, the word "World" is translated as expected, but in other languages, such as Spanish and Somali, it remains "World." I have noticed that removing the class attribute sometimes helps (translation then works in Spanish but not in Somali), and adding more text seems to help as well (I've never seen this issue when the text is a full sentence or paragraph, for example).
In the context of my project, it is particularly important that the case of a tag with just one word inside be handled correctly. Does anyone know why this is happening or how I can make translation happen consistently? A solution requiring minimal to no changes to the original HTML would be ideal.
Edit A little more context based on playing around with things: Directly calling google.cloud.translate.Client().translate('<div class="someClass">World:</div>', 'es') actually has the correct behavior: "World" becomes "Mundo." I incrementally lengthened the page text by adding tags that came before and after that div in the original webpage--none of which wrapped more than one word of text--and the text between tags stopped being translated when the text was around 1,000 characters long. However, when I changed "World:" to a whole sentence, all of the text between tags was translated even when the page text was longer than 1,000 characters.

is it possible to have non header anchors in markdown? [duplicate]

Is there markdown syntax for the equivalent of:
Take me to pookie
...
<a name="pookie">this is pookie</a>
Take me to [pookie](#pookie)
should be the correct markdown syntax to jump to the anchor point named pookie.
To insert an anchor point of that name use HTML:
<a name="pookie"></a>
Markdown doesn't seem to mind where you put the anchor point. A useful place to put it is in a header. For example:
### <a name="tith"></a>This is the Heading
works very well. (I'd demonstrate here but SO's renderer strips out the anchor.)
Note on self-closing tags and id= versus name=
An earlier version of this post suggested using <a id='tith' />, using the self-closing syntax for XHTML, and using the id attribute instead of name.
XHTML allows for any tag to be 'empty' and 'self-closed'. That is, <tag /> is short-hand for <tag></tag>, a matched pair of tags with an empty body. Most browsers will accept XHTML, but some do not. To avoid cross-browser problems, close the tag explicitly using <tag></tag>, as recommended above.
Finally, the attribute name= was deprecated in XHTML, so I originally used id=, which everyone recognises. However, HTML5 now creates a global variable in JavaScript when using id=, and this may not necessarily be what you want. So, using name= is now likely to be more friendly.
(Thanks to Slipp Douglas for explaining XHTML to me, and nailer for pointing out the HTML5 side-effect — see the comments and nailer's answer for more detail. name= appears to work everywhere, though it is deprecated in XHTML.)
On bitbucket.org the voted solution wouldn't work. Instead, when using headers (with ##), it is possible to reference them as anchors by prefixing them as #markdown-header-my-header-name, where #markdown-header- is an implicit prefix generated by the renderer, and the rest is the lower-cased header title with dashes replacing spaces.
Example
## My paragraph title
will produce an implicit anchor like this
#markdown-header-my-paragraph-title
The whole URL before each anchor reference is optional, i.e.
[Some text](#markdown-header-my-paragraph-title)
is equivalent of
[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title)
provided that they are in the same page.
Source: https://bitbucket.org/tutorials/markdowndemo/overview (edit source of this .md file and look at how anchors are made).
Use a name. Using an id isn't necessary in HTML 5 and will create global variables in your JavaScript
See the HTML 5 specification, 5.9.8 Navigating to a fragment identifier - both id and name are used.
It's important to know that most browsers still turn IDs into global variables. Here's a quick test. Using a name avoids creating globals and any conflicts that may result.
Example using a name:
Take me to [pookie](#pookie)
And the destination anchor:
### <a name="pookie"></a>Some heading
There's no readily available syntax to do this in the original Markdown syntax, but Markdown Extra provides a means to at least assign IDs to headers — which you can then link to easily. Note also that you can use regular HTML in both Markdown and Markdown Extra, and that the name attribute has been superseded by the id attribute in more recent versions of HTML.
Markdown Anchor supports the hashmark, so a link to an anchor in the page would simply be [Pookie](#pookie)
Generating the anchor is not actually supported in Gruber Markdown, but is in other implementations, such as Markdown Extra.
In Markdown Extra, the anchor ID is appended to a header or subhead with {#pookie}.
Github Flavored Markdown in Git repository pages (but not in Gists) automatically generates anchors with several markup tags on all headers (h1, h2, h3, etc.), including:
id="user-content-HEADERTEXT"
class="anchor"
href="#HEADERTEXT"
aria-hidden="true" (this is for an svg link icon that displays on mouseover)
Excluding the aria/svg icon, when one writes:
# Header Title
Github generates:
<h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>
Therefore, one need do nothing to create the header links, and can always link to them with:
Link to the [Header Title](#header-title)
Late to the party, but I think this addition might be useful for people working with rmarkdown. In rmarkdown there is built-in support for references to headers in your document.
Any header defined by
# Header
can be referenced by
get me back to that header(#header)
The following is a minimal standalone .rmd file that shows this behavior. It can be knitted to .pdf and .html.
---
title: "references in rmarkdown"
output:
html_document: default
pdf_document: default
---
# Header
Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text.
Go back to that [header](#header).
For most common markdown generators. You have a simple self generated anchor in each header. For instance with pandoc, the generated anchor will be a kebab case slug of your header.
echo "# Hello, world\!" | pandoc
# => <h1 id="hello-world">Hello, world!</h1>
Depending on which markdown parser you use, the anchor can change (take the exemple of symbolrush and La muerte Peluda answers, they are different!). See this babelmark where you can see generated anchors depending on your markdown implementation.
Using the latest Markdown, you should be able to use the following syntax:
[](){:name='anchorName'}
This should create the following HTML:
<a name="anchorName"></a>
If you wanted the anchor to have text, simply add the test within the square brackets:
`Some Text{:name='anchorName'}
For anyone who is looking for a solution to this problem in GitBook. This is how I made it work (in GitBook). You need to tag your header explicitly, like this:
# My Anchored Heading {#my-anchor}
Then link to this anchor like this
[link to my anchored heading](#my-anchor)
Solution, and additional examples, may be found here: https://seadude.gitbooks.io/learn-gitbook/

Style Hugo Poem

I want to display poems with hugo.
The content file:
So some text
with some rhyme
and another strophe
enter code here
I want to be displayed this exactly with these newlines.
What happens by just using .Content? Lines within the same strophe get no newline.
What happens by making a newline there? {{ (replace .Content "\n" "<br/>") | safeHTML}}? Four newlines between the strophes.
Now, I'm confused. I'm wondering it's that hard to get back the original newlines.
In fact, I'm fighting against the markdown processor. Can't I just say: "No, don't markdownify this?"
Given that this answer also uses Markdown, here's one way you could do it:
<p>So some text<br>
with some rhyme<br>
<br>
and another strophe<br>
enter code here</p>
You can put generic HTML into a Markdown document and it gets rendered out as-is:
So some text
with some rhyme
and another strophe
enter code here
There are multiple solutions. You could use native Markdown linebreaks, raw HTML or a codeblock.
Markdown linebreaks
The simplest solution is to use native Markdown linebreaks (two spaces at the end of a line generate a line break).
In the following example, the spaces have been replaced with dots for demonstration purposes:
So·some·text··
with·some·rhyme
and·another·strophe··
enter·code·here
Which generates the following HTML (almost identical to the other answer's suggested raw HTML)
<p>So some text<br>
with some rhyme</p>
<p>and another strophe<br>
enter code here</p>
and renders as
So some text
with some rhyme
and another strophe
enter code here
Of course, unless your editor has the option to display whitespace, you can't actually see those trailing spaces and it can be annoying to edit documents that need to contain them.
Raw HTML
It often helps to consider what HTML you want Markdown to output before deciding which Markdown structure to use for formatting some text. In this case it is interesting to look at the pre tag. The HTML5 spec describes the tag this way:
The <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
And then provides Example 12:
The following shows a contemporary poem that uses the pre element to
preserve its unusual formatting, which forms an intrinsic part of the
poem itself.
<pre> maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</pre>
Given the above, the pre tag seems like a good candidate for marking up a poem. You can format the plain text however you want and it its wrapped in a pre tag, the plain text formatting is retained.
Of course, Markdown does not have a mechanism to create pre tags which do not also include a child code tag (Markdown code blocks). And as the original Markdown rules state:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
Given the above, the "correct" way to write a poem with unusual formatting is to use a raw HTML pre tag.
<pre>So some text
with some rhyme
and another strophe
enter code here</pre>
which renders as:
So some text
with some rhyme
and another strophe
enter code here
Codeblock
However, if you only want to use supported Markdown syntax and are less concerned about the semantics of the generated HTML, then a Markdown code block would do fine. While "the code element represents a fragment of computer code," there is no rules controlling how code elements are to be displayed. Of course, some sites might apply some CSS rules to code elements, so you may need to be aware of that, but when you can complete control (perhaps on your own site) that may not be a problem.
Here's a simple code block, just like the one included in the original question:
So some text
with some rhyme
and another strophe
enter code here
Which you already know renders as:
So some text
with some rhyme
and another strophe
enter code here

Markdown - How to set tab size for 1 code block

I am working with a markdown file, got some code blocks. For one specific code block I want to forcefully set tab-size equal 6. How do I do that?
I got three ideas:
Something-something info-string. Just like I write ```sql at the start of the code block, there could be a way to add something like tab-size = 6 or something. Haven't found any info about it though, and all my random guesses failed (tabsize, tabSize and tab-size).
Changing style via html tag. For example,
<span style = "font-size: 2em;">
```sql
<some code here>
```
</span>
does indeed change size of code. So it should in theory change tab size if I write something like style = "tab-size: 6;". It doesn't. Moreover, I saw this post which mentions other properties like -o-tab-size, so I added all that to my span tag too. Still nothing.
Side note: using Markdown preview plus from atom, having tab-size equal 2. In Markdown preview (without plus) every tab is exchanged for 4 spaces. In Github tab-size is 6, but it is not because I set it so (checked with different value, didn't work).
Just use spaces instead of tabs, this clearly will work.
So, yeah, how do I do such a thing?
Use spaces instead of tabs.
The tab-size property is not supported by all browsers.
Some sites (like GitHub) will strip out any style tags in the output for security reasons.
Some Markdown parsers will convert all tabs to spaces anyway.
Given the above, the only way to consistently maintain control of your output is to use spaces. And that gives you absolute control of your code blocks.

p:textEditor <br> line separator instead of <p>

I am using JSF (PrimeFaces) tag p:textEditor for my forum. This tag use Quill rich text editor. Default behavior is wrapping every line in blocks (wraping in paragraphs tags p /p):
<p>line1</p>
<p>line2</p> ....
And it does not looks nice, because of output too much spaces between lines.
Instead, I need to get like this (use tag br/ between lines):
<br/> line1
<br/>line2 .....
For example, PrimeFaces extension has tag pe:ckEditor, that use ckEditor (rich text editor). And I can change its behavior just adding "config.enterMode = CKEDITOR.ENTER_BR;" in config.js file.
Is there in p:textEditor and its Quill (rich text editor) same ability or some another way that can fix my problem?
I was looking into feedback of Quills owner -
https://github.com/quilljs/quill/issues/1074 . And I checked all new versions after this feedback.
So yet Quill does not has this ability. The owner suggests to use css-style for fixing this behaviour (adjust paddings). Yes, it can resolve a problem of big spaces, but:
1) this way is not so comfortable;
2) this way is not suitable for forums quotations, because separate every line in own quote.
Here the problem is discussed and here is some js approach to fix it. But I am not going to use it because I use Quill built in JSF library. So I switch to pe:ckEditor and ckEditor rich text editor

Resources