How are script tags and style tags in comments on SoloLearn work?

Question

I'm not really sure whether this is just me being confused, but I have seen these comments when people write Brython and JSX:

//</script><script type="text/python">

And also I have seen these CSS comments for Less:

/*</style><style type="text/less-no-read" id="less">*/

How do these comments work and what are they called?

Thanks in advance 🙂

Answer 1

You can't find answer in Google for this, because this is for SoloLearn code playground only.

Before explaining to you, I must emphasize that this skill has no use if you are doing production in IDE installed at your computer.

SoloLearn compiles web code in local browser, it puts the codes in JS tab and CSS tab before </head>

The codes in JS tab are wrapped in a <script> </script> pair, and the codes in CSS tab are wrapped in a <style> </style> pair.

If you try doing it manually, you'll see why their way of commenting makes sense. They overload the SL opening tags by their own opening tags.

Answer 2

Hey Nboumakis

Like Gordon mentioned, it seems as though SoloLearn looks for those comments in the code.

Answer 3

Thanks Gordon for answering!

Answer 4

I am sorry if my previous explanation is too implicit.

Let's use this snippet by Invboy in the above code linked by Edwin as example:-

/*</style><style id="less" type="text/less-no-read">/**/

Here is the breakdown :

Part A) How it looks in JS tab

It looks like one commented message. Because there is an opening /* and a closing */

Noticing there are two /*,
let's denote them as o1 and o2;
And for that */, let's denote it as c1.

Part B) What happens when the code gets compiled?

B1. The final code is
<style> (this opening tag is generated by code playground)
/*</style><style id="less" type="text/less-no-read">/**/

... Your scripts in CSS tab
</style>(this closing tag is generated by code playground)

B2. The </style> which was considered part of a comment in part A now actually paired up with the generated <style>

B3. Now o1 doesn't have a pairing closing */ within the first <style></style> pair

B4. Now, the <style> with type attribute, which in part A looked like part of comment, takes effect. Its

Answer 5

(continue after word limit)

B4 (con't) : the type attribute takes effect, and so the code within this style tags will be parsed as text/less-no-read

B5. o2 now takes effect, it is immediately closed by c1.

That's the breakdown of the process for overloading <style> for codes in CSS tab. What's happening when people try to overload the <script> tag is of a similar sense.

Answer 6

Now I think I get it. Thanks Gordon. 😊